XMLHttpRequest

我不是女神ヾ 2022-03-20 04:16 226阅读 0赞

### 一、简介 ###

Ajax (Asynchronous Javascript And Xml )是指一种创建交互式网页应用的网页开发技术，其中，Ajax的核心是JavaScript对象XMLHttpRequest(以下简称XHR)，XHR是一种支持异步请求数据的技术。

我们通常将`Ajax`等同于`XMLHttpRequest`，但细究起来它们两个是属于不同维度的2个概念。`ajax`是一种技术方案，但并不是一种新技术。它依赖的是现有的`CSS/HTML/Javascript`，而其中最核心的依赖是浏览器提供的`XMLHttpReques`t对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。所以我用一句话来总结两者的关系：**我们使用`XMLHttpRequest`对象来发送一个`Ajax`请求。**

### 二、XMLHttpRequest对象的使用 ###

**1、创建XHR对象可以直接实例化XMLHttpRequest：**

var xhr = new XMLHttpRequest();

但，XHR对象不支持IE6，需要使用 ActiveX 对象通过传入参数Microsoft.XMLHTTP来实现。我们封装一个AjaxBase.js，去兼容不同浏览器：

//创建xhr对象
    function createXHR() {
        //判断是否支持这个属性,如果支持,则是IE7+,FF,Chrome,...
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        }
        //IE6-
        return new ActiveXObject("Microsoft.XMLHTTP");
    }

**2、open()方法**  
该方法并不会真正发送请求，而只是启动一个请求以备发送。它接受三个参数:要发送的请求类型(get、post)、请求的URL、表示是否异步的true or false。

//在请求服务器之前的准备工作
    /*
      第一个参数: 表示请求方式(get请求/post请求)
      第二个参数: 请求的URL,服务器地址,域名(ip和端口)必须和本html文件所在的域名(ip和端口)一致
      第三个参数: 表示是否采用异步请求(false表示同步,true表示异步)
     */
    xhr.open("GET", "http://localhost:8080/json/news.json", false);

**3、通过XHR对象来判断是否请求成功**  
      当请求发送到服务器端，收到响应后，响应的数据会自动填充XHR对象的属性，一共有四个属性：  
1）responseText:作为响应主体被返回的文本  
2）responseXML:如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的XML文档,否则是null  
3）statusText: HTTP状态的说明  
4）status:响应的HTTP状态，一般HTTP状态代码为200则表示请求服务器成功。另外还有400(语法错误导致服务器不识别)，401(请求需要用户认证)，404(指定的URL在服务器上找不到)等状态码：

//判断是否请求成功
    if (xhr.status == 200) {
        console.log(xhr.responseText);
    } else {
        console.log("请求失败! 状态码:" + xhr.status + ", " + xhr.statusText);
    }

需要注意的是，在实际项目开发中常用的是异步请求，使用异步调用的时候,需要触发readystatechange事件，检测readyState属性即可， readyState属性的值有5个: 0，1，2，3，4。最常用的是4，该状态码表示已经接受到了全部响应数据：

//这里在内部会创建一个子线程去请求服务器数据
    xhr.onreadystatechange = function() {
        console.log(xhr.readyState);
        //表示已经接受了全部数据,并且可以使用
        if (xhr.readyState == 4 && xhr.status == 200) {
           //如果可以进入if,则表示请求成功并且数据可用
           console.log(xhr.responseText);
        }
    }

**4、send()方法**  
该方法向服务器发送请求，并接受一个参数，作为请求主体发送的数据。  
如果是get方式请求则传入null。

//4, 向服务器发送http请求
    xhr.send(null);

**5、abort()方法**  
取消异步请求，如果需要取消某异步请求，则在send()之后再调用，写在send()之前调用会报错。

//取消异步请求
    xhr.abort();

**6、完成**

//按钮点击事件
    oInput.onclick = function() {
        //获取数据
        //1,创建xhr对象
        var xhr = createXHR();
        xhr.open("GET", "http://localhost:8080/json/news.json", true);
        xhr.onreadystatechange = function() {
           if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText); 
            console.log(typeof xhr.responseText);
            //JSON解析
            var dataList = JSON.parse(xhr.responseText);
            for (var i=0; i<dataList.length; i++){
                var obj = dataList[i]; 
                var trNode = document.createElement("tr");
                var tdNode1 = document.createElement("td");
                var tdNode2 = document.createElement("td");
                //给td赋值
                tdNode1.innerHTML = obj.title; 
                tdNode2.innerHTML = obj.time; 
                //把td添加到tr的子节点
                trNode.appendChild(tdNode1);
                trNode.appendChild(tdNode2);
                //把tr添加到table的子节点
                oTable.appendChild(trNode);
            }
           }
          }
        //4, 发送请求, 调用send方法
        xhr.send(null);
    }

### 三、实例 ###

实际使用别人封装好的Ajax方法例子

ajax({
        method: "post",
        url: "http://localhost:8080/json/news.json",
        data: {},
        async: true,
        success: function(responseText) {
               console.log(responseText);
        },
        failure: function(errorObj) {
               console.log("失败");
        }
    });