ajax前后端交互原理（7）
7.ajax函数封装
7.1.实例引入
需求： 每秒钟请求一次服务器 获取到数据
实现： 把ajax进行封装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
setInterval(function(){
ajax("get",'getData.php','',function(data){
var oUl = document.getElementById('ul1');
var html = ''
for(var i = 0; i < data.length; i++) {
var oli = document.createElement('li');
html += '<li>'+ data[i].title + '[' + data[i].time + ']</li>';
}
oUl.innerHTML = html;
});
},1000)
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="获取数据" />
<ul id="ul1">
</ul>
</body>
</html>
7.2.ajax代码，普通封装：
function ajax(method,url,data,sucess) {
//创建ajax对象
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch(e) {
xhr = new ActiveXobject('Microsoft.XMLHTTP');
}
if(!method || method == "get"){
method = "get";
//打开要获取文件的地址
if(data){
url = url+"?"+data;
}
xhr.open(method, url, true);
//发送请求
xhr.send();
}else{
method = "post";
xhr.open(method, url, true);
if(data){
//发送请求
xhr.send();
}else{
xhr.send(data);
}
}
//alert(xhr.responseText);
//监听请求状态
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
sucess && sucess();
}
}
}
7.3.ajax代码,封装成对象的传参的形式：
function ajax(obj) {
//创建ajax对象
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch(e) {
xhr = new ActiveXobject('Microsoft.XMLHTTP');
}
if(!obj.method || obj.method == "get"){
obj.method = "get";
//打开要获取文件的地址
if(obj.data){
obj.url = obj.url+"?"+obj.data;
}
xhr.open(obj.method, obj.url, true);
//发送请求
xhr.send();
}else{
obj.method = "post";
xhr.open(obj.method, obj.url, true);
if(data){
//发送请求
xhr.send();
}else{
xhr.send(obj.data);
}
}
//alert(xhr.responseText);
//监听请求状态
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
obj.success && obj.success(data);
}
}
}
螺钉课堂视频课程地址：http://edu.nodeing.com
ajax前后端交互原理（7）的更多相关文章
- ajax前后端交互原理（5）
5.ajax简介 5.1.什么是ajax Asynchronous JavaScript and XML ,异步的javascript和XML 5.2.使用ajax有什么用 数据交互,可以从服务器获取 ...
- ajax前后端交互原理（1）
1.Node.js简介 1.1.前后台数据交互流程 在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首 ...
- ajax前后端交互原理（6）
6.XMLHttpRequest对象 XMLHttpRequest 是一个 API,它为客户端提供了在客户端和服务器之间传输数据的功能.它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页 ...
- ajax前后端交互原理（3）
3.HTTP服务器 3.3.相关前置知识 1 什么是url? 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的UR ...
- ajax前后端交互原理（4）
4.JSON 4.1 什么是JSON? JavaScript 对象表示法(JavaScript Object Notation)简称JSON,是一种轻量级的数据交换格式.虽然它基于JavaScript ...
- ajax前后端交互原理（2）
2.NPM使用 2.1.NPM是什么 NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,这里要搞清楚包的概念,通俗的说,包就是具有一定功能的工具(软件),本质 ...
- thinkphp+jquery+ajax前后端交互注册验证
thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- SSM-网站后台管理系统制作（4）---Ajax前后端交互
前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...
- JSON（及其在ajax前后端交互的过程）小识
一. json介绍 json是一种轻量级的数据交换格式,规则很简单: 并列的数据之间用逗号(,)分隔: 映射用冒号(:)表示: 并列数据的集合(数组)用方括号([])表示: 映射的集合(对象)用大括号 ...
随机推荐
- Rocket - diplomacy - MixedNode
https://mp.weixin.qq.com/s/zgeAI2n-2cHJi7-Ra5rYZA 介绍MixedNode的实现. 1. 类定义 2. inner/ou ...
- Java实现 LeetCode 402 移掉K位数字
402. 移掉K位数字 给定一个以字符串表示的非负整数 num,移除这个数中的 k 位数字,使得剩下的数字最小. 注意: num 的长度小于 10002 且 ≥ k. num 不会包含任何前导零. 示 ...
- Java实现 LeetCode 374 猜数字大小
374. 猜数字大小 我们正在玩一个猜数字游戏. 游戏规则如下: 我从 1 到 n 选择一个数字. 你需要猜我选择了哪个数字. 每次你猜错了,我会告诉你这个数字是大了还是小了. 你调用一个预先定义好的 ...
- Java实现 蓝桥杯 生命游戏
标题:生命游戏 康威生命游戏是英国数学家约翰·何顿·康威在1970年发明的细胞自动机. 这个游戏在一个无限大的2D网格上进行. 初始时,每个小方格中居住着一个活着或死了的细胞. 下一时刻每个细胞的状态 ...
- Java实现选择排序和冒泡排序
1 问题描述 给定一个可排序的n元素序列(例如,数字.字符和字符串),将它们按照非降序方式重新排列. 2 解决方案 2.1 选择排序原理简介 选择排序开始的时候,我们从第一个元素开始扫描整个列表,找到 ...
- java实现 洛谷 P1425 小鱼的游泳时间
题目描述 伦敦奥运会要到了,小鱼在拼命练习游泳准备参加游泳比赛,可怜的小鱼并不知道鱼类是不能参加人类的奥运会的. 这一天,小鱼给自己的游泳时间做了精确的计时(本题中的计时都按24小时制计算),它发现自 ...
- PAT 月饼
月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意:销售时允许取出一部分库存.样 ...
- （二）SQL注入常用的内置函数整理(以MySql为例)
[1]@@datadir 函数作用:返回数据库的存储目录构造SQL语句 select @@datadir; [2]@@version_compile_os 函数作用:查看服务器的操作系统SQL语句 ...
- Grafana6.4.4 + zabbix 4.2
环境简介 OS:Centos 7.4 zabbix:4.2.6 Grafana:6.4.4 一.yum 直接安装的方式 官方推荐有几种安装方式我采用yum 直接安装的方式 官方doc: https:/ ...
- <WP8开发学习笔记>获取手机的常用型号（如Lumia920，而非RM-822）
之前WP7时代可以用API获得WP手机的型号如lumia510,但是到了WP8后用APi只能获得硬件版本号了如RM-822,这种型号可以让我们更详细的了解具体的硬件版本,比如国行和港行,设备版本号不一 ...