第12章ajax,第12章 Ajax和Json数据.doc

Ajax

の

◎ Ajax原理

¤ 注册时存在问题

¤ 什么是Ajax

? 异步的javaScript和Xml

? AJAX是一种用来改善用户体验的技术，其实质是，使用XMLHttpRequest独享异步地想服务器放松请求。

? 服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容。

¤ Ajax工作原理

¤ 如何获得Ajax对象

代码如下

function getXhr(){

var xhr = null;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject( ‘Microsoft.XMLHttp’ );

}

return xhr;

}

◎ Ajax对象属性方法

¤ 异步对象的属性和方法

¤ onreadystatechange

? onreadystatechange：绑定一个事件处理函数，该函数用来处理onready -change事件。

? 注意：当Ajax对象的readyState的值发生了改变，比如，从0变成1，就会产生readystatechange事件。

¤ readyState

? readyState：一共有5个值，分别是0,1,2,3,4 ,分别表示Ajax对象与服务器通信的状态。

◎ 使用Ajax发送异步请求

¤ 发送异步请求的步骤

① 获取Ajax对象：获取XMLHttpRequest

② 设置回调函数：为Ajax对象的onreadystatechange事件设定响应函数

function fn(){

if(xhr.readyState == 4 && xhr.satus == 200 ){

var txt = xhr.responseText;

//相应的DOM操作

... ...

}

}

③ 创建请求：调用XMLHttpRequest对象的open方法

xhr.open( ‘get’ , ‘xx.do’ , true );

? 注意：

? true:表示发送异步请求(当Ajax对象发送请求时，用户仍然可以对当前页面做其他的操作)。

? false：表示发送同步请求(当Ajax对象发送请求时，浏览器会锁定当前页面，用户不能对当前页面做其他操作)。

xhr.open( ‘post’ , ‘xx.do’ , true );

xhr.setRequestHeader(‘content-type’,application/x-www-form-urlencoded);

? setRequestHeader的作用：因为HTTP协议要求发送post请求时，必须要有content-type消息头，但是默认情况下xhr中不会添加该消息头，所以，需要我们调用setRequsetHeader方法，添加这个消息头。

④ 发送请求：调用Ajax对象的send方法

GET 请求：xhr.send(null)

POST请求：xhr.send(name=value & name=value...)

? GET请求：

- send方法内传递null

- 若要提交数据，则在open方法的’”URL”后面追加

- 如：xhr.open( “get” , “xx.do?name=value&name=value” ,true )

¤ 编写服务器代码

? 服务器返回的一般是部分数据，比如一个简单的文本。

¤ Ajax的应用

? 输入的值需要检验，如检测注册的用户名是否已被占用

? 搜索时出现的自动提示列表

? 级联显示

? 数据录入和列表显示在同一个页面

? 不需要刷新的翻页

の jQuery对AJAX的支持

¤oad()

? 作用：将服务器返回的数据字节添加到符合要求的节点之上

? 用法： $obj.load( 请求地址 ， 请求参数);

? 请求参数

- “username=tom&age=23”

- { ‘usernaem’:’tom’ , ‘age’:22 }

- 有请求参数时，load方法发送POST请求，否则发送GET请求

¤ get()

? 作用：发送GET类型的请求

? 用法：$.get( 请求地址，请求参数，回调函数，服务器返回的数据类型 )

说明：

- 回调函数添加的参数是服务器返回的数据

- 服务器返回的数据类型：

html ：html文本

text ：文本

JSON ：js对象

xml ：xml文档

script ：javaScript脚本

¤ ajax()

? 用法 ：$.ajax({ });

? { }内可以设置的选项参数：

- url ：请求地址

- type ：请求方式