1.AJAX是什么?
ajax全称为Aysnchronous JavaScript And XML,即异步JavaScript+XML,是一种无需重新加载,就可以实现网页部分更新的技术
2.创建一个AJAX的基本步骤
-
创建一个XMLHttpRequest对象
XMLHttpRequest简称(XMR)用于在后台与服务器交换数据,所有现代浏览器均支持XMR对象(IE5,IE6使用ActiveXObject)创建一个异步对象
var xhr=null
创建ajax需要考虑兼容性处理,IE6以上:new XMLHttpRequest()、IE6:new ActiveXObject(“Microsoft XMLHTTP”)
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
- 连接服务器
创建ajax对象xhr,使用xhr.open("请求方式(get/post)",url路径,"异步/同步")
第三个参数:true—>同步、false—>同步
当请求方式为POST的时候,代码如上;
当请求方式为GET的时候,使用xhr.open(“请求方式(GET/POST)”,url路径+"?"请求数据+,"异步/同步’)
- 发送请求
使用xhr.send()发送请求
当请求方式为GET的时候,发送请求为xhr.send(null)
当请求方式为POST的时候,发送请求为xhr.send(请求数据)
在使用POST的时候必须xhr.send(请求数据)上面添加
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
- 接受返回值
使用ajax会有一个readystatechange事件:当请求被发送到服务器时,执行一些基于响应的操作
当readystatechange改变时,就会触发这个事件执行
readyState:请求的状态,返回的时状态码(0-4):
0(未初始化)open还没有调用
1(载入)已经调用send()正字发送请求
2(载入完成)send方法已经完成,已经收到全部响应内容
3(解析)正在解析响应内容
4(内容)吸纳应内容解析完成,可以在客户端使用
responseText:返回请求的内容
status:返回请求的结果码:返回200(成功)、返回404(未找到)、返回5**(5开头)(服务器错误)
3.封装AJAX
function ajax(options){
var xhr = null;
var params = formsParams(options.data);
//创建对象
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// 连接
if(options.type == "GET"){
xhr.open(options.type,options.url + "?"+ params,options.async);
xhr.send(null)
} else if(options.type == "POST"){
xhr.open(options.type,options.url,options.async);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(params);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
options.success(xhr.responseText);
}
}
function formsParams(data){
var arr = [];
for(var prop in data){
arr.push(prop + "=" + data[prop]);
}
return arr.join("&");
}
}
ajax({
url : "a.php", // url---->地址
type : "POST", // type ---> 请求方式
async : true, // async----> 同步:false,异步:true
data : { //传入信息
name : "张三",
age : 18
},
success : function(data){ //返回接受信息
console.log(data);
}
})