要完整實現一個Ajax同步調用和局部刷新，通常需要以下幾個步驟：
1. 創建XMLHttpRequest對象，也就是創建一個異步調用對象
2.創建一個新的HTTP請求，並指定該HTTP請求的方法，URL
3.設置響應HTTP請求狀態變化的函數
話不多說，代碼伺候：
創建XMLHttpRequest對象：
// 封裝通用的XMLHttpRequest對象 ，兼容各個版本
function createXHR(){
// 判斷瀏覽器是否將XMLHttpRequest最為本地對象實現，正對IE7，firefox,opera等
if(typeof XMLHttpRequest != 'undefine'){
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefine'){
// code for IE6,IE5...
var xmlArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
var len = xmlArr.length, xhr;
for(var i=0;i<len;i++){
try{
// 創建XMLHttpRequest對象
xhr = new ActiveXObject(xmlArr[i]);
break;
}catch(ex){
}
}
return xhr;
}else{
throw new Error('No XHR Ojbect available.');
}
}
也可以簡寫：
function crateXHR(){
var xmlHttp;
if(windown.XMLHttpRequest){
//code for IE7+, Firefox, Chrome,Opera, Safari
xmlHttp = new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlHttp = new ActiveXObject('Microsoft.XMLHttp');
}
}
完整代碼：
<html>
<head>
<title>ajax</title>
</head>
<body>
<div id="banner" class="banner">
</div>
<script type="text/javascript">
// 封裝通用的XMLHttpRequest對象 ，兼容各個版本
function createXHR(){
// 判斷瀏覽器是否將XMLHttpRequest最為本地對象實現，正對IE7，firefox,opera等
if(typeof XMLHttpRequest != 'undefine'){
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefine'){
// code for IE6,IE5...
var xmlArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
var len = xmlArr.length, xhr;
for(var i=0;i<len;i++){
try{
// 創建XMLHttpRequest對象
xhr = new ActiveXObject(xmlArr[i]);
break;
}catch(ex){
}
}
return xhr;
}else{
throw new Error('No XHR Ojbect available.');
}
}
// XMLHTTPRequest對象
var xhr = createXHR(), data =null;
// 響應XMLHttpRequest對象狀態變化的函數,onreadystatechange在readstatechagne屬性發生改變時觸發
xhr.onreadystatechange = function(){
if(xhr.readystate==4){
if((xhr.status>=200 && xhr.status<300) || xhr.status === 304){
// 獲得服務器返回的數據
// console.log(xhr.responseText);
// responseText返回的數據是string類型
// data = eval("("+xhr.responseText+")");
data = JSON.parse(xhr.responseText)
// 渲染數據到頁面
renderDataToDom();
}
}
}
// 創建請求
// open(method,url,async)方法有三個參數
// method 請求方式，url 要請求的文件在服務器上的位置 async 請求是同步還是異步
xhr.open('get','./server.json',true);
// 發送請求
xhr.send(null);
// xhr.send({user:'zhangsan',id:6})
// 設置http頭部信息
// xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
function renderDataToDom(){
}
</script>
</body>
</html>