Ajax技术以及jQuery对Ajax的支持

前端之家收集整理的这篇文章主要介绍了Ajax技术以及jQuery对Ajax的支持前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1asynchronousjavascriptandxml@H_404_2@

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

2XMLHttpRequest对象@H_404_2@

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

function getXhr() {

var xhr = null;

if(window.XMLHttpRequest) {

// not ie

xhr = new XMLHttpRequest();

} else {

// ie

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

}

return xhr;

}

该对象的几个重要属性@H_404_2@

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

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

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

1表示对象已建立,尚未调用send方法@H_404_2@

2表示send方法调用@H_404_2@

3表示已接收部分数据@H_404_2@

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

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

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

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

3ajax编程步骤@H_404_2@

(1)获得XMLHttpRequest对象@H_404_2@

varxhr=getXhr();@H_404_2@

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

get方式:@H_404_2@

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

true:异步请求@H_404_2@

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

器返回的结果。@H_404_2@

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

//注册监听器@H_404_2@

xhr.onreadystatechange=f1;@H_404_2@

xhr.send(null);@H_404_2@

post方式:@H_404_2@xhr.open('post',true);@H_404_2@

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

数据。@H_404_2@

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

function f1() {

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

// receive data

var txt = xhr.responseText;

//或者

//var txt = xhr.responseXML;

}

}

4@H_404_2@@H_404_2@jQuery对ajax的支持@H_404_2@

(1)load方法:@H_404_2@

load(url,[data]);@H_404_2@

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

比如:@H_404_2@

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

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

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

第一种形式:'airline=ca1008'@H_404_2@

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

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

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

url:请求地址。@H_404_2@

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

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

其中,callback格式function(data,statusText),@H_404_2@

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

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

text:服务器返回的是文本@H_404_2@

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

xml:返回的是xml文档@H_404_2@

script:返回的是javascript内容@H_404_2@

html:返回的是html@H_404_2@

$.post()格式同上。@H_404_2@

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

选项参数如下:@H_404_2@

url(string):请求地址@H_404_2@

type(string):GET/POST@H_404_2@

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

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

xml,html,script,json,text@H_404_2@

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

function(data,textStatus),其中,@H_404_2@

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

textStatus描述状态的字符串。@H_404_2@

error(function):请求失败时调用函数,有三个参数@H_404_2@

function(XmlHttpRequest,textStatus,errorThrown)@H_404_2@

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

猜你在找的Ajax相关文章