手寫一個原生Ajax
阿新 • • 發佈:2019-01-09
AJAX = 非同步 JavaScript 和 XML。
AJAX 是一種用於建立快速動態網頁的技術。
通過在後臺與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。
傳統的網頁(不使用 AJAX)如果需要更新內容,必需過載整個網頁面。
有很多使用 AJAX 的應用程式案例:新浪微博、Google 地圖、開心網等等。
function createXHR(){
if(typeof XMLHttpRequest != "undefined"){ // 非IE6瀏覽器return new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){ // IE6瀏覽器
var version = [
"MSXML2.XMLHttp.6.0",
"MSXML2.XMLHttp.3.0",
"MSXML2.XMLHttp",
];
for(var i = 0; i < version.length; i++){
try{
return new ActiveXObject(version[i]);
}catch(e){
//跳過
}
}
}else{
throw new Error("您的系統或瀏覽器不支援XHR物件!");
}
}
// 轉義字元
function params(data){
var arr = [];
for(var i in data){
arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
}
return arr.join("&");
}
// 封裝ajax
function ga_ajax(obj){
var xhr = createXHR();
obj.url = obj.url + "?rand=" + Math.random(); // 清除快取
obj.data = params(obj.data); // 轉義字串
if(obj.method === "get"){ // 判斷使用的是否是get方式傳送
obj.url += obj.url.indexOf("?") == "-1" ? "?" + obj.data : "&" + obj.data;
}
// 非同步
if(obj.async === true){
// 非同步的時候需要觸發onreadystatechange事件
xhr.onreadystatechange = function(){
// 執行完成
if(xhr.readyState == 4){
callBack();
}
}
}
xhr.open(obj.method,obj.url,obj.async); // false是同步 true是非同步
if(obj.method === "post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(obj.data);
}else{
xhr.send(null);
}
// xhr.abort(); // 取消非同步請求
// 同步
if(obj.async === false){
callBack();
}
// 返回資料
function callBack(){
// 判斷是否返回正確
if(xhr.status == 200){
obj.success(xhr.responseText);
}else{
obj.Error("獲取資料失敗,錯誤代號為:"+xhr.status+"錯誤資訊為:"+xhr.statusText);
}
}
}