ajax原理總結(jié)附簡單實例及其優(yōu)點

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
html>
head>
title>/title>
meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
script type="text/javascript">
function ajax() {
var xmlHttp;
// 依據(jù)對象判斷，而不是依據(jù)瀏覽器
if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();//mozilla瀏覽器
}else if(window.ActiveXObject){
try{
xmlHttp=new ActiveXObject("Msxmlx2.XMLHTTP"); //IE老版本
}catch(e){}
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本
}catch(e){}

if(!xmlHttp){
window.alert("不能創(chuàng)建XMLHttpRequest對象實列");
return false;
}
}

if (!xmlHttp) {
alert("創(chuàng)建XMLHttpRequest對象失??！");
return false;
}

xmlHttp.open('POST', 'index.php?get_a=2get_b=3', false);
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=UTF-8;');
xmlHttp.send("post_a=1post_b=2");
xmlHttp.onreadystatechange = function() {
alert(xmlHttp.readyState);
}
if(xmlHttp.readyState == 4){ //判斷對象狀態(tài)
var content_obj = document.getElementById("content");
content_obj.innerHTML = "正在處理數(shù)據(jù)...";
if(xmlHttp.status == 200){ //信息已經(jīng)成功返回，開始處理信息
var returnStr = xmlHttp.responseText;
content_obj.innerHTML = returnStr;
}else{ //頁面不正常
content_obj.innerHTML = "您所請求的頁面存在異常！";
}
}
}
/script>
/head>
body>
input type="button" value="ajax" onclick="ajax();" />
div id="content">ajax內(nèi)容顯示區(qū)/div>
/body>
/html>