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时，同步向服务器发送请求 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |