什么是 AJAX ?
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
js中使用方式
1.创建XMLhttpRequest
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"); }
2.发送请求
xmlhttp.open("GET","demo_get.asp",true); 三个参数 为 提交方法,url,异步 ajax中应设置为true xmlhttp.send();
3.编写响应方式
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性:
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status | 200: "OK" 404: 未找到页面 |
jquery中应用 ajax最流行的是和jquery结合使用 jquery相当于把我们刚看到的过程封装起来,使用更简单
1.$(selector).load(URL,data,callback); 可以一个参数或多个参数 data是传输数据 callback是返回调用方法 相当于onreadystatechange
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); });
2jquery.ajax() 常用,里面可以放很多参数,具体参见文档
例子$.ajax({
type : "POST",
url : "xxxxxxx?diagId="+diagnosisId,
dataType : "json",
success : function(data) {
var txt = "";
for (var i = 0; i < data["obj"].length; i++) {
txt += "<li>" + data["obj"][i]["name"] + "</li>"
}
$(".chufang_anli").append(txt);
}
})
3.$("form").serializeArray() $("form").serialize()序列化表单
还有一些其他方法可参见 jquery ajax
http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp