教你轻松使用XMLHttpRequest对象

一、什么是XMLHttpRequest

  • XMLHttpRequest是 AJAX 的基础。
  • 所有现代浏览器均支持 XMLHttpRequest对象(IE5 和 IE6 使用 ActiveXObject)。
  • XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  • XMLHttpRequest对象用于和服务器交换数据。


技术分享



二、为什么使用XMLHttpRequest


  1、本质来说,XMLHttpRequest返回的是一个数据,传统页面返回的是一个页面。

  2、在不重新加载页面的情况下更新网页,在后台向服务器发送数据,实现异步

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


三、五步使用XMLHttpRequest


(一)、建立XMLHttpRequest对象


  IE7以上的浏览器,跟普通的对象一样,new就可以了。

xmlhttp=new XMLHttpRequest();

  特别注意的是IE6以下版本的浏览器:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");


(二)、注册回调函数

 xmlhttp.onreadystatechange=callback;

   Callback 函数是一种以参数形式传递给另一个函数的函数。如果存在多个 AJAX 任务,那应该为创建 XMLHttpRequest对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):



(三)、使用open方法设置和服务器端交互的基本信息


xmlhttp.open("GET","Ajax?name=" + userName,true ); 

xmlhttp.open("post", "Ajax", true);  
                //post方式交互所需要增加的代码
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");



(四)、设置发送的数据,开始和服务器端交互


xmlhttp.send(null);  //get 参数是null,因上一步(open)已经提交
xmlhttp.send("name=" + userName);  //post需要填写提交的数据




  如上所示,如需将请求发送到服务器,我们使用 XMLHttpRequest对象的 open() 和 send() 方法。

建议:


 1、GET 方式的安全性较Post方式要差些,包含机密信息的话,建议用Post数据提交方式

 2、GET 更简单也更快,在做数据查询时,建议用GET 方式;而在做数据添加、修改或删除时,建议用Post方式

 3、在以下情况中,请使用 POST 请求:无法使用缓存文件(更新服务器上的文件或数据库),向服务器发送大量数据(POST 没有数据量限制),发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠



(五)、在回调函数中判断交互是否结束,响应是否正确,并据需要获取服务器端返回的数据,更新页面内容



xmlhttp.readyState == 4   //状态=4响应数据接收成功

xmlhttp.status==200<span style="white-space:pre">	</span>//服务器返回成功码


例子:

<pre name="code" class="html"><span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<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">
            var xmlhttp;
            function submit(){

                //alert("te st");
                //1.创建XMLHttpRequest对象
                if (window.XMLHttpRequest) {
                    xmlhttp=new XMLHttpRequest();
                    if (xmlhttp.overrideMimeType) {
                        xmlhttp.overrideMimeType("text/xml");
                    }
                }else if (window.ActiveXObject) {
                    var activexName=["MSXML.2.XMLHTTP.6.0","MSXML.2.XMLHTTP.5.0",
                                    "MSXML.2.XMLHTTP.4.0","MSXML.2.XMLHTTP.3.0",
                                    "MSXML.2.XMLHTTP","Miscrosoft.XMLHTTP"];
                    for (var i = 0; i <activexName.length; i++) {
                        try {
                            xmlhttp=new ActiveXObject(activexName[i]);
                        } catch (e) {

                        }
                    }
                }
                if (xmlhttp==undefined || xmlhttp==null) {
                    alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
                    return;
                }
                //alert(xmlhttp);
                
                //2.注册回调方法
                xmlhttp.onreadystatechange=callback;
                
                //固定用法,获取文本框中用户输入的内容
                var userName=document.getElementById("UserName").value;
                //userName=encodeURI(encodeURI(userName));
               // alert(userName);
                /*//3.设置和服务器端交互的相应参数
                xmlhttp.open("GET","Ajax?name=" + userName,true );                      
                //4.设置向服务器端发送的数据,启动和服务器端的交互
                xmlhttp.send(null);*/
        
                //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
                        //var domXml=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="校验用户名"/>
        <div id="message"></div>
    </body>
</html>
</span>




四、常用属性与方法



技术分享



技术分享



五、小结


  XMLHttpRequest是AJAX技术应用中的核心对象,可以让我们的前台在不向服务器提交整个页面的情况下,实现局部的刷新。可以同步或是异步的返回web服务器的响应,返回的数据不限于XML文档,可以是任何形式的文档。大大提高了客户端到Web服务器端的响应效率,提高了用户的体验度。





郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。