Ajax技术的基本原理

======================================================
注：本文源代码点此下载
======================================================

我用一个简单的用户名验证的例子来谈一谈我对ajax的了解:

这个例子用到了两个jsp和一个js,我没有用后台来验证,因为原理是一样的.

1.用户注册表单页:ajaxcheckuser.jsp

用户名:

密码:

email:

2.用于说明ajax技术的基本原理的js文件:ajaxcheckuser.js

//当输入框失去焦点时触发些函数

function checkuserajax(){

//第一步:创建xmlhttprequest对象

var xhr = createxmlhttprequest() ;

//第二步:建立对服务器的调用

/**

* open(method,url,asynch)方法和属性介绍

* 1.xmlhttprequest 对象的 open 方法允许程序员用一个ajax调用向服务器发送请求。

* 2.method:请求类型,类似 "get"或"post"的字符串。

*若只想从服务器检索一个文件,而不需要发送任何数据,使用get(可以在get请求里通过附加在url上的查询字符串来发送数据,不过数据大小限制为2000个字符)。

*若需要向服务器发送数据,用post。

* 3.url:路径字符串,指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。

*在某些情况下,有些浏览器会把多个xmlhttprequest请求的结果缓存在同一个url。

*如果对每个请求的响应不同,这就会带来不好的结果。把当前时间戳追加到url的最后,就能确保url的惟一性,从而避免浏览器缓存结果。

*例如:var url = "getandpostexample?timestamp=" + new date().gettime();

* 4.asynch:表示请求是否要异步传输,默认值为true(异步)。

*指定true,在读取后面的脚本之前,不需要等待服务器的相应。

*指定false,当脚本处理过程经过这点时,会停下来,一直等到ajax请求执行完毕再继续执行。

*/

var username = document.getelementbyid("username").value ;//获得输入的用户名

xhr.open("post","checkuser.jsp?username="+username,true) ;

/**

* setrequestheader()方法和属性介绍

* 1.当浏览器向服务器请求页面时,它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。

*首部信息用来声明一个请求是 get 还是 post

* 2.ajax 请求中,发送首部信息的工作可以由 setrequestheader完成

* 3.参数header: 首部的名字;参数value:首部的值。

* 4.如果用 post 请求向服务器发送数据,需要将 "content-type" 的首部设置为 "application/x-www-form-urlencoded".它会告知服务器正在发送数据,并且数据已经符合url编码了。

* 5.该方法必须在open()之后才能调用

*/

xhr.setrequestheader("content-type","application/x-www-form-urlencoded")//如果发送方式为post时,需要设置首部信息 ;

//第三步:向服务器发送请求

/**

* send(data)方法和属性介绍

* 1.open 方法定义了 ajax 请求的一些细节。send 方法可为已经待命的请求发送指令

* 2.data:将要传递给服务器的字符串

* 3.若选用的是 get 请求,则不会发送任何数据, 给 send 方法传递 null 即可:xhr.send(null);

* 4.当向send()方法提供参数时,要确保open()中指定的方法是post,如果没有数据作为请求体的一部分发送,则使用null.

*/

xhr.send(null) ;

//第四步:接收服务器的处理结果

/**

* 用 xmlhttprequest 的方法可向服务器发送请求。在 ajax 处理过程中,xmlhttprequest 的如下属性可被服务器更改:

* 1.readystate:

*该属性表示ajax请求的当前状态。它的值用数字代表:

*(1).0 代表未初始化。 还没有调用 open 方法

*(2).1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用

*(3).2 代表已加载完毕。send 已被调用。请求已经开始

*(4).3 代表交互中。服务器正在发送响应

*(5).4 代表完成。响应发送完毕

*每次 readystate 值的改变,都会触发 readystatechange 事件。

*如果把 onreadystatechange 事件处理函数赋给一个函数,那么每次 readystate 值的改变都会引发该函数的执行。

*readystate 值的变化会因浏览器的不同而有所差异。但是,当请求结束的时候,每个浏览器都会把 readystate 的值统一设为 4

* 2.status:

*服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息,并且属于超文本传输协议中的一部分。

*常用状态码及其含义:

*(1).404 没找到页面(not found)

*(2).403 禁止访问(forbidden)

*(3).500 内部服务器出错(internal service error)

*(4).200 一切正常(ok)

*(5).304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )

*在 xmlhttprequest 对象中,服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较,可以确保服务器是否已发送了一个成功的响应

* 3.responsetext:

*该属性包含了从服务器发送的数据。它是一个html,xml或普通文本,这取决于服务器发送的内容。

*当 readystate 属性值变成 4 时, responsetext 属性才可用,表明 ajax 请求已经结束。

* 4.responsexml:

*如果服务器返回的是 xml, 那么数据将储存在 responsexml 属性中。

*只用服务器发送了带有正确首部信息的数据时, responsexml 属性才是可用的。 mime 类型必须为 text/xml

*/

//指定响应处理函数

xhr.onreadystatechange = function(){

//对象的状态为4表示已完成

if(xhr.readystate==4){

//成功返回200,没有修改返回304

if(xhr.status==200||xhr.status==304){

//开始处理信息

//alert(xhr.responsetext) ;

document.getelementbyid("msg").innerhtml = xhr.responsetext ;

}

}

}

}

