Ajax学习(三)——XMLHttpRequest对象的五步使使用方法-阿里云开发者社区

开发者社区> 技术mix呢> 正文

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

简介:
+关注继续查看

   Ajax的核心技术是XMLHttpRequest对象,它能够在不向server提交整个页面的情况下。实现局部更新网页。通过这个对象,Ajax能够像桌面应用程序那样仅仅与server进行数据层的交换,而不必每次都刷新界面。也不必每次将数据处理的工作都交给server来做。

这样既减轻了server负担又提高了响应速度。还缩短了用户的等待时间。通常一个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对象已经获得了要将数据发送到哪个server上、以什么方式发送等信息;
2:发送状态。XMLHttpRequest開始发送数据;
3:数据传送状态,此时XMLHttpRequest正在接受从server端返回的数据,可是数据还没有传送完成;
4:完毕状态:此时XMLHttpRequest对象已经将从server端返回的数据接受完毕。


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

设置回调函数时,不要在函数名后而加括号。

加括号表示将回调函数的返回值注冊给onreadystatechange属性。


3.使用open方法设置和server端交互的基本信息。

 //创建http请求
                xmlHttp.open("get","userName.txt", true);
XMLHttpRequest的open(method,URL,flag,name,password)方法用来初始化对象,后三个參数是可选的。
method:指定用什么方式向server发送http请求,參数值能够是get,post。head,put和delete五种。
URL:指定server的URL,也就是用户处理和返回数据的程序的URL。该URL能够是绝对地址,也能够是相对地址。
flag:指定提交http请求的方式,true指异步方式,为默认值;false指同步方式。
name和password:假设server须要验证,这两个參数用来提交username与password。

4.设置发送的数据。開始和server端交互。

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

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


5.在回调函数中推断交互是否结束,响应是否正确,并依据须要获取server端返回的数据,更新页面内容。

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

if (xmlHttp.readyState==4)//异步调用完毕
{
      if (xmlHttp.status==200 || xmlHttp.status==0)//异步调用成功||在本机上调试
      {                    
       }
}
readyState属性值为4,说明异步调用完毕。但并不代表异步调用运行成功。

XMLHttpRequest的status属性能够获得从server返回的状态码。0代表不能理解的http状态。通常仅仅有在本地计算机打开文件时才会返回。比較经常使用的http状态码有下面三个:

200:server成功返回网页。

404:client请求的网页不存在。

503:server响应超时。


2)获得server返回的数据:

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

异步调用的终于目的是接收从server返回的数据,并依据该数据决定怎样显示在client网页中。异步调用成功后。XMLHttpRequest对象通过使用下面4个属性来获得server返回的数据。

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

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>

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

   

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






本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5179811.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
PHP操作XML文件学习笔记
原文:PHP操作XML文件学习笔记   XML文件属于标签语言,可以通过自定义标签存储数据,其主要作用也是作为存储数据。   对于XML的操作包括遍历,生成,修改,删除等其他类似的操作。PHP对于XML的操作方式很多,这次学习的是通过DOMDocument进行操作,其他的操作方法可以参考   http://www.oschina.net/code/snippet_110138_4727   1.对XML文件的遍历     通过DOMDocument对于XML文件的操作的方法:首先要实例化一个DOMDocument类的对象,然后引入要操作的XML文件。
800 0
DevExpress学习03——label控件的背景色问题
今天使用了DevExpress的labelControl,发现拖放上去,其背景色和主窗体的背景一样,非常不谐调,把BackColor设置为透明也不行(Windows中的Label可以)。 没有办法,我用颜色拾取器,拾取到上方面板颜色是RGB(80,80,80),于是将labelControl背景色改为RGB(80,80,80)颜色就统一了。
959 0
DevExpress学习02——DevExpress 14.1的汉化
汉化资源: 汉化补丁:dxKB_A421_DXperience_v14.1_(2014-06-09):http://www.t00y.com/file/86576990 汉化工具:DXperienceUniversal-14.
1193 0
通过搭建wordpress博客来学习云服务器的详细使用方法
云服务器越来越普及,很多企业及个人都纷纷上云,从传统的虚拟主机或者托管服务器上把网站和应用迁移到腾讯云、阿里云、百度云等这些云服务器上。 云服务器相比传统服务器的优势有很多,比如安全性、性价比、稳定性、可用性、便捷性等等各方面,大家可以百度自己了解,我就不在这里多说了。
1789 0
jdom学习读取XML文件
用JDOM读取XML文件需先用org.jdom.input.SAXBuilder对象的build()方法创建Document对象,然后用Document类、Element类等的方法读取所需的内容。IBM : developerWorks 中国站上有一个很好的例子:            ...
579 0
关于 OpenGL 中平移矩阵变换与实体对象坐标平移的关系分析结论
关于 OpenGL 中平移矩阵变换与实体对象坐标平移的关系分析结论 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
638 0
XMLHttpRequest对象的属性
XMLHttpRequest对象提供了许多属性、方法和事件,因此Ajax脚本可以处理和控制Http请求和响应。
539 0
+关注
2969
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载