1. ajax与XMLHttpRequest

1. 什么是XMLHttpRequest
   一种支持异步请求的技术，是ajax的核心
2. XMLHttpRequest的作用
   1. 向服务器提出请求并处理响应而不阻塞用户
   2. 可以在页面加载后进行局部页面更新
3. 如何使用ajax
   1. 创建XMLHttpRequest异步调用对象
   2. 创建一个新的HTTP请求，并指定该HTTP请求的方法URL
   3. 设置响应HTTP请求状态变化的函数

2. XMLHttpRequest对象

1. 简单版本

var xmlhttp;
if(window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
}else{
    xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}

2. 全面版本

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请求

1. 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

1. JSON.parse() 将JSON字符串转为JS能处理的对象格式

data=JSON.parse(xhr.responseText);

2. JSON.stringify() 将JS对象转为JSON字符串
3. JS中的eval()类似JSON.parse()，能将JSON字符串转换为json对象，但是也可以执行不符合JSON格式的代码，有可能受到攻击，尽量少用

• 点赞
• 收藏
• 分享
• • 文章举报

超人不会飞/ 发布了31 篇原创文章 · 获赞 1 · 访问量 2479 私信 关注