也就是說ajax和我們在瀏覽器位址列，或者通過form表單傳送請求一樣，ajax也可以傳送請求，但是二者有很大的不同，ajax不用重新整理介面，傳送非同步請求。
① 建立非同步物件
② 設定url
xhr.open('get',"index.php",true);
// 引數1：傳送請求方式
// 引數3: 請求是同步還是非同步。true為非同步，預設為true
③ 傳送請求
xhr.send();④ ⑤ 監聽事件-->處理響應
xhr.onreadystatechange = function ()
else
}}
由於ie低版本瀏覽器中沒有xmlhttprequest物件，而是activexobject物件
處理方式：
//處理相容問題
/*傳參的格式 封裝 將傳入的物件，轉為url 拼接的方式*/
function json2str(data)
//將陣列轉為固定格式的字串
return arr.join('&'); //取出陣列中的每一項，然後用&符號連線
}function ajaxget(url,data,success,error)
else
xhr.open("get",url+'?'+data,true);
xhr.send();
xhr.onreadystatechange = function ()
else }}
}ajaxget('01-get.php',json2str(data),function (res) ,function (code) )
處理ie中快取和編碼問題，
① 在ie瀏覽器下，如果傳送乙個相同url請求，它會通過本地快取獲取資料，即只有乙個結果，不能獲取到最新的資料
② 在ie中只能出現英文、數字、字母、下劃線、asiic碼，不能出現中文，韓文....它不會自動的進行編碼，所有需要手動的編碼
處理方案，對傳入的引數進一步的進行處理
① 給傳入的url新增乙個隨機因子，也可以通過加入時間戳的方式，這樣不會出現相同的url請求
② 對傳入的引數可能出現中文的地方進行 encodeurl編碼
function json2str(data)
//將陣列轉為固定格式的字串
return arr.join('&'); //取出陣列中的每一項，然後用&符號連線
}
//1 建立非同步請求物件
//2 設定url
xhr.open('post','post.php',true);
// 設定請求頭,請求頭的位置要放在open 和 send之間
//3 傳送請求
xhr.send("name=zhang&age=12");
//4 監聽響應 -->處理響應資料
xhr.onreadystatechange = function ()
else
}}
post請求的注意點：
① 不是拼接到url中，引數必須通過send方 法傳給伺服器
//封裝的ajax請求方法
function ajax(type,url,data,timeout,success,error)
else
//處理引數
var str =json2str(data);
//2 設定url
if (type =='get')
else
//4 監聽響應 –>處理響應資料
xhr.onreadystatechange = function ()
else }}
//超時處理
if(timeout),timeout)}}
// 參入資料報裝
function json2str(data)
//將陣列轉為固定格式的字串
return arr.join('&'); //取出陣列中的每一項，然後用&符號連線
}var data =
//傳送乙個 ajax請求
ajax('post','01-get.php',data,2000,function (res) ,function (e) )
此處封裝兩大改動：
① 將 post 和 get請求封裝在一起，通過type 引數來指定型別
② 設定了請求的延時，當網路不好的情況下，不然使用者一直等下去，採用的是定時器來設定的
問題：通過這種方式，已經可以實現基本的ajax請求，但是它仍然存在很多缺陷：
① 使用這個方法的時候，我需要看封裝的方法，這樣才能知道要傳入幾個引數，而且參入引數的位置是什麼，這樣十分的不利於提高效率
② 容錯性差，有的引數是必須傳的引數，而有的引數可有可無，都沒有對他們進行容錯處理。
下面我們再一次封裝這個方法來解決存在的這兩個問題
function json2str(json)
// 2.將陣列轉換為字串返回
return arr.join("&");
}function ajax(options) ;
// 2.判斷有沒有url
if(!options.url)
// 3.設定預設值
options.type = options.type || "get";
options.timeout = options.timeout || 0;
options.data = options.data || {};
// 4.將引數轉換為固定格式字串
var str = json2str(options.data);
// 1.建立非同步物件
// 4.註冊事件
xhr.onreadystatechange = function () else}}
// 6.超時處理
if(options.timeout), options.timeout);}}
//呼叫 ajax傳送請求
ajax(,
"timeout":0,
"success":function (res) ,
"error":function (e)
});
哈哈，花了幾個小時，希望對大家有幫助！
ajax傳送非同步請求的步驟
1.第一步 得到xmlhttprequest ajax要學習乙個物件 xmlhttprequest 編寫建立xmlhttprequest物件的函式 得到xmlhttprequest 2.第二步 開啟與伺服器的連線 xmlhttp.open 用來開啟與伺服器的連線，它需要三個引數 請求方式 可以是ge...
Ajax傳送非同步請求（四步操作）
ajax其實只需要學習乙個物件 xmlhttprequest，如果掌握了 它，就掌握了ajax。得到xmlhttprequest 大多數瀏覽器支援 var xmlhttp new xmlhttprequest 編寫建立xmlhttprequest 非同步物件 物件的函式 xmlhttp.open 用...
從發請求到AJAX到同源政策
什麼是ajax？簡單說就是用js發請求用js處理響應 xml格式的字串太麻煩了，目前使用json 寫乙個ajax mybutton.addeventlistener onclick function else if request.status 400 題外話，怎麼看一句執行用了多長的時間？var ...