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;i<len;i++) {
				try{
					var xhr = new ActiveXObject(versions[i]);//针对IE7以下版本
					arguments.callee.activeXString=versions[i];
					return xhr;
				}catch(e){
					//TODO handle the exception
				}
			}
		}
		return new ActiveXObject(arguments.callee.activeXString);
	 }else{
	 	throw new Error("No XHR object available");
	 }
}

2.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表示