Ajax基础

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

参考:http://www.ibm.com/developerworks/cn/web/wa-ajaxintro/

ajax的运行机制

在一般的 web 应用程序中,用户填写表单字段并单击 submit 按钮。然后整个表单发送到服务器,服务器将它转发给处理表单的脚本(通常是 php 或 java,也可能是 cgi 进程或者类似的东西),脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的 html,也可能是确认页面,或者是具有根据原来表单中输入数据选择的某些选项的页面。当然,在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白,等到服务器返回数据后再重新绘制。这就是交互性差的原因,用户得不到立即反馈,因此感觉不同于桌面应用程序。

ajax 基本上就是把 javascript 技术和 xmlhttprequest 对象放在 web 表单和服务器之间。当用户填写表单时,数据发送给一些 javascript 代码而不是 直接发送给服务器。相反,javascript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说,javascript 代码在幕后发送请求,用户甚至不知道请求的发出。更好的是,请求是异步发送的,就是说 javascript 代码(和用户)不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。

然后,服务器将数据返回 javascript 代码(仍然在 web 表单中),后者决定如何处理这些数据。它可以迅速更新表单数据,让人感觉应用程序是立即完成的,表单没有提交或刷新而用户得到了新数据。javascript 代码甚至可以对收到的数据执行某种计算,再发送另一个请求,完全不需要用户干预!这就是xmlhttprequest 的强大之处。它可以根据需要自行与服务器进行交互,用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验,但是背后又拥有互联网的全部强大力量。

创建xmlhttprequest 对象

open():建立到服务器的新请求。

send():向服务器发送请求。

abort():退出当前请求。

readystate:提供当前 html 的就绪状态。

responsetext:

服务器返回的请求响应文本。

创建xmlhttprequest 对象

var request = false;

try {

//new xmlhttprequest

request = new xmlhttprequest();

} catch (trymicrosoft) {//用较新版ie创建microsoft兼容的对象

try {

request = new activexobject("msxml2.xmlhttp");

} catch (othermicrosoft) {//用旧版ie创建microsoft兼容的对象

try {

request = new activexobject("microsoft.xmlhttp");

} catch (failed) {

request = false;

}

}

}

if (!request)

alert("xmlhttprequest创建失败!");

ajax 世界中的请求/响应

发出请求:首先需要一个 web 页面能够调用的javascript 方法(比如当用户输入文本或者从菜单中选择一项时)。接下来就是在所有 ajax 应用程序中基本都雷同的流程:

1)从 web 表单中获取需要的数据。

2)建立要连接的 url。

3)打开到服务器的连接。

4)设置服务器在完成后要运行的函数。

5)发送请求。

处理响应 :现在要面对服务器的响应了。现在只要知道两点:

1)什么也不要做,直到 xmlhttp.readystate 属性的值等于 4。

2)服务器将把响应填充到 xmlhttp.responsetext 属性中。

发送请求及处理服务器响应

function getcustomerinfo() {

//建立请求url

var phone = document.getelementbyid("phone").value;

var url = "/cgi-local/lookupcustomer.php?phone=" + escape(phone);

//打开请求

//使用异步连接则为 true,否则为 false

request.open("get", url, true);

//指定回调方法。回调允许服务器反向调用web页面中的代码。它也给了服务器一定程度的控制权,

//服务器完成请求后,查看xmlhttprequest对象,然后调用onreadystatechange属性指定的方法。

request.onreadystatechange = updatepage;

//发送请求

//虽然可以使用send()发送数据,但也能通过url本身发送数据。

//get请求中,用url发送数据要容易得多.如果需要发送安全信息或 xml,可能要使用send()发送内容。

//如果不需要通过 send()传递数据,则只要传递 null 作为该方法的参数即可

request.send(null);

}

//回调方法

function updatepage() {

if (request.readystate == 4) //http就绪状态4: 表示服务器响应已经完成

if (request.status == 200)//http状态码200: 表示一切顺利

alert("server is done!");

else if (request.status == 404)

alert("您所请求的网页不存在");

else

alert("错误:状态码为" + request.status);

}

有用的 head 请求

您会发现 head 请求非常有用的一个领域是用来查看内容的长度或内容的类型。这样可以确定是否需要发回大量数据来处理请求,和服务器是否试图返回二进制数据,而不是 html、文本或 xml(在 javascript 中,这 3 种类型的数据都比二进制数据更容易处理)。

