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(发送的数据)