JavaScript学习笔记（六）之使用Ajax

十四、Ajax程序

Ajax首先需要向服务器发送一个请求，然后调用一个服务，接着返回数据。它是在同一个Web页面文档中处理这些活动的。客户端需指定一个在请求状态发生改变时调用的函数。该函数将检查请求的状态，如果请求处理完成，并没有发现服务器端出现错误，那将对服务器返回的数据进行处理并以某种形式输出到页面上。

1.XMLHttpRequest对象（XHR对象）

异步通信是当发送请求时，客户端并不需要停止、保持，等待服务器端的处理完成，为管理异步通信，需要XMLHttpRequest。基于Ajax和XMLHttpRequest的请求可以视为与传统表单提交类似的功能，它们之间的区别就是Web页面无需重新载入。

//创建XHR对象。封装复用函数。
function getXmlHttp () {
	var xmlhttp = null ;
	if(window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest();
	}else{
		try{
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){
				return xmlhttp;
			}
		}
	}
	return xmlhttp;
}

解决了跨浏览器兼容问题，该函数要么为xmlhttp设置正确的值，要么将其设为null以表示未创建成功。

XHR对象方法	方法语法
open(method,url[,async,username,password])	用来打开到指定URL的连接。有三个可选参数：async用来将请求设成异步（true默认）或同步（false）；username和password用来指定服务器的用户名及密码。
setRequestHeader(label,value)	为请求的标头添加标签
send(content)	核心方法。用来发送该请求，同时附上相关联的数据。
getAllResponseHeaders()	以字符串形式返回HTTP响应的标头（激活超时值、content-type、服务相关信息和日期信息）
getResponseHeader(label)	返回指定HTTP响应的标头。
abort()	用来终止当前请求。

XHR对象属性	用途
onreadystatechange	当XHR对象的状态发生改变时调用回调函数
readyState	0（请求未初始化）1（开放请求）2（请求已发送）3（正在接收相应）4（响应完成载入）
responseText	文本格式的响应
reeponseXML	XML格式的响应
status	返回请求状态（404、500、200）
statusText	以文字表示的请求状态

//准备并发送XHR请求(GET)
function populateList () {
	var state = document.getElementById("idname").value;
	var url = "somephp.php?state="+state;  //GET类型URL后面必须跟上所需的相关参数
	//如果不支持xmlHttpObj
	if (!xmlHttpObj) {
		xmlHttpObj = getXmlHttp();
	}if (!xmlHttpObj) {return;}
	xmlHttpObj.open('GET',url,true);
	xmlHttpObj.onreadystatechange = getresult;
	xmlHttpObj.send(null);      //send为null
}

//准备并发送XHR请求(POST)
function populateList () {
	var state = document.getElementById("idname").value;
	var url = "somephp.php";
	var qry = "state="+state;
	//如果不支持xmlHttpObj
	if (!xmlHttpObj) {
		xmlHttpObj = getXmlHttp();
	}if (!xmlHttpObj) {return;}
	xmlHttpObj.open('POST',url,true);
	xmlHttpObj.onreadystatechange = getresult;
	xmlHttpObj.setRequestHeader("content-type","application/x-www-form-urlencoded")
	xmlHttpObj.send(qry);     //send方法改变
}

XHR对象支持不同的请求方法，但是Ajax应用程序主要只用POST和GET方法。POST方法用来发送更新数据；GET方法用来检索访问数据。

//处理请求，返回结果
function getresult () {
	if (xmlHttpObj.readyState == 4 && xmlHttpObj.status == 200) {
		document.getElementById("result").innerHTML = xmlHttpObj.responseText;
	} else if(xmlHttpObj.readyState == 4 && xmlHttpObj.status ！= 200){
		document.getElementById("result").innerHTML = "Error!请将请求的服务器端页面移到其他位置并改为其他名称";
	}
}

该响应以文本格式返回，所以需要XHR对象的responseText属性来获取它。返回数据的格式还有XML和JSON。

注：在实际的应用程序开发时，特别是要添加这些Ajax功能时，应该考虑使用外部库（Prototype、Dojo、jQuery）

十五、Ajax数据

（一）XML格式的Ajax结果

当使用XML格式时，服务器端返回的响应内容是MIME类型的text属性，否则它不会出现在XHR对象的responseXML容器中。

//创建XHR对象。封装复用函数。
function getXmlHttp () {
	var xmlhttp = null ;
	if(window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest();
	}
	//XML MIME类型
	if(xmlhttp.overrideMimeType){
		xmlhttp.overrideMimeType("text/xml");
	}else{
		try{
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}catch(e){
				return xmlhttp;
			}
		}
	}
	return xmlhttp;
}

（二）JSON格式的Ajax结果

JSON是一种”轻量级的数据交换格式“，可以把服务器端结构转化成在实际中可以立即使用的JS对象。

//处理JSON格式的数据
function getresult () {
	if (xmlHttpObj.readyState == 4 && xmlHttpObj.status == 200) {
		eval("var response = (" + xmlHttpObj.responseText+")");
		for (var i = 0; i < response.length; i++) {
			var name = response[i].title;
			var value = response[i].value;
		}
	} else if(xmlHttpObj.readyState == 4 && xmlHttpObj.status ！= 200){
		document.getElementById("result").innerHTML = "Error!请将请求的服务器端页面移到其他位置并改为其他名称";
	}
}

JSON对象（用来创建和解析JSON格式的数据）

JSON对象的静态方法	用途
JSON.parse(xmlHttpObj.responseText)	基于JSON格式的指定字符串创建JS对象
JSON.stringify(myObject,function)	将JS对象序列化成JSON格式的文本

var new objFormattedAsJson = JSON.stringify(myObject,function(key,value){
	//过滤和转化其结果
	if (typeof value ==='number' && !isFinite(value)){
		return String(value);
	}
	return value;
})

//准备并发送XHR请求(POST)
function populateList () {
	var state = encodeURIComponent(document.getElementById("idname").value）;    //注意改变
	var url = "somephp.php";
	var qry = "state="+state;
	//如果不支持xmlHttpObj
	if (!xmlHttpObj) {
		xmlHttpObj = getXmlHttp();
	}if (!xmlHttpObj) {return;}
	xmlHttpObj.open('POST',url,true);
	xmlHttpObj.onreadystatechange = getresult;
	xmlHttpObj.setRequestHeader("content-type","application/x-www-form-urlencoded")
	xmlHttpObj.send(qry);     //send方法改变
}

//处理JSON格式的数据
function getresult () {
	if (xmlHttpObj.readyState == 4 && xmlHttpObj.status == 200) {
		var response = JSON.parse(xmlHttpObj.responseText);     //注意改变
		for (var i = 0; i < response.length; i++) {
			var name = response[i].title;
			var value = response[i].value;
		}
	} else if(xmlHttpObj.readyState == 4 && xmlHttpObj.status ！= 200){
		document.getElementById("result").innerHTML = "Error!请将请求的服务器端页面移到其他位置并改为其他名称";
	}
}

JavaScript学习笔记（六）之使用Ajax

猜你喜欢