zoukankan      html  css  js  c++  java
  • 原生 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>
  • 相关阅读:
    听说-- 迭代
    听说
    听说---时序图
    闪屏
    WBS
    听说
    Agile Development ----敏捷开发
    软件测试
    需求分析:WBS图
    2048小游戏
  • 原文地址:https://www.cnblogs.com/ldl326308/p/9464365.html
Copyright © 2011-2022 走看看