ajax初探

Ajax可以动态，异步的更新网页内容，不需要通过表单提交数据后跳转新页面实现更新（无刷新式更新），使页面更友好，性能更高。

优点：支持异步请求。

Ajax的核心是JavaScript的XmlHttpRequest对象，通过XmlHttpRequest对象向服务器发送异步请求。

XmlHttpRequest对象的方法和属性：

onreadystatechange：每次状态改变时触发

status：从服务器返回的状态码（比如403：未找到，200已就绪）

ResponseText:服务器相应的字符串

ResponseXML：从服务器进程返回的DOM兼容的文档数据对象

 

ReadyState:XmlHttpRequest对象的状态值

0表示：对象已创建，但没有初始化（没有调用XmlHttpRequest对象的open方法）

1表示：对象已经初始化（调用XmlHttpRequest对象的open方法，但没有调用send方法）

2表示：数据已发送但是没有返回响应（调用send方法）

3表示：数据传输中，服务器返回头部数据

4表示：数据传输完成（此时通过responseText或responseXML获取完整的响应数据）

 

getResponseHeader(key)获取服务器的响应头

setRequestHeader(key,value)设置请求头

open(String method,String url,boolean asyc,String username,String password)

初始化XmlHttpRequest对象并建立连接

参数：

method：请求服务器的方式（get,post,delete,put）

url:XmlHttpRequest对象发送请求的URL地址

asyc：是否异步发送请求

最后两个参数：对要求认证的服务器发送用户名和密码

send()

向服务器发送请求

getResponseAllHeader()

获取响应头

abort()

终止请求

 

代码示例：

function initAjax() {
	var ajaxRequest;
	try{
		ajaxRequest = new XMLHttpRequest();
	}catch(e){
		try{
			ajaxRequest = new ActionObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				ajaxRequest = new ActiveObject("Microsoft.XMLHTTP");
			}catch(e){
				alert("不支持ajax")
				return false;
			}
		}

	}
	ajaxRequest.onreadystatechange=function(){
		if (ajaxRequest.readyState==0) {
		}
		if (ajaxRequest.readyState==1) {
		}
		if (ajaxRequest.readyState==2) {
		}
		if (ajaxRequest.readyState==3) {
		}
		if (ajaxRequest.readyState==4) {
			var ajaxDisplay = document.getElementById('ajaxDiv');
			alert('onReadyStateChange')
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	var name = document.getElementById('name').value;
	var password=document.getElementById('password').value;
	var sex = document.getElementById('sex').value;
	var url = "http://192.168.218.144/Test/SubmitDatas?name="+name+"&password="+password+"&sex="+sex;
	ajaxRequest.open("GET",url,true);
	ajaxRequest.send(null);
}