五步学会XMLHttpRequest

原创 2013年11月20日 19:31:38

一、XMLHttpRequest的由来

      

       XMLHttpRequest是AJAX的核心技术,通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输,从而实现页面的无刷新效果。                        


二、 XMLHttpRequest对象的五步使用法         

 

1. 创建XMLHttpRequest对象

       

初期由于各个浏览器在实现上有所不同:

       1) IE6及以前的版本,是以ActiveX控件的方式来创建XMLHttpRequest对象。
       2) IE7以后的版本和FireFox,Opera等浏览器则可以直接创建js的XMLHttpRequest对象。

       在使用XMLHttpRequest对象之前需要将XMLHttpRequest对象实例化,因为各个浏览器对实例化过程的实现不同,所以不同浏览器实例化XMLHttpRequest对象的方式也不相同。


       针对IE浏览器(IE6,IE5,IE5.5):


Js代码
<span style="font-size:18px;">var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); </span>



       针对其他的浏览器:


Js代码

<span style="font-size:18px;"> var xmlhttp = new XMLHttpRequest(); </span>



        由于这两种实例化XMLHttpRequest的形式不同,所以在判断浏览器到底采用的是哪种实例化XMLHttpRequest对象,我就要做出判断,代码如下:


Js代码
       <span style="font-size:18px;">  var xmlhttp;
            function submit(){
                //1.创建XMLHttpRequest对象
                if(window.XMLHttpRequest){
                    //IE7,IE8,FireFox,Mozilllar,Safari,Opera
                    //alert("IE7,IE8,FireFox,Mozilllar,Safari,Opera");
                    xmlhttp=new XMLHttpRequest();
                    if(xmlhttp.overrideMimeType){
                          xmlhttp.overrideMimeType("text/xml");
                    }
                }else if(window.ActiveXObject){
                    //IE6.IE5,IE5.5
                   /* var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",
                        "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML.2.XMLHTTP",
                        "Microsoft.XMLHTTP"];*/
                    var activexName=["MSXML.2.XMLHTTP","Microsoft.XMLHTTP"];
                    for (var i = 0; i < activexName.length; i++) {
                        try {
                            xmlhttp=new ActiveXObject(activexName[i]);
                            break;
                        } catch (e) {

                        }
                    }
                }
            if(xmlhttp == undefined || xmlhttp == null){
                alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
                return;
            }</span>

2. 注册回调函数

       

接下来就要指定当服务器返回信息时客户端的处理方式。只需将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性即可,比如:


Js代码
  
<span style="font-size:18px;">xmlHttp.onreadystatechange = callBack; </span>

3. 设置和服务器端交互的参数

       

创建新的HTTP请求,并制定此请求的方法,URL以及验证信息(用户名/密码);设置和服务器端交互的方式有两种:get和post:


Get,js代码
<span style="font-size:18px;">xmlhttp.open("GET","AJAX?name=" +userName,true);</span>

post,js代码

<span style="font-size:18px;">   xmlhttp.open("POST","AJAX",true);
            //POST方式交互所需要增加的代码
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");</span>

4. 设置向服务器端发送的数据,启动和服务器交互

        

向服务器发出HTTP请求,并接受回应。

Get,js代码

   

  xmlhttp.send(null);


post,js代码

 xmlhttp.send("name=" + userName);


5. 处理服务器返回的信息

        

此时,我们需要在回调函数中,判断和服务器的交互是否完成,还要判断服务器端是否正确的返回了数据,并根据需要获取服务器返回的数据,更新页面内容。


Js代码

 function callBack(){
            array.push(xmlhttp.readyState);
            //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;
                    //alert(xmlhttp.responseXML.documentElement);
                    //判断返回的xml数据是否正确
                    /*
                     var rootElement =xmlhttp.responseXML.documentElement;
                     if(rootElement == null || rootElement.nodeName !=""){
                     }else{
                     //数据正确返回,可以进行相关处理
                     }
                     */
                }
            }
        }

三、 XMLHttpRequest对象的属性和方法

      

XMLHttpRequest对象的常用属性:


         onreadystatechange:指定当readyState属性值改变时的事件处理句柄;
         readyState:返回当前请求的状态;
         responseText:将相应信息作为字符串返回;

XMLHttpRequest对象的常用方法:

         open():创建一个新的HTTP请求,并制定此请求的方法,URL以及验证信息(用户名/密码);

         send():发送请求到HTTP服务器并接受回应。


四、 XMLHttpRequest五步使用注意事项

            

          1、不同浏览器中XMLHttpRequest对象建立的方式不同

          2、设置回调函数时,不要在函数名后面加 括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。

          3、open方法最多可以有五个参数,其中头三个参数是必须的。并注意GET方式和POST方式在设置send方式的参数不同。

          4、回调函数中,最好判断readyState和status的两个if条件,分开来写。readyState的判断条件位于外层,status位于内层。

          5、当服务器没有正确返回XML数据时,在js中使用responseXML的方式获取返回的xml数据对应得DOM对象时,FireFox和IE的结果是有差别的。


