ajax技术需要jquery,Ajax技术以及jQuery对Ajax的支持

1asynchronousjavascriptandxml

用来改善用户体验的一种技术，其实质是：利用javascript调用浏览器内置的一个特殊的对象(XMLHttpRequest，该对象属于BOM模型)异步(浏览器不会将当前页面销毁，用户可以继续对当前页面做相应的操作)地向服务器发送请求，服务器返回xml或者text数据给浏览器，然后利用javascript使用这些数据更新当前页面。整个过程，页面无刷新，不打断用户的操作。

2XMLHttpRequest对象

该对象因浏览器不同获取方法不同。

function getXhr() {

var xhr = null;

if(window.XMLHttpRequest) {

// not ie

xhr = new XMLHttpRequest();

} else {

// ie

xhr = new ActiveXObject('Microsoft.XmlHttp');

}

return xhr;

}

该对象的几个重要属性

(1)onreadystatechange:绑定监听器(事件处理函数)

(2)readyState:xhr对象与服务器通讯的状态，该状态有5个值，分别是0,1,2,3,4

0表示对象已建立，尚未初始化(未调用open方法)

1表示对象已建立，尚未调用send方法

2表示send方法已调用

3表示已接收部分数据

4表示xhr对象获得了服务器返回的所有数据

(3)responseText:获得服务器返回的文本数据

(4)responseXML:获得服务器返回的xml数据

(5)status:获得服务器返回的状态码

3ajax编程步骤

(1)获得XMLHttpRequest对象

varxhr=getXhr();

(2)调用XMLHttpRequest对象的方法发送请求

get方式：

//open(请求方式、请求地址、异步还是同步请求)

true：异步请求

false：同步请求。发送同步请求时浏览器会锁住当前页面，直到收到服务

器返回的结果。

xhr.open('get','check_user.do?username=zs&age=20',true);

//注册监听器

xhr.onreadystatechange=f1;

xhr.send(null);

post方式：xhr.open('post',true);

(3)编写服务器端的处理代码。服务器不需要返回一个完整的页面，只需要返回部分

数据。

(4)监听器代码(通过xhr获得服务器返回的数据，然后更新界面)

function f1() {

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

// receive data

var txt = xhr.responseText;

//或者

//var txt = xhr.responseXML;

}

}

4jQuery对ajax的支持

(1)load方法:

load(url,[data]);

将服务器返回的数据直接插入到符合要求的节点之上。

比如:

var$obj=$('#d1');

$obj.load('price.do','airline=ca1008');

请求参数可以有两种形式来传递:

第一种形式:'airline=ca1008'

第二种形式:{'airline':'ca1008'}

load方法会使用get方式向服务器发请求。

(2)$.get(url,[data],[callback],[type]):

url:请求地址。

data:请求参数。请求参数的格式同上。

callback:是一个函数，用来处理服务器返回的数据。

其中，callback格式function(data,statusText),

data:是服务器返回的数据，statusText:是状态的描述。

type:服务器返回的数据的类型：

text:服务器返回的是文本

json:返回的是符合json规范的字符串

xml:返回的是xml文档

script:返回的是javascript内容

html:返回的是html

$.post()格式同上。

(3)$.ajax(options):options是一个形如{key1:value1,key2,value2...}的js对象，用于指定发送请求的选项。

选项参数如下：

url(string):请求地址

type(string):GET/POST

data(object/string):发送到服务器的数据(这儿可以使用serialize()或者serializeArray()方法)

dataType(string):预期服务器返回的数据类型，一般有：

xml,html,script,json,text

success(function):请求成功后调用的回调函数，有两个参数：

function(data,textStatus),其中，

data是服务器返回的数据，可以是html,text,jsonObj,xmlDoc

textStatus描述状态的字符串。

error(function):请求失败时调用的函数，有三个参数

function(XmlHttpRequest,textStatus,errorThrown)

async(默认值为true)/false:当值为false时，同步向服务器发送请求

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。