在这些情况中,您只使用了适当的头名,并将其传递给 xmlhttprequest 对象的 getresponseheader() 方法。因此要获取响应的长度,只需要调用 request.getresponseheader("content-length");。要获取内容类型,请使用 request.getresponseheader("content-type");。

在很多应用程序中,生成 head 请求并没有增加任何功能,甚至可能会导致请求速度变慢(通过强制生成一个 head 请求来获取有关响应的数据,然后在使用一个 get 或 post 请求来真正获取响应)。然而,在出现您不确定有关脚本或服务器端组件的情况时,使用 head 请求可以获取一些基本的数据,而不需要对响应数据真正进行处理,也不需要大量的带宽来发送响应。

增加这种生成 head 请求的能力,检查某个 url 是否存在,以及确认某个文件是否被修改过,这样就可以确保用户可以获得有效的页面,用户所看到的信息都是最新的.

使用 ajax 生成一个 head 请求

//使用 ajax 生成一个 head 请求

function getsalesdata() {

createrequest();

var url = "/boards/servlet/updateboardsales";

request.open("head", url, true);

request.onreadystatechange = updatepage;

request.send(null);

}

// 输出从 head 请求中获得的响应头的内容

function updatepage() {

if (request.readystate == 4) {

alert(request.getallresponseheaders());

}

}

使用 xml

在异步应用程序中 xml 有两种基本的用法:

a:以 xml 格式从网页向服务器发送请求

b:以 xml 格式在网页中从服务器接收请求

其中第一种用法,即用 xml 发送请求,需要将请求的格式设置为 xml,可以使用 api 来完成,也可以与文本连成字符串,然后将结果发送到服务器。按照这种思路,主要的任务就是通过既符合 xml 规则又能被服务器理解的方式构造请求。因此这里的关键实际上是 xml 格式,得到需要发送的数据之后,只需要用 xml 语法将其包装起来。

第二种用法,即用 xml 接收请求,需要从服务器上接收响应,然后从 xml 提取数据(同样,可以用 api 或者采用蛮力方法)。这种情况下,关键在于来自服务器的数据。

a:从客户机到服务器的 xml

在网络上传输 xml 之前,需要保证服务器以及发送数据的脚本能够接受 xml。现在对很多人来说这么强调似乎有点多余,认为这是理所当然的,但是很多新手往往认为只要通过网络发送 xml,就能够被正确地接收和解释。

实际上,需要两个步骤来保证发送的 xml 的数据能够被正确地接收:

1.保证向其发送 xml 的脚本能够接受 xml 数据格式。

2.保证脚本认可发送数据所采用的特定 xml 格式和结构。

注意:在向服务器的请求中尽量不要使用xml .因为通常xml总会占用更多的空间,速度也更慢,xml没有为请求增加任何东西,难于操作、理解和维护。因此除非和只接受xml的脚本打交道,在请求中最好使用普通文本。

向服务器发送 xml

function callserver() {

// 从页面获取信息

var firstname = document.getelementbyid("firstname").value;

var lastname = document.getelementbyid("lastname").value;

var street = document.getelementbyid("street").value;

var city = document.getelementbyid("city").value;

var state = document.getelementbyid("state").value;

var zipcode = document.getelementbyid("zipcode").value;

//按照指定的xml格式组织信息。

//必须手工创建 xml。使用 dom 不是一种好的选择,因为没有简单

//易行的办法将 dom 对象转化成在请求中发送的字符串。

//缺点:难以理解和维护

var xmlstring = "

" +

"" + escape(firstname) + "" +

"" + escape(lastname) + "" +

"" + escape(street) + "" +

"" + escape(city) + "" +

"" + escape(state) + "" +

"" + escape(zipcode) + "" +

"";

var url = "/scripts/saveaddress.php";

//有些浏览器限制了get请求字符串的长度,对于xml最好使用post请求

xmlhttp.open("post", url, true);

//告诉服务器要发送的是xml而不是一般的名/值对

xmlhttp.setrequestheader("content-type", "text/xml");

xmlhttp.onreadystatechange = confirmupdate;

//将xml字符串作为参数发出

xmlhttp.send(xmlstring);

}

b:以 xml 格式在网页中从服务器接收请求

在您发送名称/值对时,web 浏览器会发送请求,平台会响应该请求,并承载一个服务器程序,配合它将那些名称/值对转换成服务器程序可以轻松处理的数据。实际上,每一种服务器端技术 —— 从 java? servlet 到 php、再到 perl、ruby on rails —— 都允许您调用多种方法来根据名称获取值。如果服务器使用字符串 name=jennifer&job=president 应答一个应用程序,客户机没有任何标准化的简便方法来将每个对拆分成名称和值。您必须手动解析所返回的数据。如果服务器返回一个由名称/值对构成的响应,这样的响应的解释难度与使用分号、竖线或其他任何非标准格式化字符相同。

