AJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用.
它包括:
使用XHTML和CSS标准化呈现;
使用DOM实现动态显示和交互;
使用XML和XSLT进行数据交换与处理;
使用XMLHttpRequest进行异步数据读取;
最后用JavaScript绑定和处理所有数据。
在这里我只向谈点XMLHttpRequest对象:
在上面看到,使用XMLHttpRequest进行异步数据读取;
首先,我们要创建该对象,针对不同的浏览器,该对象的创建方法是有区别.
Internet Explorer以ActiveX对象引入,被称为XMLHTTP.
对于Internet Explorer浏览器,创建XMLHttpRequest 方法如下:
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
在不同Internet Explorer浏览器中XMLHTTP版本可能不一致,为了更好的兼容不同版本的Internet Explorer浏览器,因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类,上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。
对于Mozilla?Netscape?Safari等浏览器,创建XMLHttpRequest 方法如下:
xmlhttp_request = new XMLHttpRequest();
如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作。 为了解决这个问题,如果服务器响应的header不是text/xml,可以调用其它方法修改该header。
xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');
在实际应用中,为了兼容多种不同版本的浏览器,一般将创建XMLHttpRequest类的方法写成如下形式:
try{
if( window.ActiveXObject ){
for( var i = 5; i; i-- ){
try{
if( i == 2 ){
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
}else{
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
}
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Content-Type","gb2312");
break;
}
catch(e){
xmlhttp_request = false;
}
}
}else if( window.XMLHttpRequest ){
xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType) {
xmlhttp_request.overrideMimeType('text/xml');
}
}
}catch(e){ xmlhttp_request = false; }
在定义了如何处理响应后,就要发送请求了。可以调用HTTP请求类的open()和send()方法,如下所示:
xmlhttp_request.open('GET', URL, true); xmlhttp_request.send(null);
open()的第一个参数是HTTP请求方式?GET,POST或任何服务器所支持的您想调用的方式。 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求。
第二个参数是请求页面的URL。
第三个参数设置请求是否为异步模式。如果是TRUE,JavaScript函数将继续执行,而不等待服务器响应。这就是"AJAX"中的"A"。
用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后,接下来要决定当收到服务器的响应后,需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这 个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所 示:xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript创建的函数名,注意不要写成FunctionName(),当然我们也可以直接将JavaScript代码创建在onreadystatechange之后,例如:
xmlhttp_request.onreadystatechange = function(){
// JavaScript代码段
};
在这个函数中。首先要检查请求的状态。只有当一个完整的服务器响应已经收到了,函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。
readyState的取值如下:
0 (未初始化)
1 (正在装载)
2 (装载完毕)
3 (交互中)
4 (完成)
所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。具体代码如下:
if (http_request.readyState == 4) {
// 收到完整的服务器响应
} else {
// 没有收到完整的服务器响应
}
当readyState=4时,一个完整的服务器响应已经收到了,接着,函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时,表示状态正常。
在检查完请求的状态值和响应的HTTP状态值后,就可以处理从服务器得到的数据了。有两种方式可以得到这些数据:(1) 以文本字符串的方式返回服务器的响应.
2006/01/19 XMLHttpRequest详解
/*
*author Jouy.lu
*/
var xmlHttp; //首先定义一个全局域变量来保存对象的引用;
function createXMLHttpRequest(){ //该方法用来创建XMLHttpRequest对象的实例.
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
}
考虑到兼容浏览器的问题:建议的写法如下:
var xmlhttp;
function createXmlhttp(){
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if(!xmlhttp){
window.alert("Your broswer not support XMLHttpRequest!");
}
return xmlhttp;
}
/************************************XMLHttpRequest的标准操作*********************
abort():终止当前请求;
getAllResponseHeaders():把HTTP所以响应首部作为键/值对返回;
getResponseHeader("header");返回指定首部的串值;
open("POST/GET/PUT","url");建立对服务器的调用,url参数可以是相对URL或绝对URL,该方法还包含了另三个可选参数;
send(content);向服务器发送请求;
setRequestHeader("header","value");把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。
注:
void open(string method, string url, boolean asynch, string username, string password):这个方法会建立对服务器的调用。
要
提供调用的特定方法(GET、POST或PUT),还要提供所调用资源的URL。另外还可以传递一个Boolean值,指示这个调用是异步还是同步
的,默认值为true,这表示请求本质上是异步的。如果这个参数为false,处理就会等待,直到从服务器返回响应为止。由于异步调用是使用
Ajax的主要优点之一,所以倘若将这个参数设置为false,从某种程度上讲与使用XMLHttpRequest对象的初衷不太相符。在某些情况下
这,个参数设置为false也是有用的,比如在持久存储页面之前你可能想先验证用户的输入。最后两个参数不说自明,允许你指定一个特定的用户名和口令。
void
send(content):这个方法具体向服务器发出请求。如果请求声明为异步的,这个方法就会立即返回,否则它会等待,直到接收到响应为止。参数是
可选的,可以是一个DOM对象的实例、一个输入流,或者是一个串。传入这个对象的内容会作为请求体的一部分发送。
void
setRequestHeader(string header, string
value):这个方法为HTTP请求中一个给定的首部设置值。它有两个参数,第一个串表示要设置的首部,第二个串表示要在首部中放置的值。需要说明,
这个方法必须在open()之后才能调用。在所有这些方法中,最有可能用到的就是open()和send()。XMLHttpRequest对象还有许
多属性,在设计Ajax交互时这些属性非常有用。
void abort(): 顾名思义,这个方法就是要停止请求。
string getAllResponseHeaders(): 这个方法的核心功能对Web应用开发人员应该很熟悉了,它会返回一个串,其中包含HTTP请求的所有响应首部。首部包括Content-Length、Date和URI。
string getResponseHeader(string header):这个方法与getAllResponseHeaders()是对应的,不过它有一个参数来表示你希望得到哪一个首部值,并且会把这个值作为一个串返回。
******************************/
/***************标准XMLHttpRequest属性
******************
onreadystatechange:每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数。
readyState:请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载, 2 = 已加载, 3 = 交互中, 4 = 完成。
responseText:服务器的响应,表示为一个串。
responseXML:服务器的响应,表示为XML。这个对象可以解析为一个DOM对象。
status:服务器的HTTP状态码(200对应OK,404对应Not Found(未找到),等等).
statusText:HTTP状态码的相应文本(OK或Not Found(未找到)等等)。
*************************************************************/
/*********************来看看到底要怎么才能发送请求*******
使用XMLHttpRequest对象发送请求的基本步骤如下:
1.得到XMLHttpRequest对象实例的一个引用,为此,可以创建一个新的实例,也可以访问包含有
XMLHttpRequest实例的一个变量。
2.告诉XMLHttpRequest对象,哪个函数会处理XMLHttpRequest对象状态的改变。为此要把对象的onreadystatechange属性设置为指向一个JavaScript函数的指针。
3. 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个
参数:一个是指示所用方法(通常是GET或POST)的串,另一个是表示目标资源URL的串,还有一
个Boolean值,指示请求是否是异步的。
4. 将请求发送给服务器。XMLHttpRequest对象的send()方法会把请求传送到指定的目标资源。
send()方法接受一个参数,这通常是一个串或一个DOM对象。这个参数会作为请求体的一部分传送到
目标URL.向send()方法提供参数时,要确保open()中指定的方法是POST。如果没有数据要作为请求体的一部分发送,则使用null。
异步方式给用户带来的体验:(我想程序员看到这段解释,心里真的很爽!)
对服务器的请求是异步发送的,因此浏览器可以继续响应用户输入,并在后台等待服务器的响应。
如果选择同步操作,而且倘若服务器的响应要花好几秒才能到达,浏览器就会表现得很迟钝,在
等待期间不能响应用户的输入。这样一来,浏览器好像被冻住一样,无法响应用户输入,而异步
做法可以避免这种情况,从而让最终用户有更好的体验,尽管这种改善很细微,但确实很有意义。
这样用户就能继续工作,而且服务器会在后台处理先前的请求。能与服务器通信而不打断用户的
工作流,这样就可以采用很多技术来改善用户体验。例如,假设有一个验证用户输入的应用。用
户在输入表单上填写各个域时,浏览器可以定期地向服务器发送表单值来进行验证,此时并不打
断用户,他还可以继续填写余下的表单域。如果某个验证规则失败,用户会立即得到通知,而不
必等表单真正发送到服务器进行处理时才知道有错误,这就能大大节省用户的时间,也能减轻服
务器上的负载压力,因为不必在表单提交不成功时完全重建表单的内容。
下面是说明安全问题的:
XMLHttpRequest对象要受制于浏览器的安全“沙箱”。XMLHttpRequest对象请求的所有资源
都必须与调用脚本在同一个域(domain)内。这个安全限制使得XMLHttpRequest对象不能请
求脚本所在域之外的资源。这个安全限制的强度如何因浏览器而异(见图2-5)。Internet Explorer
会显示一个警告,指出可能存在一个安全风险,但是用户可以选择是否继续发出请求。Firefox则
会
断然停止请求,并在JavaScript控制台显示一个错误消息。Firefox确实提供了一些JavaScript技巧,使得
XMLHttpRequest也可以请求外部URL的资源。不过,由于这些技术针对特定的浏览器,最好不要用,而且要避免使用
XMLHttpRequest访问外部URL
相关推荐
### Ajax之XMLHttpRequest详解 #### 一、引言 随着互联网技术的发展,用户对Web应用的体验要求越来越高。传统的Web应用程序通常采用请求/响应模型,这意味着每次用户与页面交互(例如点击按钮)都会触发一个新的...
**Ajax中的XmlHttpRequest详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。核心在于使用JavaScript与服务器进行异步数据交换,并且利用浏览器内置...
而AJAX的参数详解涉及到了在使用AJAX进行数据交互时各个参数的意义及使用方法,以及如何处理返回状态和状态函数来获取数据。 首先,来看看url参数,这是AJAX请求中的必填项,它指定了请求发送的目标地址。url可以是...
《Ajax实战:实例详解》这本书是关于Web开发领域中异步JavaScript和XML(Ajax)技术的一本实践指南。Ajax技术的出现,使得网页无需刷新就能实现数据的动态更新,极大地提升了用户体验。本书的"sources"部分包含了...
URL是AJAX请求中最基础的参数之一,其值应该是服务器上存在的可接收请求的脚本或页面。 2. type:该参数为字符串类型,用于指定请求的HTTP方法,如GET、POST等,默认为GET。除了常规的HTTP方法之外,也可以使用PUT...
### window.XMLHttpRequest详解与AJAX工作原理 #### 引言 在现代Web开发中,**AJAX**(Asynchronous JavaScript and XML)技术是一项至关重要的技术,它允许网页在不重新加载整个页面的情况下从服务器获取数据并...
**Ajax实战:实例详解源代码** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大提升了...
**Ajax 客户端 XMLHttpRequest 实例详解** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现了异步更新。...
ASP.NET AJAX使用XMLHttpRequest对象在后台发送异步请求。当用户与页面交互,如点击按钮或提交表单时,这些事件可以触发AJAX请求,而不是传统的页面回发。服务器处理请求后,只返回更新的HTML片段,这些片段被...
### AJAX原理与XMLHttpRequest详解 #### 一、引言 AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。其核心在于使用`XMLHttpRequest`...
**Ajax经典入门案例详解** Ajax,全称异步JavaScript和XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验。在Web...
### window.XMLHttpRequest详解(AJAX工作原理) #### 一、简介 `window.XMLHttpRequest` 是一个内置对象,用于在浏览器端发起异步 HTTP 请求。它主要用于实现 AJAX (Asynchronous JavaScript and XML) 功能,允许...
XMLHTTPRequest对象是Web开发中用于实现异步数据通信的关键技术,尤其在JavaScript中广泛使用,使得页面无需刷新就能与服务器交换数据并更新部分内容。这一技术最初由Microsoft引入,但现在已经成为了非官方的标准,...
XMLHttpRequest(XHR)对象是Web开发中的一个关键组件,它使得浏览器可以异步与服务器进行通信,无需刷新整个页面。这种技术被称为Ajax(Asynchronous JavaScript and XML),虽然名称中含有XML,但实际传输的数据...
$.ajax()方法是jQuery库中的一个核心功能,用于在后台与服务器进行异步数据交互,无需刷新页面。熟练掌握$.ajax()的参数设置对于前端开发至关重要。以下是对这些参数的详细解释: 1. **url**: 这是一个String类型的...
1. **XMLHttpRequest 对象** - AJAX的核心,用于在后台与服务器通信。 2. **异步请求** - AJAX请求是非阻塞的,允许用户在等待响应时继续与页面交互。 3. **JSON 数据格式** - 虽然名字中包含XML,但现代AJAX更常...
$.ajax()方法是jQuery中进行Ajax请求的主要接口,它接受一系列参数来定制请求的行为。以下是对这些参数的详细解释: 1. **url**:这是一个String类型的参数,表示要发送请求的服务器端URL。默认情况下,它是当前...