JavaScript之AJAX基础
1、AJAX简述
Ajax技术是一种浏览器与服务器间的通信技术，能够向服务器请求额外的数据而无须卸载页面，其技术核心是XMLHttpRequest(XHR)对象。
2、XHR对象
IE7、Firefox、Opera、Chrome、Safari都支持原生XHR对象，在这些浏览器中创建XHR对象方式为：var xhr=new XMLRequest();IE7之前的版本有所不同。以下是各种浏览器兼容的创建XHR的方法。
function creatXHR () {
if (typeof(XMLHttpRequest)!="undefined") {
return new XMLHttpRequest(); //针对IE7及四大浏览器
}else if (typeof ActiveXObject !="undefined") {
if (typeof arguments.callee.activeXString!="string") {
var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
for (var i=0,len=versions.length;i2.1 XHR用法
1 调用open()方法
xhr.open(“get”,”example.jsp”,false);
注意：1 URL是相对于当前页面（也可使用绝对路径）
2 该方法并不会真发送请求，只是启动一个请求准备发送
2 调用send()方法
xhr.seng(null);
注意：该方法接受一个参数，即要作为请求主体发送的数据，若不需要通过请求主体发 送数据，则必须传入null。
3 检查响应状态
if ((xhr.status>=200&&xhr.status<300)||xhr.status==304) {//不写200是为了兼容
alert(xhr.statusText);
}else{
alert("Request was unsuccessful:"+xhr.status);
}
false 是指请求同步，即JS代码会等到服务器响应后再继续执行。收到响应后，响应的 数据会自动填充XHR对象的属性，相关属性有：
responseText：作为响应主体被返回的文本；
responseXML：若响应的内容类型是“text/xml”或“application/xml”，则这个属性中 将保存包含着响应数据的XML DOM文档；
status：响应的HTTP状态;
statusText：HTTP状态的说明
HTTP状态代码是200时表示响应成功，304表示请求资源没有改变，即可以用浏览器 中缓存的版本。
2.2 HTTP头部信息
XHR对象提供了操作两种头部（请求和响应）信息的方法
1 设置请求响应头部setRequestHeader(“头部字段名称”，“头部字段值”);注意该方法 必须在open之后，send之前调用；
2 取得响应头部信息getResponseHeader(“头部字段名称”);也可用方法getAllResponseHeaders()返回包含所有头部信息的长字符串，一个头部字段占一行
2.3 Get请求
如要向url中添加查询字符串参数，那么该字符串必须经过正确的编码(encodeURIComponent)才行，否则会出现查询字符串格式问题。
function addURIComponent (url,name,value) {
url+=(url.indexOf("?")==-1?"?":"&");
url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
return url;
}
2.4 POST请求
当使用post方式提交请求时，send方法的参数为要传入给服务器的数据
xhr.open(“post”,”example.jsp”,true);
xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencodede”);
var form=document.getElementById(“user-info”);
xhr.send(serialize(form));
3 JSON
3.1 JSON表示对象和数组的语法
对象{
“name”:”wang”,
“age”:20
}
对象中必须给属性加双引号，这也是跟JS不同的地方
数组[1,2,”color”]
数组中的值可以是字符串，数值，布尔值，null，对象或其他数组
若是自己编写代码对JSON求值，最好将输入的文本放在一对圆括号中，如：
Var object=eval(“(”+jsontext+”)”);
3.2 在AJAX中使用JSON
3.2.1 从服务器读取数据
Crockford发明了JSON并维护着一个JSON库。在库中有一个全局JSON对象，该对象的方法parse()接受两个参数：JSON文本和一个可选的过滤函数，当JSON文本有效时，该函数返回传入数据的一个对象表示。
var jsontext="{\"name\":\"wang\",\"age\":\"21\"}";
var object=JSON.parse(jsontext,function (key,value) {
switch (key){
case "age": return value+1;
case "name": return value;
}
});
alert(object.age);
3.2.2 传数据到服务器
发送数据时，一般会把JSON放到POST请求主体中，需要使用到的方法是stringify().该方法有三个参数：要序列化的对象、可选的替换函数（用于替换未受支持的JSON值）和可选的缩进说明符。
var json=JSON.stringify([new Function()],function(key,value){
if (value instanceof Function) {
return "(function)";
} else{
return value;
}
});
alert(json); //"[(funtion)]"
注意并不是所有的JavaScript值都可以使用JSON表示，例如函数和undefined值无法通过JSON表示