手写AJAX（兼容IE）

AJAX

Ajax 并不算是一种新的技术，而是已有技术的组合;

主要用来实现客户端与服务器端的异步通信，实现页面的局部刷新;

为什么要使用Ajax?

在没有使用Ajax情况下：

用户进入提交/等待/重新显示Web站点会重新加载整个网页；

对于服务器加大了流量，对于用户每一次与服务器传递数据都会重新加载整个网页。

使用Ajax情况下：

通过在后台与服务器进行少量数据交换；

AJAX 部分刷新不会干扰或中断正在使用的网页。

AJAX最大的特点是什么。

Ajax可以实现局部刷新,在不更新整个页面的前提下维护数据。

XMLHttpRequest对象

XmlHttpRequest是Ajax的核心JavaScript对象;

使用XmlHttpRequest可以使JavaScript向服务器提出异步请求，而不阻塞页面；

通过XMLHttpRequest对象，可以实现页面局部更新;

XMLHttpRequest对象的常用方法和属性。

open（get/post，url，async，true（异步），false（同步））经常使用前三个参数，表示建立对服务器的调用，第一个参数是HTTP请求方式，第二个参数是请求页面的URL，第三个参数是异步/同步执行。

send()方法，发送具体请求

abort()方法，停止当前请求

readyState属性 请求的状态 有5个可取值

• 0=未初始化 ;
• 1=正在加载;
• 2=以加载;
• 3=交互中;
• 4=完成;

responseText 属性 服务器的响应，表示为一个字符串；

reponseXML 属性 服务器的响应，表示为XML；

status 服务器的HTTP状态码，200对应ok 400对应not found

AJAX请求五个步骤

（1）创建XMLHTTPRequest对象；

（2）使用open方法创建http请求，并设置请求地址
xhr.open（get/post，url，async，true（异步），false（同步））经常使用前三个参数；

（3）设置发送的数据，用send发送请求；

（4）注册事件（给ajax设置事件）；

（5）获取响应并更新页面；

手写AJAX

get请求

// get请求
// 创建 XMLHttpRequest 实例
const xhr = new XMLHttpRequest();
// xhr.open 建立对服务器的调用，ture表示异步
xhr.open("GET","URL",ture);
xhr.onreadystatechange = function(){
    // readyState === 4 请求完成，status === 200请求成功
    if(xhr.readyState === 4 && xhr.status === 200){
        alert(xhr.responseText);
        // 控制台以JSON形式输出
        console.log(JSON.parse(xhr.responseText));
    }
}
xhr.send(null);

post请求

// post请求
const xhr = new XMLHttpRequest();
xhr.open("POST","URL",ture);
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        alert(xhr.responseText);
        console.log(JSON.parse(xhr.responseText));
    }
}
// 待发送数据
const postData = {
    username: 'zhangsan',
    password: "xxxx"
}
// 以JOSN格式发送请求数据
xhr.send(JSON.stringify(postData));

兼容IE

window.ActiveXObject

判断浏览器是否支持ActiveX控件，如果浏览器支持ActiveX控件可以利用
var xml=new ActiveXObject(“Microsoft.XMLHTTP”);创建XMLHttpRequest 对象（这是在IE7以前的版本中）；

在较新的IE版本中可以利用 var xml=new ActiveXObject(“Msxml2.XMLHTTP”)的形式创建XMLHttpRequest对象;

而在IE7及非IE浏览器中可以利用var xml=new XMLHttpRequest()创建XMLHttpRequest对象。

兼容IE的get请求

function send_request(){
    if (window.XMLHttpRequest){
        var xhr = new XMLHttpRequest();
    }else if (window.ActiveXObject){
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xhr !== null){
        xhr.open( "GET", "URL",true);
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4 && xhr.status==200){
        		alert(xhr.responseText);
        　　} 
        }
        xhr.send();
    }else{
        alert("您的浏览器不支持AJAX！");
    }
};