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

    Ajax的核心技术是XMLHttpRequest对象,它可以在不向服务器提交整个页面的情况下,实现局部更新网页。通过这个对象,Ajax可以像桌面应用程序那样只与服务器进行数据层的交换,而不必每次都刷新界面,也不必每次将数据处理的工作都交给服务器来做。这样既减轻了服务器负担又提高了响应速度,还缩短了用户的等待时间。通常一个Ajax的实现过程有五步,下面我们以上篇博客中的小实例为例来逐步学习。

1.建立XMLHttpRequest对象。

IE浏览器将XMLHttpRequest实现为一个ActiveX对象,其他浏览器如Firefox,Opera,Netscape等将其实现为一个本地javascript对象,IE7.0及以上版本这两种创建方式都支持

 //定义用户存储XMLHttpRequest对象的变量
        var xmlHttp = null;
        //创建XMLHttpRequest对象
        function creatXMLHTTP()
        {
            //判断浏览器是否支持ActiveX控件,针对IE6及之前版本
            if (window.ActiveXObject)
            {
                //将所有可能出现的ActiveXObject版本都放在一个数组中
                var arrXmlHttpTypes = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
                //通过循环创建XMLHttpRequest对象
                for (var i=0;i<arrXmlHttpTypes.length;i++)
                {
                    try
                    {
                        //创建XMLHttpRequest对象
                        xmlHttp = new ActiveXObject(arrXmlHttpTypes[i]);
                        //如果创建XMLHttpRequest对象成功,则跳出循环
                        break;
                    }
                    catch(ex)
                    {
                        //如果创建不成功,则从数组中取出下一个版本继续创建
                    }
                }
            }
            //判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7及以上,Firefox,Opera等浏览器
            else if(window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }
        }

  //创建XMLHttpRequest对象,调用前面定义好的函数
            creatXMLHTTP();

            if (xmlHttp!=null)
            {
                //创建响应XMLHttpRequest对象状态变化的函数
               
                //创建http请求
               
                //发送http请求
                
            }
            else
            {
                alert("您的浏览器不支持XMLHTTP");
            }
2.注册回调函数。
   //创建响应XMLHttpRequest对象状态变化的函数
                xmlHttp.onreadystatechange = httpStateChange;
在异步调用时,XMLHttpRequest对象有几个不同的状态,这些状态表示了异步调用的过程。
0:未初始化状态,刚创建完一个XMLHttpRequest对象;
1:初始化状态,即XMLHttpRequest对象已经获得了要将数据发送到哪个服务器上、以什么方式发送等信息;
2:发送状态,XMLHttpRequest开始发送数据;
3:数据传送状态,此时XMLHttpRequest正在接受从服务器端返回的数据,但是数据还没有传送完毕;
4:完成状态:此时XMLHttpRequest对象已经将从服务器端返回的数据接受完毕。

使用XMLHttpRequest对象的onreadystatechange属性,可以设置响应XMLHttpRequest对象状态变化的函数。

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

3.使用open方法设置和服务器端交互的基本信息。
 //创建http请求
                xmlHttp.open("get","userName.txt", true);
XMLHttpRequest的open(method,URL,flag,name,password)方法用来初始化对象,后三个参数是可选的。
method:指定用什么方式向服务器发送http请求,参数值可以是get,post,head,put和delete五种。
URL:指定服务器的URL,也就是用户处理和返回数据的程序的URL。该URL可以是绝对地址,也可以是相对地址。
flag:指定提交http请求的方式,true指异步方式,为默认值;false指同步方式。
name和password:如果服务器需要验证,这两个参数用来提交用户名和密码。

4.设置发送的数据,开始和服务器端交互。

  //发送http请求
                xmlHttp.send(null);

发送http请求使用XMLHttpRequest的send(data)方法,data参数就是传递给open()方法中URL参数所指定的文件的参数。若果要传递多个参数,用"&"来分隔,不需要传递参数写"null"。


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

1)判断异步调用是否成功:

if (xmlHttp.readyState==4)//异步调用完毕
{
      if (xmlHttp.status==200 || xmlHttp.status==0)//异步调用成功||在本机上调试
      {                    
       }
}
readyState属性值为4,说明异步调用完成,但并不代表异步调用执行成功。XMLHttpRequest的status属性可以获得从服务器返回的状态码。0代表不能理解的http状态,通常只有在本地计算机打开文件时才会返回。比较常用的http状态码有以下三个:

200:服务器成功返回网页。

404:客户端请求的网页不存在。

503:服务器响应超时。


2)获得服务器返回的数据:

<span style="font-family:SimSun;font-size:18px;"><strong> var userNames = xmlHttp.responseText;</strong></span>

异步调用的最终目的是接收从服务器返回的数据,并根据该数据决定如何显示在客户端网页中。异步调用成功后,XMLHttpRequest对象通过使用以下4个属性来获得服务器返回的数据。

responseText:表示将服务器返回的数据以字符串形式返回。

responseXML:表示以XML的形式返回。

responseBody:表示以unsigned byte数组的形式返回。

responseStream:表示以IStream对象的形式返回。


3)局部更新:

<span style="font-family:SimSun;font-size:18px;"><strong>//查找用于显示提示信息的节点
var node = document.getElementById("myDiv");
//更新数据                   
node.firstChild.nodeValue = text;</strong></span>

获取服务器返回的数据之后就要显示出来。Ajax通过DOM来完成局部更新数据。

   

    在Ajax编程中离不开对XMLHttpRequest对象的使用,每次使用都是做这五步工作。面对重复的事情我们就要想办法了。由于这项编程步骤比较固定现在已经被封装好了,从而使代码重用,简化编程。但是想要成为一名优秀的程序员,还是有必要了解一下这五个步骤。






©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值