1. 简介
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
2. 创建对象
XMLHttpRequest 是 AJAX 的基础。
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。XMLHttpRequest 用于在后台与服务器交换数据。
创建 XMLHttpRequest 对象的语法:
除IE5和IE6以外的浏览器:
variable = newXMLHttpRequest();
IE5和IE6:
variable = newActiveXObjec(“Microsoft.XMLHTTP”);
为应对所有浏览器,可先检查是否支持XMLHttpRequest,如支持则创建,不支持,创建ActiveXObject:
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
3. 发请求
XMLHttpRequest 对象用于和服务器交换数据。
请求方式:
参数1:请求方式(get/post,get方式地址可跟参数),参数2:请求url,参数3:是否异步(不推荐使用false)
xmlhttp.open("GET","test1.txt?fileName=AAA&fileId=BBB",true);
xmlhttp.send();//get方式时,不含参数
xmlhttp.open("post","test1.txt?fileName=’’&fileId=’’",true)
//post传参时使用,参数1:规定头的名称,参数2:给定头的值
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(“fileName=AAA&fileId=BBB”);//post时:可含参数,为string
不建议使用get请求方式的情况:
· 无法使用缓存文件(更新服务器上的文件或数据库)
· 向服务器发送大量数据(POST 没有数据量限制)
· 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
注意:
ajax向服务器发送请求后获取的数据会存入浏览器缓存中,由于页面不刷新,相同页面相同请求的结果可能你直接从浏览器缓存中获取,从而造成数据不更新问题,避免方式(使每次请求都不相同):
xmlhttp.open("GET","demo_get.asp?t=" + Math.random()
,true);
xmlhttp.send();
4. 服务器响应
使用XMLRequest对象的responseText或responseXML获取服务器响应:
l responseText:获得字符串形式的响应数据,可直接写入元素中
l responseXML:获得XML形式的响应数据,需要遍历
5. onreadystatechange事件
用于处理基于响应的过程中的操作
XMLHttpRequest或ActiveXObject("Microsoft.XMLHTTP")对象中包含onreadystatechange、readState和status三种属性,意义如下:
l onreadystatechange:存储函数(或函数名),每当readyState发生改变时调用对应函数
l readyState:存有XMLHttpRequset的状态,从0到4发生变化,0:请求未初始化,1:客户端和服务器建立连接,2:服务器请求接受完成,3:服务器处理请求4:客户端请求完成,且响应已就绪
l status:请求是否存在异常,200:正常,404:未找到请求地址
可用于处理请求响应后执行的函数(回调函数)即在服务器响应已完成时处理响应数据的函数:
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
6. 使用实例
6.1. 文本框输入内容时提示相关信息(加载asp文件)
<html>
<head>
<script type="text/javascript">
function showHint(str){
var xmlhttp;
if (str.length==0){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>请在下面的输入框中键入字母(A - Z):</h3>
<form action="">
//onkeyup:键盘按下松开时触发
姓氏:<input type="text" id="txt1" οnkeyup="showHint(this.value)" />
</form>
<p>建议:<span id="txtHint"></span></p>
</body>
</html>
6.2. 输入内容后显示相关信息
<html>
<head>
<script type="text/javascript">
function showCustomer(str){
var xmlhttp;
if (str==""){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="" style="margin-top:15px;">
<label>请选择一位客户:
<select name="customers" οnchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</label>
</form>
<br />
<div id="txtHint">客户信息将在此处列出 ...</div>
</body>
</html>
6.3. 下拉框选中后提示相关信息(读取xml文件)
<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url){
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++){
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}catch (er){
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}catch (er){
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="txtCDInfo">
<button οnclick="loadXMLDoc('/example/xmle/cd_catalog.xml')">获得 CD 信息</button>
</div>
</body>
</html>
7. jQuery操作Ajax
7.1. ajax()---执行异步 HTTP(Ajax) 请求。
ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。
最简单的情况下,$.ajax() 可以不带任何参数直接使用。
参数说明:
$.ajax({
options: Object,
async: Boolean,默认true,处理请求是否异步,false时为同步加载,这时发送请求会锁死浏览器,必须等请求完成后再会解锁。
beforeSend(XHR): function,用于在发送请求前修改XMLHttpRequest对象的函数,返回false时,取消本次请求。
cache: Boolean,默认true,dataType为script和jsonp时默认为false,判断请求加载的数据是否从缓存中获取,false时将不缓存此页面,即不存缓存中加载。
complete(XHR,TS): function,请求完成后执行的函数(请求失败或成功都调用),是一个ajax事件,参数: XMLHttpRequest 对象和一个描述请求类型的字符串。
contentType: String,默认”application/x-www-form-urlencoded”,即发送服务器的信息内容的编码类型
context: object,用于设置ajax相关回调函数的上下文,也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。
$.ajax({ url: "test.html", context: document.body, success: function(){$(this).addClass("done");
}};
data: String,发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]}转换为'&foo=bar1&foo=bar2'。
dataFilter: function,给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data是Ajax 返回的原始数据,type 是调用jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType: String,预期服务器返回的数据类型。如果不指定,jQuery 将自动根据HTTP 包 MIME 信息来智能判断,比如 XMLMIME 类型就被识别为 XML。在 1.4 中,JSON就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
· "xml": 返回XML 文档,可用 jQuery 处理。
· "html": 返回纯文本HTML 信息;包含的 script 标签会在插入 dom 时执行。
· "script": 返回纯文本JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的script标签来加载)
· "json": 返回JSON 数据 。
· "jsonp": JSONP 格式。使用JSONP 形式调用函数时,如"myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
· "text": 返回纯文本字符串
error: function,请求失败是调用次函数,自动判断xml和text,有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error","notmodified" 和 "parsererror"。这是一个Ajax 事件。
global: Boolean,是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或ajaxStop 可用于控制不同的 Ajax 事件。
ifModified:Boolean,仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 'etag' 来确定数据没有被修改过。
jsonp: String,为jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。
jsonpCallback:String,为jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。
username:String,用于响应HTTP 访问认证请求的用户名。
password: String,用于响应HTTP 访问认证请求的密码。
scriptCharset: String,只有当请求时 dataType 为"jsonp" 或 "script",并且type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。
success: Function,请求成功后的回调函数。参数:由服务器返回,并根据dataType 参数进行处理后的数据;描述状态的字符串。这是一个 Ajax 事件。
traditional:Boolean,如果你想要用传统的方式来序列化数据,那么就设置为 true。请参考工具分类下面的jQuery.param 方法。
timeout:Number,设置请求超时时间(毫秒)。此设置将覆盖全局设置。
type:String,默认值:"GET")。请求方式 ("POST" 或"GET"), 默认为"GET"。注意:其它 HTTP 请求方法,如 PUT 和DELETE 也可以使用,但仅部分浏览器支持。
url:String,默认值:当前页地址。发送请求的地址。
processData: Boolean,默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
xhr:Function,需要返回一个 XMLHttpRequest 对象。默认在 IE 下是ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。
});
注意:
如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用 jsonp 类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名,以便完成一个有效的 JSONP 请求。如果要指定回调函数的参数名来取代默认的 callback,可以通过设置$.ajax() 的 jsonp 参数。JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。如果指定了 script 或者 jsonp 类型,那么当从服务器接收到数据时,实际上是用了<script> 标签而不是XMLHttpRequest 对象。这种情况下,$.ajax()不再返回一个 XMLHttpRequest 对象,并且也不会传递事件处理函数,比如beforeSend。
7.2. .ajaxComplete()---AJAX请求完成时执行函数
Complete() 方法在 AJAX 请求完成时执行函数。它是一个 Ajax 事件。与 ajaxSuccess() 不同,通过 ajaxComplete() 方法规定的函数会在请求完成时运行,即使请求并未成功。
语法:
.jQueryajaxComplete(function(event,xhr,options))
event:包含event对象
xhr:包含XMLHttpRequest对象
options:包含ajax请求中使用的选项
eg:
当 AJAX 请求正在进行时显示“正在加载”的指示:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#txt").ajaxStart(function(){
$("#wait").css("display","block");
});
$("#txt").ajaxComplete(function(){
$("#wait").css("display","none");
});
$("button").click(function(){
$("#txt").load("/example/jquery/demo_ajax_load.asp");
});
});
</script>
</head>
<body>
<div id="txt"><h2>通过 AJAX 改变文本</h2></div>
<button>改变内容</button>
<div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;">
<img src='/i/demo_wait.gif' width="64" height="64" />
<br />加载中 ...
</div>
</body>
</html>
jQuery-Ajax参考手册:
http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
函数 | 描述 |
执行异步 HTTP (Ajax) 请求。 | |
当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 | |
当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。 | |
在 Ajax 请求发送之前显示一条消息。 | |
设置将来的 Ajax 请求的默认值。 | |
当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。 | |
当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 | |
当 Ajax 请求成功完成时显示一条消息。 | |
使用 HTTP GET 请求从服务器加载数据。 | |
使用 HTTP GET 请求从服务器加载 JSON 编码数据。 | |
使用 HTTP GET 请求从服务器加载 JavaScript 文件,然后执行该文件。 | |
从服务器加载数据,然后把返回到 HTML 放入匹配元素。 | |
创建数组或对象的序列化表示,适合在 URL 查询字符串或 Ajax 请求中使用。 | |
使用 HTTP POST 请求从服务器加载数据。 | |
将表单内容序列化为字符串。 | |
序列化表单元素,返回 JSON 数据结构数据。 |