【JavaScript】AJAX 使用总结

    AJAX 技术在互联网开发中是非常常用的，它的异步传输使用户对互联网软件的体验有了很大的提升，不仅如此，它还可以减轻服务器的压力，把一部分负担工作转移到客户端。
    对于 AJAX，最核心的一个对象是 XMLHttpRequest，所有的 AJAX 操作都离不开对这个对象的操作。

创建 XMLHttpRequest 对象

<script language="javascript">
var xmlHttp;
function createXmlHttpRequestObject(){
	if( window.ActiveXObject ){
		try{
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}catch( e ){
			xmlHttp = false;
		}
	}else{
		try{
			xmlHttp = new XMLHttpRequest();
		}catch( e ){
			xmlHttp = false;
		}
	}
	if( !xmlHttp ){
		alert("返回创建的对象或显示错误信息");
	}else{
		return xmlHttp;
	}
}
</script>

触发 JavaScript 函数

<input type="text" name="searchtxt" id="searchtxt" />
<input type="button" name="sBtn" id="sBtn" value="查询" οnclick="return showsimple();" />
<div id="rst"></div>

AJAX 五步曲

<script language="javascript">
function showsimple(){
	createXmlHttpRequestObject();
	var key = document.getElementById("searchtxt").value;
	if( key == '' ){
		alert("查询关键字不能为空！");
		return false;
	}
	xmlHttp.onreadystatechange = StatHandler;	// 判断URL调用的状态值并处理
	xmlHttp.open("GET", "search.php?key="+key, false);	
	xmlHttp.send(null);
}

function StatHandler(){
	if( xmlHttp.readyState == 4 && xmlHttp.status == 200 ){
		document.getElementById("rst").innerHTML = xmlHttp.responseText;
	}
}
</script>

详细介绍：
XMLHttpRequest 对象的相关方法及常用属性
判断 URL 调用的状态值并处理：xmlHttp.onreadystatechange = StatHandler;
 每次状态改变都会触发这个事件处理器，通常调用一个 JavaScript 方法。
 状态：XMLHttpRequest.readyState  0:未初始化 1:正在加载 2:已加载 3:交互中 4:完成
 返回服务器的 HTTP 状态码：200:成功 404:文件未找到 500:内部服务器错误
 服务器响应字符串：XMLHttpRequest.responseText
打开请求：XMLHttpRequest.open(传递方式，地址，是否异步请求)
为请求的 HTTP 头设置值：xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;")
发送请求：XMLHttpRequest.send(发送的数据)