1.传统网页与AJAX工作的模式对比如下:
与传统的WEB应用不同,Ajax技术采用异步方式发送请求,避免了每个请求对应一个页面的模式,允许在一个页面发送多个请求,从而可以更大程度地利用已经下载的页面,服务器每次响应生成的只是必需的数据,无需响应整个页面。对用户而言,发送异步请求不会阻塞当前的浏览器线程,浏览器可以继续下一步操作:比如继续浏览或再次发送异步请求。因此用户将不会处于等待状态,而是感觉自己一直与应用处于交互状态,从而带给用户连续的体验。
Ajax应用通过在用户和服务器之间引入一个媒介(Ajax engine)来异步发送请求,消除了传统的发送请求-等待-发送请求-等待的特性,极大的提高了用户体验。
2.XMLHttpRequest对象介绍及创建
1999年上半年,MicroSoft在IE5.0中首次使用了一种新技术,通过使用这种新技术,浏览者不用从当前Web页面跳转,或者使用表单提交来发送请求,而是可以直接在当前页面中发送请求到服务器,也可以从服务器读取数据。他们的这种技术的实现依赖于一个特殊的ActiveX对象,这个对象就是XMLHttp。随后MicroSoft发布了XMLHttp的ActiveX对象,让开发者也能异步与服务器交互。XMLHttp对象一经发布大受欢迎,到了2000年几乎成了事实上的标准。Mozilla在这一年实现了具有相同接口的原生对象,称为XMLHttpRequest对象。后来Opera、Safari等浏览器也都相继实现了XMLHttpRequest对象。于是XMLHttpRequest成了这个技术的正式名称。
XMLHttpRequest对象是整个Ajax技术的核心,缺少了它,Ajax的其余技术就无法成为一个有机的整体。Ajax技术赖以生存的核心就是:异步发送请求。
XMLHttpRequest用于在后台与服务器交换数据,是AJAX之所以能对网页进行局部刷新的核心,同时Ajax技术离开了XMLHttpRequest对象将失去与服务器异步通信的能力。
3.XMLHttpRequest对象创建
XMLHttpRequest对象是通过JavaScript创建的,代码如下:
var xmlhttp=null;
if(window.XMLHttpRequest)
{
//IE7+,Firefox,Chrome,Safari,Opera
xmlhttp=new XMLHttpRequest();
}
else
{
//IE5,IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
从上述代码中可以看到:不同的浏览器创建XMLHttpRequest对象使用的语句是不同的。为了在不同的浏览器下都能成功创建XMLHttpRequest对象,需要讨论各种情形。
3.XMLHttpRequest对象方法与属性
方法 |
描述 |
open(method,url,[async],[username],[password])
|
规定请求的类型、URL 以及是否异步处理请求。
-
method:请求的类型;GET 或 POST(特别说明的是:仍要特别注意两种请求类型下的参数汉字乱码的问题)
-
url:要访问的文件的URL
url - 服务器上的文件
url - 服务器上的文件 open() 方法的 url 参数是服务器上文件的地址: xmlhttp.open("GET","ajax_test.asp",true); 该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和.php (在传回响应之前,能够在服务器上执行任务)。
-
async:true(异步)或 false(同步)。该参数是可选的,默认为 true。异步优点在等待服务器响应时执行其他脚本;当响应就绪后对响应进行处理
- username:如果需要身份验证,则可以在此指定用户名。该参数没有默认值。
- password:如果需要身份验证,则可以在此指定口令。该参数没有默认值。
说明:通常使用其中的前三个参数。事实上,即使需要异步连接,通常指定第三个参数为 “true”,这样更容易理解。 |
send([string])
|
将要发送的内容发送到服务器。
|
setRequestHeader(header,value)
|
向请求添加 HTTP 头。
-
header: 规定头的名称
-
value: 规定头的值
如果在open方法中使用的method是“POST”,则要通过以下语句设置请求头:
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded"); |
|
|
上面注意的一些问题
GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
POST 请求示例:
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
GET 请求
GET 请求示例:
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
在上面的例子中,您可能得到的是缓存的结果。
为了避免这种情况,请向 URL 添加一个唯一的 ID:
xmlhttp.open("GET","demo_get.asp?t=" + Math.random()
,true);
xmlhttp.send();
如果您希望通过 GET 方法发送信息,请向 URL 添加信息:
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
异步 - True 或 False?
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:
xmlhttp.open("GET","ajax_test.asp",true
);
对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。
通过 AJAX,JavaScript 无需等待服务器的响应,而是:
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
Async = true
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
Async = false
如需使用 async=false,请将 open() 方法中的第三个参数改为 false:
xmlhttp.open("GET","test1.txt",false);
我们不推荐使用 async=false,但是对于一些小型的请求,也是可以的。
请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。
注释:当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
属性 |
描述 |
readyState |
提供当前 HTML 的就绪状态,它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在Ajax应用程序中需要了解五种就绪状态:
0:请求没有发出(在调用 open() 之前)
1:请求已经建立但还没有发出(调用 send() 之前)
2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)
3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应
4:响应已完成,可以访问服务器响应并使用它。
对于Ajax编程,需要直接处理的唯一状态就是就绪状态4,它表示服务器响应已经完成,可以安全地使用响应数据了。 |
status |
服务器响应的状态代码。服务器响应完成后(readyState=4),从完成的响应信息中可获得状态代码。比如:
输入了错误的URL请求将得到404错误码,它表示该页面不存在;
403和401错误码表示所访问的数据受到保护或者禁止访问;
200状态码表示一切顺利。
因此,如果状态码是200而且就绪状态是4,就可以处理服务器的数据了,而且
这些数据应该就是要求的数据(而不是错误或者其他有问题的信息)。 |
onreadystatechange |
用于指定XMLHttpRequest对象的状态改变函数(类似于按钮对象的onclick属性),当XMLHttpRequest对象状态(readyState的值)改变时,该函数将被触发,该函数也称回调函数。
假设回调函数为callback,则它的代码通常为:
function callback(){ if (httpRequest.readyState == 4) { if (httpRequest.status == 200) {事件响应代码} }
} 注释:onreadystatechange
事件被触发 5 次(0 - 4),对应着 readyState 的每个变化。 当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
|
①responseText
②responseXML |
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
①服务器返回的请求响应文本。
②服务器端返回的XML类型的响应。这种情形下,服务器端的响应类型为xml,通过如下代码设置:response.setContentType("text/xml;charset=UTF-8");
|
返回XML时的处理
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
4.AJAX运行流程
整个Ajax技术紧紧围绕在XMLHttpRequest对象周围
(1)创建XMLHttpRequest对象,XMLHttpRequest对象的作用如同名字所暗示的,允许通过客户端脚本来发送HTTP请求。
(2)XMLHttpRequest打开连接并发送数据
服务器端响应处理阶段
(3)XMLHttpRequest获得服务器端响应状态。XMLHttpRequest对象也是一个普通的JavaScript对象,如一个普通按钮或一个普通文本框一样,可以触发事件;而XMLHttpRequest触发的事件就是onreadystatechange,当XMLHttpRequest对象的状态改变时,将触发它。为XMLHttpRequest对象的onreadystatechange事件指定事件处理函数,该函数将在XMLHttpRequest状态改变时被执行,这个事件处理函数也叫回调函数(XMLHttpRequest状态改变,且readyState=4&&status=200时,表明服务器响应已经完成且是正确的响应状态,此时可以开始处理服务器响应)
(4)客户端处理函数执行。进入事件处理函数后,XMLHttpRequest依然不可或缺,事件处理函数借助于XMLHttpRequest的responseText或responseXML属性获取服务器的响应,至此XMLHttpRequest运行周期结束;JavaScript通过DOM操作将响应动态加载到XHMTL页面中。
整个过程,从发送HTTP请求到监控服务器的响应状态,到获取响应数据,XMLHttpRequest一直是Ajax技术的灵魂。
分享到:
相关推荐
Ajax深度剖析,XMLHttpRequest对象大揭秘
经测试,用此方法创建XMLHttpRequest对象,在运用AJAX的时候,可以的兼容IE6,IE7,IE8,Opera,Safari,Google Chrome,fireFox。主流的应该就这些吧?theWorld,遨游等浏览器都是以IE为核心的,所以肯定也没问题。 另外...
全面剖析Ajax XMLHttpRequest对象
Ajax核心对象XMLHTTPRequest详细参数及例子
全面剖析Ajax的XMLHttpRequest对象.doc
[王兴魁]AJAX核心技术1-XMLHttpRequest对象的使用
VS2008 AJAX控件介绍 AJAX组成及XMLHttpRequest对象的讲解
ajax XMLHttpRequest。。。。。。
Ajax 简单实例 XMLHttpRequest对象的创建,请求,发送,仅供初学者
asp.net ajax操作xmlHttpRequest对象返回的ResponseXML和ResponseText例子
WEB开发 之 AJAX - 创建 XMLHttpRequest 对象.docx
xmlHttpRequest用法示例其中包括普通用法,与返回xml的用法,注释详细,代码清晰。
AJAX入门之XMLHttpRequest慨述 在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准,所以可以采用多种方法使用JavaScript来...
AJAX中的"A"代表了"异步",这意味着 XMLHttpRequest对象的send()方法可以立即返回,从而让Web页面上的其它HTML/JavaScript继续其浏览器端处理而由服务器处理HTTP请求并发送响应。
2. 掌握XMLHttpRequest对象的常用方法和属性; 3. 学会使用Ajax同步/异步请求文本数据(字符串); 4. 掌握XML的编写规范,能够编写XML文件; 5. 学会使用Ajax同步/异步请求XML数据。 6. 掌握JSON的编写规范,能够...
详细讲述了前端Ajax通信相关的XMLHttpRquest对象的各种属性与方法
主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的Ajax开发工具、使用JsUnit测试JavaScript、分析JavaScript调试工具和技术,以及 Ajax开发模式和框架等。本书中的所有例子的代码都...
AjaxXMLHttpRequest_Demo02.zip
[王兴魁]AJAX核心技术2-XMLHttpRequest对象的扩展问题
第16章 XMLHTTPRequest对象.ppt 第17章 发送请求并处理响应.ppt 第18章 AJAX实际应用.ppt 第19章 PHP+AJAX留言簿程序.ppt 第20章 PHP+AJAX聊天室程序.ppt 第21章 用PHP+Ajax制作论坛.ppt