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");
}
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)方法用来初始化对象,后三个參数是可选的。
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对象的使用,每次使用都是做这五步工作。面对反复的事情我们就要想办法了。因为这项编程步骤比較固定如今已经被封装好了。从而使代码重用,简化编程。可是想要成为一名优秀的程序猿,还是有必要了解一下这五个步骤。
Ajax学习(三)——XMLHttpRequest对象的五步使使用方法的更多相关文章
- AJAX--XMLHttpRequest五步使使用方法
传统浏览方式和AJAX方式的不同 多数Web应用程序都使用请求/响应模型从server上获得完整的HTML页面.经常是点击一个button,等待server对应,在点击还有一个button.然后在等待 ...
- Ajax技术---核心XMLHttpRequest对象
Ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. (一)ajax技术的意义 我 ...
- Ajax中的XMLHttpRequest对象详解
XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...
- ajax原理和XmlHttpRequest对象
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得请求数据.要清楚这 ...
- Ajax中的XMLHttpRequest对象详解(转)
XMLHttpRequest对象是Ajax技术的核心.在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引入,被称之为XMLHTTP,它是一种支持异步请求 ...
- AJAX原理及XMLHttpRequest对象分析
今天的主题是前端都了解的AJAX,但其中都有哪些知识点,还需要深入分析. 首先揭示AJAX的字面意思,Asynchronous Javascript And XML,通俗点就是“异步Javascrip ...
- $.ajax通用格式&&XMLHttpRequest对象属性和方法
$.ajax({ url: "", type: "POST", async: false, cache:false, //默认true data: {}, da ...
- AJAX的核心XMLHttpRequest对象
为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,jQuery,Css...)重新融合程一个新的知识框架.而XMLHttpRequest对象则是其中的重 ...
- Ajax异步请求XMLHttpRequest对象Get请求
$(function () { $("#btnGetDate").click(function () { var xhr; //第一步:创建异步请求的核心的对象: if (XMLH ...
随机推荐
- superMap Object 属性查看的一点代码
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- js 去除字符串左右两端的空格
<script type="text/javascript"> function trim(str){ //删除左右两端的空格 return str.repl ...
- Java学习之equals和hashcode的关系
两个对象值相同(x.equals(y) == true),但却可有不同的hash code,这句话对不对? 答:不对,如果两个对象x和y满足x.equals(y) == true,它们的哈希码(has ...
- thinkphp phpexcel导出
近期做一个项目涉及到商品信息的批量导出与导入,遂记录了下来,框架是tp框架3.2.3(tp5.0性质是一样的,无非是加载方法与所放目录不一样罢了),运用的是phpexcel,闲话不多说,上代码 1.首 ...
- IOS 表视图(UITableVIew)的使用方法(8)表视图的编辑功能(多选)
在表视图的删除操作中,每次只能够对其中一个单元进行删除,如果想要同时删除多条记录,不得不挨个地进行标准的删除操作 所以如果能够实现多选的机制,无论是删除还是其他功能的嫁接,都会变得更加方便 当UITa ...
- 射频识别技术漫谈(14)——Mifare S50与S70的存取控制
存取控制指符合什么条件才能对卡片进行操作. S50和S70的块分为数据块和控制块,对数据块的操作有“读”.“写”.“加值”.“减值(含传输和存储)”四种,对控制块的操作只有“读”和“写”两种. S50 ...
- HDU 1851 A Simple Game
典型的尼姆博弈,在n对石子中,告诉你每堆的数目和每次从该堆最多可以取的数目,求最终谁将其取完. 题解:SG(i)=mi%(li+1),求异或值即可. #include <cstdio> i ...
- 转载Spring IntrospectorCleanupListener
"在服务器运行过程中,Spring不停的运行的计划任务和OpenSessionInViewFilter,使得Tomcat反复加载对象而产生框架并用时可能产生的内存泄漏,则使用Introspe ...
- javascript 字符串方法传参
javascript 字符串方法传参由于嵌套的单引号,双引号过多.有点混乱.. 正确方法如下: ' <td align="left"><input type= ...
- 利用copy函数简单快速输出/保存vector向量容器中的数据
如果要输出vector中的数据我们可以通过循环语句输出,更加简便的方法是利用copy函数直接输出,例子: #include "stdafx.h" #include <iost ...