1.Ajax概念
2.Ajax老的一套模板
3.jQuery中Ajax的应用
4.Json
5.Ajax例子
1.Ajax：异步传输
普通同步传输：你传输，我看着你传，你传完了我再做其他事情
异步传输：你传你的，我做我的事情，传输完了告诉我一声
Ajax：允许浏览器与服务器通信而无需做到刷新当前页面的技术
什么技术可以不刷新页面就可以通信？
(1).Flash (2).Java Applet (3).框架 (4).隐藏iframe (5).XMLHttpRequest
2.Ajax老的一套模板
(1).创建XMLHttpRequest对象
(2).服务器端对客户端进行相应
(3).客户端与服务器端建立连接
(4).客户端向服务器端发送请求
(1).创建XMLHttpRequest对象
function ajaxFunction(){
var xmlHttp;
try{
xmlHttp = new ActiceXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp = newActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
(2).服务器端对客户端进行相应
var xhr = ajaxFunction();
xhr.onReadyStateChange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200 || xhr.status == 304){
var data = xhr.responseText;
}
}
}
注：
^1.readyState表示Ajax属性：
0：未初始化
1：正在加载。 open()方法已经调用，send()方法还没调用
2：加载完毕。 send()方法已经调用，请求开始
3：交互中 服务器正在发送响应
4：完成。 响应发送完成
^2.xhr.status：常用状态码及其含义
404：找不到页面
500：服务器错误
403：禁止访问
304：源文件没有修改
200：正常
^3.xhr.responseText：服务器发回的响应结果，字符串
xhr.responseXML：服务器发回的相应结果，XML对象
(3).客户端与服务器建立连接
xhr.open(method,url,asynch);
method：GET,POST
asynch：请求是否要异步，一般默认异步true
(4).客户端向服务器端发送请求
^1.GET方法
xhr.send(null);
^2.POST方式
xhr.sendRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("a=7");
3.jQuery中Ajax的应用
上面的模板太麻烦了，jQuery中做了简化：
load();
$.get();
$.post();
4.Json
(1).Ajax传输的工具有三种：XML,HTTP,JSON
XML:解析复杂
HTTP:不是标准DOM,而且不可与拆分成多个部分
(2).Json：简单数据格式，js原生支持
^1.格式：[{名称1:值1,名称2:值2},{名称3:值3,名称4:值4}]
5.Ajax实例
$().ready(function(){
$("#province").change(function(){
$("#ciity option:not(:first)").remove();
var prov = $(this).val();
$.post("cities.xml",function(data){
var $xmlProv = $(data).find("province[name="+prov+"]");
var $cities = $xmlProv.find("city");
$cities.each(function(i,city){
var $opt = $("<option></option>");
$opt.text($(city).text());
$opt.appendTo($("#city"))
});
},"xml");
});
});