Ajax技术PPT(2)_H5之家 - 中国HTML5教程资源分享第一站

空格。 ? XML文档往往都对应着数据表，我们应该尽量让数据库中的字段的命名和相应的XML文档中的命名保持一致，这样可以方便数据变换。 ? 在XML元素命名中不要使用":"，因为XML命名空间需要用到这个十分特殊的字符。

Xml属性
? XML元素可以拥有属性。跟HTML一样，属

性通常包含一些关于元素的额外信息。 ? 使用子元素还是使用属性 ? 数据既可以存储在子元素中也可以存储在属性中。 ? 应该避免使用属性么？ ? 属性不能包含多个值（子元素可以）。 ? 属性不容易扩展。 ? 属性不能够描述结构（子元素可以）。 ? 属性很难被程序代码处理。 ? 属性值很难通过DTD进行测试。

XMLHttpRequest对象与ajax
? 与其说ajax是一种技术不如说ajax是一种技巧，所谓的技巧就是如何使用 XMLHttpRequest（下文为xhr对象）对象来和服务器进行异步提交。

? Xhr对其最早在ie5中以activex对象的方式存在，但是几乎没有人使用，但是在 mozilla1.0和safari1.2把它采用为事实上的标准，情况才有改变。目前几乎所有的浏览器都支持。

XMLHttpRequest概述
? 在使用xhr对象发送请求和处理请求响应之前，必须先用js语言 ? ? ? ? ? ? ? ? ? ? ?

创建一个xhr对象。由于xhr对象当前还不是w3c标准，所以可以才有多种方式进行创建。具体创建方式如下： Var xhr; Function createXMLHttpRequest() { If(window.ActiveXObject) { Xhr = new ActiveXObject(“Microsoft.XMLHTTP”); }else if(window.XMLHttpRequest) { Xhr = new XMLHttpRequest(); } }

xhr方法和属性
方法 Abort() getAllRequestHeaders getResponseHeader(“header”) Open(“method”,”url”) 描述停止当前请求把http请求的所有响应首部作为键/ 值对返回返回指定首部的传值建立服务器的调用。Method参数可以是get/post或put。url参数可以是相对rul或绝对url，这个方法还包括3 个参数向服务器发送请求把指定首部设置为所提供的值。在设置任何首部之前必须先调用open

Send(content) setRequestHeader(“header”,”value”)

Voie open方法
? Void open（string method,string url,boolean asynch,string username,string pass） ? 这个方法建立服务器的调用，这是初始化一个纯脚本方法，它有2个必要的参数，还有 3个可选的参数要提供调用的特定方法（ GET,POST或PUT），还要提供所调用资源的url。另外还可以传递一个boolean值，指示这个调用是异步的还是同步的，true为默认值。

Void send（content）
? 这个方法具体向服务器发送请求，如果请求为异步

的，这个方法会立即返回，否则它会等待直到接收到响应为止。可选参数有dom对象的实例、输入流或者串。传入这个方法的内容会作为请求体的一部分发送。

Vo

id abort（）
? 这个方法就是要停止请求

Xhr属性
属性
onreadystatechange readyState

描述
每个状态的改变都会触发这个事件处理器，通常会调用一个js函数请求的状态：有个5个可选值：0=未初始化； 1=正在加载；2=已加载；3=交互中；4= 完成服务器的响应，表示为一个串服务器的响应，表示为xml。这个对象可以解析为一个dom对象服务器的http响应状态码（200=ok； 404=not found。。) HTTP响应码对应的文本（OK或Not Found。。）

responseText responseXML status statusText

简单的xhr对象使用
? ? ? ? ? ? ? ? ? ? ? ? ?

//1.发起请求（new XHR 并发送数据到后台） var http_request = false; // 发起请求 function faQiQingQiu(url) { http_request = false; // 启动xmlhttprequest if (window.XMLHttpRequest) { // Mozilla, Safari,...火狐,IE7,IE8,IE9 http_request = new XMLHttpRequest();// XHR的全称 if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE5,IE6,IE5.5 try { http_request = new ActiveXObject("Msxml2.XMLHTTP");

?
? ? ? ? ? ?

} catch (e) {
try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } }

?
? ? ? ? ? ? ?

if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance'); return false; } // STEP 2: //回来了 http_request.onreadystatechange = callBack;// 2. 回调JS // STEP 3: http_request.open('GET', url, true);

?
? ?

// STEP 4:
http_request.send(null); }

解释：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

客户端触发一个ajax事件和触发一个正常的js事情是没有任何区别的。 Xhr对象如果创建成功那么就可以调用send方法向服务器发送请求服务器就可以做你想做的事情请求返回到浏览器。还应该在服务器端设置一些动作： Response.setHeader(“Cache-control”,”no-cache”); Response.setHeader(“pragma”,”no-cache”); 在这个示例中，xhr对象配置为处理返回时要调用callback（）函数。这个函数会函数会调用xhr对象的readyState属性，然后检查服务器返回的状态码。如果一切正常，callback函数会被调用。回调函数 Function callback（） { If(xhr.readystate==4) { If(xhr.status==200) { //do something interesting here } } }

responsText例子
? ? ? ? ? ? ? ?

// 2.回调( 回来调用JS，并把数据给JS处理) function callBack(){ if (http_request.readyState == 4) // readyState的取值如下: 0 (未初始化) 1 (正在装载) 2 // (装载完毕) 3 (交互中) 4 (完成) { if (http_request.status == 200) // 成功回来了 XHR带回来的可以是两种东西( responseXML格式的数据, responseText文本数据 ) {

?
? ? ? ? ? ? ? ? ? ? ? ?

// 这是我们关心（回来的东西，把东西给那个JS函数）并使用的地方
// var li