ajax是一种异步的网页交互手段,遵守同源策略,现各大浏览器都支持。
ajax是一种客户端(浏览器端)和服务端通信技术
使用ajax的时候需要先创建ajax实例,除ie5-6,需要使用ActiveXObject(),创建,其他的需要使用XMLHttpRequest()创建,创建ajax实例,需要用到new关键字。
XMLHttpReuqest的核心属性:
xhr.responseText:服务器端相应数据
xhr.responstXML:text/xml
xhr.status: http相应状态
xhr.statusText: http状态说明
xhr.readystate:
new xhr() //0
open() //1
send() //2
接收相应 //3
相应接受完毕 //4
XMLHttpRequest核心方法:
xhr.open() //发送请求,get传null,post传参数
xhr.send(); //接受响应前执行abort终止xhr后续操作和访问
xhr.abort();
//reasState状态变更事件
xhr.onreadystatechange()
对应以上状态的变化
0.创建xhr ----new XMLHttpRequest() , onreadystatecange
1.初始化请求 ----open()
2.发送请求 ---- send()
3.接受返回数据 ---- readyState ==3
4.接受完毕 ----readyState ==4 onreandystatechange函数内容
代码示例
//封装兼容低版本IE浏览器的xhr函数。
//ie低版本支持参数:“MSXML.XMLHttp.6.0”,"MSXML.XMLHttp.3.0",“MSXML>XMLHttp”
function createXhr(){
if(typeof XMLHttpRequest != 'undefined'){
return new XMLHTTPRequest();
}else if(typeof ActiveXObject != 'undefined'){
var tmp = '',
//低版本IE使用ActiveXObject.传参方式创建xhr对象,主要支持一下参数;
strList ==['MSXML.XMLHttp..0','MSXML.XMLHttp.3.0','MSXML.XMLHttp'];
for (var n in strList){
//异常处理,'try'
中代码出现异常会执行catch中的代码,而不会影响到外部后续代码执行
try{
new ActiveXObject(strList[n]);
var tmp = strList[n];
break;
}catch(e){
console.log(e);
}
}
if(tmp = ''){
console.log('您的浏览器目前不支持ajax请求');
}else{
return new ActiveXObject(tmp);
}
}else{
console.log('您的浏览器目前不支持ajax请求');
}
}
//封装公共请求函数
function sendRequest(callback){
var xhr = createXhr();
//绑定readyState监听事件
xhr.onreadystatechange = function(){
if(xhr.status == '200' || xhr.status =='304' ){
if(xhr.readyState =='4'){
//JSON.parse();
callback && callback(JSON.parse(xhr.responseText));
}
}
};
//请求对象初始化
xhr.open("get","ajaxText.json",false);
//发送请求
xhr.send();
}