/**

* 创建xmlhttprequest实例(兼容ie和firefox等浏览器)

*/

function createxmlhttprequest(){

var xmlhttp = null;

try{

//适用的浏览器firefox, opera 8.0+, safari

xmlhttp=new xmlhttprequest();

}catch(e){

//ieie7.0以下的浏览器以activex组件的方式来创建xmlhttprequest对象

var msxml =

['msxml2.xmlhttp.6.0','msxml2.xmlhttp.5.0',

'msxml2.xmlhttp.4.0','msxml2.xmlhttp.3.0',

'msxml2.xmlhttp','microsoft.xmlhttp'];

for(var n = 0; n

注意

:

1.这个xml首部分,必须追加到脚本末尾,不能有回车,不然会出现意想不到的结果.... ....

2.contenttype="text/xml; charset=utf-8"中已经由原来的text/html改为text/xml了.如果不改为xml会很麻烦.

如果想在后台往回传json格式的内容,那么请在ajaxcheckuser.js文件中增加下面这个函数:

//适用于返回结果为json格式

function checkuserajaxjson(){

//第一步:创建xmlhttprequest对象

var xhr = createxmlhttprequest() ;

//第二步:建立对服务器的调用

xhr.open("post","checkuserjson.jsp",true) ;

xhr.setrequestheader("content-type","application/x-www-form-urlencoded")//如果发送方式为post时,需要设置首部信息 ;

//第三步:向服务器发送请求

var username = document.getelementbyid("username").value ;//获得输入的用户名

xhr.send("username="+username) ;

//第四步:接收服务器的处理结果

//指定响应处理函数

xhr.onreadystatechange = function(){

//对象的状态为4表示已完成

if(xhr.readystate==4){

//成功返回200,没有修改返回304

if(xhr.status==200||xhr.status==304){

//开始处理信息

var xmlresult = xhr.responsetext ;

var msgjson = eval("("+xmlresult+")") ;//注意此处必须写"("和")",目的是先解析xmlresult的内容,再将其转换

if(msgjson){

document.getelementbyid("msg").innerhtml = msgjson.msg ;

if(msgjson.code==1){

//如果用户名已经存在那么将光标重新定位

document.getelementbyid("msg").focus ;

}

}

}

}

}

}

checkuserjson.jsp文件内容如下:

{"code":"","msg":""}

注意

:需要将contenttype="text/html; charset=utf-8"中的text/html改为text/json.

其他的没啥了,请做试验... ...

当然,我已经通过试验了.

刚才有个哥们第一时间给我指出了错误,说我这个不是原理是步骤,我也是比较赞同的,呵呵.不过我还属于菜鸟,刚开始接触ajax,所以还得大家多多指教啊.呵呵,我自己认为ajax就是异步刷新的代名词吧,且是局部刷新,呵呵.

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/