原生 XMLHttpRequest

一、什么是XMLHttpRequest?

XHR英文全名XmlHttpRequest，中文可以解释为可扩展超文本传输请求。Xml可扩展标记语言，Http超文本传输协议，Request请求。XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能，XMLHttpRequest 对象用于在后台与服务器交换数据，所有现代的浏览器都支持 XMLHttpRequest 对象。

二、XMLHttpRequest能干什么？

1、在不重新加载页面的情况下更新网页

2、在页面已加载后从服务器请求数据

3、在页面已加载后从服务器接收数据

4、在后台向服务器发送数据

三、XMLHttpRequest的open()和send()方法

　　1、open(method,url,async)方法

　　　　method:请求类型（GET或POST）

　　　　url:文件在服务器上的位置

　　　　async:ture(异步)或 false(同步)

 

　　2、send(string)方法

　　　　string:仅用于POST请求

四、XMLHttpRequest 对象的重要属性：

（1）readyState存有XMLHttpRequest 的状态，0~4。

         0——请求未初始化

         1——服务器连接已经建立

         2——请求已接受

         3——请求处理中

         4——请求已完成，且响应已就绪。

（2）status，HTTP的特定状态码：

　　100-199：信息性的标示用户应该采取的其他动作。

　　200-299：表示请求成功。

　　300-399：用于那些已经移走的文件，常常包括Location报头，指出新的地址。

　　400-499：表明客户引发的错误。

　　500-599：由服务器引发的错误。

 

五、原生XMLHttpRequest代码实现

    <script>
        //创建XMLHttpRequest对象
        var xhr;
        if(window.XMLHttpRequest){
            //IE7+,Firefox，Chrome，Opera,Safari 执行
            xhr = new XMLHttpRequest();
        }else{
            // IE6,IE5 执行
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        // GET 请求
        xhr.open("GET","url",true);
        xhr.send();

        // POST 请求
        xhr.open("POST","url",true);
        xhr.send();

        //如果需要传参，则需要使用setRequestHeader() 来添加HTTP 头部
        xhr.open("POST","url",true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send("name=tome&age=24");

        // 通过 onreadystatechange  事件来监听状态变化，并获取服务器响应
        xhr.onreadystatechange = function(){
            //请求成功时
            if(xhr.readyState == 4 && xhr.status == 200){
                alert(xhr.responseText);
            }
        }


    </script>