AJAX--XMLHttpRequest

最新推荐文章于 2023-06-20 11:47:50 发布

罗俊-Everns

最新推荐文章于 2023-06-20 11:47:50 发布

阅读量294

点赞数 1

分类专栏： B/S----------------------- AJAX JavaScript 文章标签： AJAX

本文链接：https://blog.csdn.net/Luojun13Class/article/details/81252998

版权

B/S----------------------- 同时被 3 个专栏收录

92 篇文章 0 订阅

订阅专栏

JavaScript

30 篇文章 1 订阅

订阅专栏

AJAX

4 篇文章 0 订阅

订阅专栏

前言

XMLHttpRequest为可扩展超文本传输请求，它是XML（可扩展标记语言），Http（超文本传输协议），Request（请求）三者结合起来的；XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。

内容

使用方法：

建立XMLHttpRequest对象
注册回调函数
使用open方法设置和服务器端交互的基本信息
设置发送的数据，开始和服务器端交互
在回调函数中判断交互是否结束，相应是否正确，并根据需要获取服务器端返回的数据，更新页面内容

属性和方法：

方法	描述
`open（String method,String url,boolean asynch,String username,String password）`	①指定和服务器端交互的HTTP方法，URL地址及其他请求信息②其中method表示HTTP请求方法，之处所有HTTO的方法，一般使用“GET”，“POST”url表示请求的服务器的地址③asynch表示是否采用异步方式，true表示异步，false表示同步④后两个参数可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码
`send(content)`	①向服务器发送请求，如果采用异步方式，该方法会立即返回②Content可以不指定或指定为null表示，不发送数据③其中内容可以是DOM对象，输入流或是字符串
setRequestHeader（String headerString value）	①设置HTTP请求中的指定头部header的值为value②此方法需要在open方法以后调用
getAllResponse Headers()	①返回包含HTTP的所有响应头信息，其中响应头包括Content-Length，Date，URI等内容②返回值是一个字符串，包含所有分头信息，其中每一个键名和键值用冒号分开，每一组键之间用CR和LF（回车加换行符）来分隔
getResponseHeader(String header)	①返回HTTP响应头中指定的键名header对应的值
abort()	①停止当前http请求，对应的XMLHttpRequest对象会复位到未初始化的状态
`readyState`	①表示XMLHttpRequest对象的状态：0=未初始化。对象已创建，为调用open，1=open方法成功调用以后，send方法未调用，2=send方法已经调用，尚未开始接收数据，3=正在接收数据，http响应头信息已经接受，相应数据尚未接受完成，4=完成，相应数据接受完成
`onreadystate change`	请求状态改变的事件触发器（readyState变化时会调用这个属性上注册的javascript函数）
`responseText`	服务器相应的文本内容
`responseXML`	服务器相应的XML内容对应的DOM对象
`status`	服务器返回的http状态码：200表示”成功”，404表示”未找到”，500表示”服务器内部错误”
statusText	服务器返回状态码的文本信息

举例

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript">
            function submit() {
                //alert("text");
                //1.创建XMLHttpRequest对象
                if (window.XMLHttpRequest) {
                    //IE7./IE8./Fire Fox/Mozillar/Safaro/Opera
                    //alert("IE7,IE8,FireFox,Mozillar,Safaro,Opera");
                    xmlhttp = new XMLHttpRequest();
                    if (xmlhttp.overrideMimeType) {
                        xmlhttp.overrideMimeType("text/xml");
                    }
                }else if (window.ActiveXObject) {
                    //IE6/IE5.5/IE5
                    //alert("IE6,IE5.5,IE5");
                    var activexName = ["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",
                        "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
                        "MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
                    for (var i = 0; i < activexName.length; i++) {
                        try{
                            xmlhttp = new ActiveXObject(activexName[i])
                            break;
                        }catch(e){


                        }
                    }                       
                }
                if (xmlhttp == undefind ||xmlhttp == null) {
                    alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器")
                    return;
                }
                //alert(xmlhttp);
                //2.注册回调方法
                xmlhttp.onreadystatechange = callback;
                //错误的写法：xmlhttp.onreadystatechange = callback();
                //固定用法：获取文本框中用户输入的内容
                var userName = document.getElementById("userName").value;
                //GET方法交互
                //3.设置和服务器端交互的相应参数
                //xmlhttp.open("GET","AJAX?name = " + userName,true )

                //4.设置向服务器端发送的数据，启动和服务器端的交互
                //xmlhttp.send(null);


                //POST方法交互
                //3.设置和服务器端交互的相应参数
                xmlhttp.open("POST","AJAX",true )                
                //POST方式交互所需要增加的代码
                xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                //4.设置向服务器端发送的数据，启动和服务器端的交互
                xmlhttp.send("name="+userName);
            }
            function callback(){
                //5.判断和服务器端的交互式否完成，还要判断服务器端是否正确返回了数据
                if (xmlhttp.readyState == 4) {
                    //表示和服务器端的交互已经完成
                    if (xmlhttp.status == 200) {
                        //表示服务器的相应代码是200，正确返回了数据
                        //纯文本数据的接受方法
                        var message = xmlhttp.responseText;
                        //XML数据对应的DOM对象的接受方法
                        //使用的前提是，服务器端需要设置content-type为text/xml
                        //vardomXml = xmlhttp.responseXML

                        //记忆向div标签中填充文本内容的方法
                        var div = document.getElementById("message");
                        div.innerHTML = message;
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="text" id="UserName"/>
        <input type="button" onclick="submit()" value="校验用户名"/>
        <br/>
        <div id ="message"></div>
    </body>
</html>

总结

不同的浏览器中XMLHttpRequest对象建立的方式不同，IE7、IE8、FireFox、Mozilla、Safari、Opera中直接new XMLHttpRequest,IE6、IE5.5、IE5则需要通过某一个正确的ActiveXObject控件的名称通过newActiveXObject（控件名）的方式
设置回调函数时，不要在函数名后面加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。正确的方式应该是将回调函数的名字注册给这个属性。实际上每次readyState的值发生变化的时候，回调函数都会被调用，但是一般我们之关心状态4.如果之关心正确的相应数据，只要在执行send方法之前设置回调函数即可。但是仍然建议在XMLHttpRequest对象创建后就先设置回调函数，这样回调函数还可以处理其他的状态。
open方法最多可以由五个参数，其中头三个参数是必须的；使用GET方法时，请求数据位于url链接中，后面的send方法的参数直接写null就可以使用POST方式时，open方法后面需要先调用setRequestHeader方法来设置Content-Type的值，然后调用send方法，send的参数就是请求的数据
回调函数中，最好将判断readyState和status的两个if条件，分开来写。ReadyState的判断条件位于外层，status的位于内层，加入他们被放到了同一个if条件中，判断数据正常返回也是没有问题的。但是不便于分别处理服务器端不是200响应的情况和readyState不是4的情况
当服务器端没有正确返回XML数据时，在JavaScript中使用ResponseXML的方式获取返回的XML数据对应的DOM对象时，FireFox和IE的结果是有差别的。IE获取根元素节点为null，而FireFox获取根元素节点则是一个表示解析错误的元素节点。

end

谢谢您的阅读！

罗俊-Everns

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
13
评论
AJAX--XMLHttpRequest

前言XMLHttpRequest为可扩展超文本传输请求，它是XML（可扩展标记语言），Http（超文本传输协议），Request（请求）三者结合起来的；XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。内容使用方法：建立XMLHttpReque...
复制链接

扫一扫

专栏目录