下面是本示例的完整代码:

    

 <script type="text/javascript">
            var xmlhttp;
            function submit(){
                //1.创建XMLHttpRequest对象
                if(window.XMLHttpRequest){
                    //IE7,IE8,FireFox,Mozilllar,Safari,Opera
                    //alert("IE7,IE8,FireFox,Mozilllar,Safari,Opera");
                    xmlhttp=new XMLHttpRequest();
                    if(xmlhttp.overrideMimeType){
                          xmlhttp.overrideMimeType("text/xml");
                    }
                }else if(window.ActiveXObject){
                    //IE6.IE5,IE5.5
                    //alert("IE6.IE5,IE5.5");
                   /* var activexName=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",
                        "MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML.2.XMLHTTP",
                        "Microsoft.XMLHTTP"];*/
                    var activexName=["MSXML.2.XMLHTTP","Microsoft.XMLHTTP"];
                    for (var i = 0; i < activexName.length; i++) {
                        try {
                            xmlhttp=new ActiveXObject(activexName[i]);
                            break;
                        } catch (e) {

                        }
                    }
                }
            if(xmlhttp == undefined || xmlhttp == null){
                alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
                return;
            }
            //2.注册回调方法
            xmlhttp.onreadystatechange=callBack;
            //错误的写法,加括号说明将返回值给了onreadystatechange,从服务器端返回的数据
            //不能执行数据解析和更新的操作
            // xmlhttp.onreadystatechange=callback();
            // 记忆一个固定用法,获取文本框中用户输入的内容
            var userName=document.getElementById("UserName").value;
            userName=encodeURI(encodeURI(userName));
            }
            //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
                    //var domXml=xmlhttp.responseXML;
                    
                    //记忆向div标签中填充文本内容的方法
                    var div =document.getElementById("message");
                    div.innerHTML=message;
                    //alert(xmlhttp.responseXML.documentElement);
                    //判断返回的xml数据是否正确
                    
                     var rootElement =xmlhttp.responseXML.documentElement;
                     if(rootElement == null || rootElement.nodeName !=""){
                     }else{
                     //数据正确返回,可以进行相关处理
                     }
                     
                }
            }
        }
       
        </script>



版权声明:本文为博主原创文章,未经博主允许不得转载。

SSH+Ajax(XMLHttpRequest实现)涉及json

后台为SSH,前台用纯JS实现Ajax(XMLHttpRequest方式) 目的:点击

【AJAX】XmlHttpRequest对象详解(API)

翻译:《javascript : The Definitive Guide, 5th Edition》 英文:《异步交互(二)》 一、XMLHttpRequest对象获取         对象获取...

一些XMLHttpRequest的例子代码

以下例子摘录自:javascript权威指南 //异步请求(事件监听请求是否返回) function getText(url,callback){ var request = new XML...

js

在b/s开发中经常用到的javaScript技术一、验证类1、数字验证内  1.1 整数  1.2 大于0的整数 (用于传来的ID的验证)  1.3 负整数的验证  1.4 整数不能大于iMax  1...

JSON详解

原文地址: http://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html 内容部分有删选。 阅读目录 JSON的两种结构认识JSO...
  • aerchi
  • aerchi
  • 2016年06月16日 16:36
  • 720

XMLHttpRequest 五步学会

一、XMLHttpRequest的由来               XMLHttpRequest是AJAX的核心技术,通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进...

Ajax核心对象 XMLHTTPRequest 五步学会使用

首先还是先了解Ajax AJAX = Asynchronous JavaScript andXML(异步的 JavaScript 和 XML)。通过在后台与服务器进行少量数据交换,AJAX 可以使网...
  • akkzhjj
  • akkzhjj
  • 2013年12月19日 20:05
  • 8973

XMLHttpRequest五步学习法

XMLHttpRequest五部曲   在上一篇博客中主要讲了一下AJAX的基础知识,对AJAX进行了一下简单的讲解。既然XMLHttpRequest对象是AJAX的核心技术,那么这篇博客将学习如何使...

AJAX入门---五步使用XMLHttpRequest对象

XMLHttpRequest简介:          XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页。当页面全部加载完毕后,客户端通过该对象向服务器请求数据,...
  • god_7z1
  • god_7z1
  • 2014年08月07日 02:05
  • 428

Ajax学习(三)——XMLHttpRequest对象的五步使用法

Ajax的核心技术是XMLHttpRequest对象,它可以在不向服务器提交整个页面的情况下,实现局部更新网页。当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后向客户端...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:五步学会XMLHttpRequest
举报原因:
原因补充:

(最多只允许输入30个字)