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
3表示已接收部分数据
4表示xhr对象获得了服务器返回的所有数据
(3)responseText:获得服务器返回的文本数据
(4)responseXML:获得服务器返回的xml数据
(5)status:获得服务器返回的状态码
3ajax编程步骤
(1)获得XMLHttpRequest对象
varxhr=getXhr();
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时,同步向服务器发送请求
原文链接:https://www.f2er.com/ajax/166204.html