AJAX-XMLHttpRequest的认识

发布时间：2020-12-16 00:15:49 所属栏目：百科来源：网络整理

导读：上篇博文中说到我们在进行百度搜索的时候，不需要刷新整个网页，技术支持在哪就是它-XMLHttpRequest。 XMLHttpRequest对象可以再不向服务器提交整个页面的情况下，实现局部更新网页。当网页全部加载完毕后，客户端通过该对象向服务器请求数据，服务器接受数

上篇博文中说到我们在进行百度搜索的时候，不需要刷新整个网页，技术支持在哪就是它-XMLHttpRequest。

XMLHttpRequest对象可以再不向服务器提交整个页面的情况下，实现局部更新网页。当网页全部加载完毕后，客户端通过该对象向服务器请求数据，服务器接受数据并处理后，向客户端反馈数据。这样我们可以联想一下百度搜索引擎，原来是这货在搞怪。

目前XMLHttpRequest对象已经得到了大部分浏览器的支持，因此使用Ajax技术开发Web应用程序的时候一般情况下不会出现问题。

不过，当开发人员确定使用Ajax技术来开发时，仍然需要考虑用户会使用什么样的浏览器来对网站进行访问，虽然不支持XMLHttpRequest对象的浏览器占少数。
在使用XMLHttpRequest对象向服务器发送请求和处理响应之前，必修先用JavaScript创建一个XMLHttpRequest对象，然后通过这个对象来和服务器建立请求并接收服务器返回的数据。由于XMLHttpRequest不是一个W3C标准，所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例。Internet Explorer把XMLHttpRequest实现为一个ActiveX对象，其他浏览器（如Firefox、Safari和Opera等）把它实现为一个本地JavaScript对象。由于存在这些差别，JavaScript代码中必须包含有关的逻辑，从而使用ActiveX技术或者使用本地JavaScript对象技术来创建XMLHttpRequest的一个实例。

在这里仿佛语言都是很无力的，我来看看关于它的应用吧：

下面是用户提交一个数据，用来查询是否存在的实例。通过传统web方式和AJAX方式的对比，更能显示出AJAX的优势。代码是ajax中html部分。传统版我就不贴了。

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <input type="text" id="name"/>
        <input type="button" name="submit" onclick="submit()" value="AJAX校验"/>
        <div id="message"></div>
			
        <script type="text/javascript">
            var xmlhttp;
            function submit(){
                // 1.创建XMLHttpRequest对象
                if(window.XMLHttpRequest){
                    // IE7,IE8,FireFox,Mozillar,Safari,Opera
                    xmlhttp = new XMLHttpRequest();
                    // 由于Mozillar版本的，由于XML以MimeType开头时，服务端可能会无法工作
                    if(xmlhttp.overrideMimeType){
                        xmlhttp.overrideMimeType("text/xml");
                    }
                }else if(window.ActiveXObject){
                    // IE5，IE6
                    var activexName = ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','msxml2.xmlhttp.3.0','MSXML2.XMLHTTP.2.0','MSXML2.XMLHTTP.1.0']
                    for(var n=0;n< activexName.length; n++) // 循环尝试
                    {
                        try{
                            xmlhttp = new ActiveXObject(activexName[n]);
                            break;
                        }catch(e){}
                               
                    }
                }else{
                    alert("不能建立XMLHttpRequest对象");
                    return false;
                }

                // 2.注册回调方法
                xmlhttp.onreadystatechange = callback; // 需要方法名
                
                var name=document.getElementById("name").value;
                if(name==null || name==""){
                    alert("用户名不能为空!");
                }
                
                /* 使用GET方式
                // 3.设置和服务端交互的相应参数
                xmlhttp.open("GET","AjaxServer?name="+name,true);// true 采用异步
                
                // 4.设置向服务端发送的数据，启动和服务端的交互
                xmlhttp.send(null); // 主要用在post方式
                 */
               
                // **********使用POST方式
                // 3.设置和服务端交互的相应参数
                xmlhttp.open("POST","AjaxServer",true);
                // POST方式交互所需要增加的代码：设置头信息
                xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                
                // 4.设置向服务端发送的数据，启动和服务端的交互
                xmlhttp.send("name=" + name); 
                
            }
              
            function callback(){
                // 5.判断和服务端的交互是否完成，判断服务端是否正确返回数据
                if(xmlhttp.readyState ==4){
                    // 表示交互已完成
                    if(xmlhttp.status ==200){
                        // 表示服务器的相应代码是200，正确返回数据
                        // 纯文本数据的接受方法
                        var messageNode = document.getElementById("message");
                        messageNode.innerHTML = xmlhttp.responseText;
                        
                        // xml数据对应的dom对象接受方法
                        // 使用的前提是，服务端需要设置content-type为text/xml
                        // var domXml = xmlhttp.responseXML;
                    }
                }
            }
        </script>
    </body>
</html>

用两张图片分别表示两者的不同之处。

最后贴几张图来对比一下传统和AJAX的区别吧。

页面端：

服务器端：

说了这么多，AJAX的好处是：

1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

凡事都有利弊，我们先学好ajax的好处吧，坏处先保留。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!