Ajax学习(三)——XMLHttpRequest对象的五步使使用方法
2016-02-03 15:30
543 查看
Ajax的核心技术是XMLHttpRequest对象,它能够在不向server提交整个页面的情况下。实现局部更新网页。通过这个对象,Ajax能够像桌面应用程序那样仅仅与server进行数据层的交换,而不必每次都刷新界面。也不必每次将数据处理的工作都交给server来做。这样既减轻了server负担又提高了响应速度。还缩短了用户的等待时间。通常一个Ajax的实现过程有五步,以下我们以上篇博客中的小实例为例来逐步学习。
IE浏览器将XMLHttpRequest实现为一个ActiveX对象,其它浏览器如Firefox。Opera,Netscape等将事实上现为一个本地javascript对象。IE7.0及以上版本号这两种创建方式都支持。
method:指定用什么方式向server发送http请求,參数值能够是get,post。head,put和delete五种。
URL:指定server的URL,也就是用户处理和返回数据的程序的URL。该URL能够是绝对地址,也能够是相对地址。
flag:指定提交http请求的方式,true指异步方式,为默认值;false指同步方式。
name和password:假设server须要验证,这两个參数用来提交username与password。4.设置发送的数据。開始和server端交互。
异步调用的终于目的是接收从server返回的数据,并依据该数据决定怎样显示在client网页中。异步调用成功后。XMLHttpRequest对象通过使用下面4个属性来获得server返回的数据。responseText:表示将server返回的数据以字符串形式返回。responseXML:表示以XML的形式返回。responseBody:表示以unsigned byte数组的形式返回。responseStream:表示以IStream对象的形式返回。3)局部更新:
获取server返回的数据之后就要显示出来。Ajax通过DOM来完毕局部更新数据。 在Ajax编程中离不开对XMLHttpRequest对象的使用,每次使用都是做这五步工作。面对反复的事情我们就要想办法了。因为这项编程步骤比較固定如今已经被封装好了。从而使代码重用,简化编程。可是想要成为一名优秀的程序猿,还是有必要了解一下这五个步骤。
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属性。[/code]
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对象的使用,每次使用都是做这五步工作。面对反复的事情我们就要想办法了。因为这项编程步骤比較固定如今已经被封装好了。从而使代码重用,简化编程。可是想要成为一名优秀的程序猿,还是有必要了解一下这五个步骤。
相关文章推荐
- 转载:Adb远程连接Android系统(通过网络使用ADB(Connect to android with wifi))
- TCP协议的三次握手+四次断开
- TCP/IP、Http、Socket的区别
- WCF调用时提示错误 "已尝试创建到达不支持 .Net 框架的服务的通道。可能遇到 HTTP 终结点"
- 如何看当前本机的网络流量
- 快速Android开发系列网络篇之Retrofit
- Android 网络框架学习之Retrofit
- (25)HttpClient session
- (24)如何使用HttpClient
- Java Socket实现HTTP客户端来理解Session和Cookie的区别和联系
- 设置虚拟机hostonly网络上网
- vmware虚拟机安装CENTOS系统使用NAT连接网络方法
- HTTPS详解SSL/TLS
- HttpUtil 工具类
- angularJS $http $q $promise
- 打印HttpServletRequest
- 网络相关知识
- iOS 原生网络请求写法
- 网络编程基础总结
- 网络请求 cookie的添加