向客户机发送数据时,名称/值对是非常好的选择,因为服务器和服务器端语言可以轻松解释名称/值对;向客户机返回数据时使用 xml 也是如此。您可以将 xml 作为纯文本处理,并以这种方式获取其值。因此,有几种方法可从服务器获得 xml 响应,并使用较为标准的代码提取数据,在客户机中使用这些数据。还有一个额外的好处,xml 非常易于理解。

处理来自服务器的 xml 响应

//作为格式化为xml的纯文本处理

function updatepage() {

if (request.readystate == 4) {

if (request.status == 200) {

var response = request.responsetext;

// response has the xml response from the server

alert(response);

}

}

}

//作为一个xml文档,由一个dom document对象表示

function updatepage() {

if (request.readystate == 4) {

if (request.status == 200) {

var xmldoc = request.responsexml;

var showelements = xmldoc.getelementsbytagname("show");

for (var x=0; xshowelements.length; x++) {

//we know that the first child of show is title,and the second is rating

var title = showelements[x].childnodes[0].value;

var rating = showelements[x].childnodes[1].value;

// now do whatever you want with the show title and ratings

}

}

}

}

使用json进行数据传输

json 可以将 javascript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 web 客户机传递给服务器端程序。这个字符串看起来有点儿古怪(稍后会看到几个示例),但是 javascript 很容易解释它,而且 json 可以表示比名称/值对更复杂的结构。例如,可以表示数组和复杂的对象,而不仅仅是键和值的简单列表。

当需要表示一组值时,json 不但能够提高可读性,而且可以减少复杂性。例如,假设您希望表示一个人名列表。在 xml 中,需要许多开始标记和结束标记;如果使用典型的名称/值对(就像在本系列前面文章中看到的那种名称/值对),那么必须建立一种专有的数据格式,或者将键名称修改为 person1-firstname 这样的形式。

在这个示例中,只有一个名为 people 的变量,值是包含三个条目的数组,每个条目是一个人的记录,其中包含名、姓和电子邮件地址。上面的示例演示如何用括号将记录组合成一个值。当然,可以使用相同的语法表示多个值(每个值包含多个记录).这里最值得注意的是,能够表示多个值,每个值进而包含多个值。但是还应该注意,在不同的主条目(programmers、authors 和 musicians)之间,记录中实际的名称/值对可以不一样。json 是完全动态的,允许在 json 结构的中间改变表示数据的方式。掌握了 json 格式之后,在 javascript 中使用它就很简单了。json 是 javascript 原生格式,这意味着在 javascript 中处理 json 数据不需要任何特殊的 api 或工具包。

json对象结构示例

//生成json对象

var people =

{ "programmers": [

{ "firstname": "brett", "lastname":"mclaughlin", "email": "brett@nance.com" },

{ "firstname": "jason", "lastname":"hunter", "email": "jason@servlets.com" },

{ "firstname": "elliotte", "lastname":"harold", "email": "elharo@macfaq.com" }

],

"authors": [

{ "firstname": "isaac", "lastname": "asimov", "genre": "science fiction" },

{ "firstname": "tad", "lastname": "williams", "genre": "fantasy" },

{ "firstname": "frank", "lastname": "peretti", "genre": "christian fiction" }

],

"musicians": [

{ "firstname": "eric", "lastname": "clapton", "instrument": "guitar" },

{ "firstname": "sergei", "lastname": "rachmaninoff", "instrument": "piano" }

]

}

//访问json对象的属性

people.authors[1].genre// value is "fantasy"

people.musicians[3].lastname// undefined. this refers to the fourth entry,

people.programmers.[2].firstname// value is "elliotte"

//修改json对象的属性

people.musicians[1].lastname = "rachmaninov";

//将json对象转化为字符串,就可以在任何地方使用

string newjsontext = people.tojsonstring();

现在就获得了一个可以在任何地方使用的文本字符串,例如,可以将它用作 ajax 应用程序中的请求字符串。

可以将任何 javascript 对象转换为 json 文本。并非只能处理原来用 json 字符串赋值的变量。为了对名为 myobject 的对象进行转换,只需执行相同形式的命令:

string myobjectinjson = myobject.tojsonstring();

最终结论是,如果要处理大量 javascript 对象,那么 json 几乎肯定是一个好选择,这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。

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