原生 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>
原文地址:https://www.cnblogs.com/ldl326308/p/9464365.html