JS AJAX
作者:互联网
1. ajax与XMLHttpRequest
- 什么是XMLHttpRequest
一种支持异步请求的技术,是ajax的核心 - XMLHttpRequest的作用
- 向服务器提出请求并处理响应而不阻塞用户
- 可以在页面加载后进行局部页面更新
- 如何使用ajax
- 创建XMLHttpRequest异步调用对象
- 创建一个新的HTTP请求,并指定该HTTP请求的方法URL
- 设置响应HTTP请求状态变化的函数
2. XMLHttpRequest对象
- 简单版本
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
- 全面版本
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject !="undefined"){
var xhrArr=['Microsoft.XMLHTTP',
'MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP.2.0'];
var len=xhrArr.length,xhr;
for(var i=0;i<len;i++){
try{
xhr=new ActiveXObject(xhrArr[i]);
break;
}catch(e){
}
}
}else{
throw new Error('No XHR');
}
}
var xhr=createXHR();
console.log(xhr);
3. 响应状态变化函数
一般在创建http请求前
var data=null;
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){//异步调用成功,响应内容解析完成,可以在客户端调用
//xhr.status >=200 && xhr.status<300异步调用真正成功
//xhr.status===304 请求资源没修改,可以使用浏览器缓存
if((xhr.status >=200 && xhr.status<300) || xhr.status===304){
//获得服务器返回的数据
//console.log(xhr.responseText);为字符串
data=eval("("+xhr.responseText+")");
//将数据格式转为js能够处理的格式
}
}
}
- responseText 返回数据的字符串形式
- responseXML 返回的DOM兼容的文档数据对象
- status 返回的状态码 如404未找到 200已就绪
- status Text 伴随状态码的字符串信息
4. 创建HTTP请求
- open(method,url,async) open初始化请求,不会向服务器发送真正请求,且只能向同一个域中使用相同协议和端口的URL发送请求
//创建请求
xhr.open("get","./slide.json",true);
//get不需要传参
xhr.send(null);
//post send中需要传参
xhr.send({'use':'zhang',id:6});
//设置http头信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
5. JSON
- JSON.parse() 将JSON字符串转为JS能处理的对象格式
data=JSON.parse(xhr.responseText);
- JSON.stringify() 将JS对象转为JSON字符串
- JS中的eval()类似JSON.parse(),能将JSON字符串转换为json对象,但是也可以执行不符合JSON格式的代码,有可能受到攻击,尽量少用
标签:XMLHttpRequest,请求,JSON,JS,xhr,AJAX,var,MSXML2 来源: https://blog.csdn.net/ChristWTF/article/details/104189256