原生JavaScript實現(xiàn)Ajax的方法
更新時間：2016年04月07日 16:43:44 投稿：lijiao
這篇文章主要介紹了原生JavaScript實現(xiàn)Ajax的幾種方法，感興趣的小伙伴們可以參考一下
首先為大家分享了原生JavaScript實現(xiàn)Ajax代碼，供大家參考，具體內容如下
var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
//主流瀏覽器提供了XMLHttpRequest對象
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
//低版本的IE瀏覽器沒有提供XMLHttpRequest對象
//所以必須使用IE瀏覽器的特定實現(xiàn)ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
console.log(xhr.readyState);
if (xhr.readyState === 3 && xhr.status === 200) {
//獲取成功后執(zhí)行操作
//數(shù)據(jù)在xhr.responseText
console.log(xhr.responseText);
}
};
xhr.open("get", "data.php", true);
xhr.send("");
下面和大家分享幾種利用javascript實現(xiàn)原生ajax的方法。
實現(xiàn)ajax之前必須要創(chuàng)建一個 XMLHttpRequest 對象。如果不支持創(chuàng)建該對象的瀏覽器，則需要創(chuàng)建 ActiveXObject，具體方法如下：
var xmlHttp;
function createxmlHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
（1）下面使用上面創(chuàng)建的xmlHttp實現(xiàn)最簡單的ajax get請求：
function doGet(url){
// 注意在傳參數(shù)值的時候最好使用encodeURI處理一下，以防出現(xiàn)亂碼
createxmlHttpRequest();
xmlHttp.open("GET",url);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
alert('success');
} else {
alert('fail');
}
}
}
（2）使用上面創(chuàng)建的xmlHttp實現(xiàn)最簡單的ajax post請求：
function doPost(url,data){
// 注意在傳參數(shù)值的時候最好使用encodeURI處理一下，以防出現(xiàn)亂碼
createxmlHttpRequest();
xmlHttp.open("POST",url);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(data);
xmlHttp.onreadystatechange = function() {
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
alert('success');
} else {
alert('fail');
}
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助。
您可能感興趣的文章:
相關文章
這篇文章主要介紹了JavaScript 實現(xiàn)下雪特效的示例代碼，幫助大家利用JavaScript制作特效，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了微信小程序之onLaunch與onload異步問題詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
初學者可能對Javascript的定時器有誤解，認為它們是線程，其實Javascript是運行于單線程中的，而定時器僅僅是計劃在未來的某個時間執(zhí)行，而具體的執(zhí)行時間是不能保證的，因為在頁面的生命周期中，不同的時間可能有其它代碼在控制Javascript的里進程。2015-05-05
比較不錯的分離式js代碼，獲取element的值，大家注意下，運行后的效果是32之類的值，其實主要是沒有強制轉換成數(shù)字，所以大家可以加上2008-05-05
今天的項目中碰到了一個亂碼問題，從JS里傳URL到服務器，URL中有中文參數(shù)，服務器里讀出的中文參數(shù)來的全是“？”，查了網上JS編碼相關資料得以解決。2009-09-09
下面小編就為大家?guī)硪黄猨s方法數(shù)據(jù)驗證的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了純JavaScript實現(xiàn)的分頁插件,涉及javascript結合php動態(tài)實現(xiàn)分頁效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
javascript 一個自定義長度的文本自動換行的函數(shù)
javascript 一個自定義長度的文本自動換行的函數(shù)...2007-08-08
響應式導航條就是可以在不同的設備下查看不同的效果。這篇文章主要介紹了BootStrap響應式導航條實例介紹的相關資料，小編認為本文介紹的非常的不錯，特此分享給大家，供大家參考2016-05-05
JS獲取下拉列表所選中的TEXT和Value的實現(xiàn)代碼
本篇文章主要是對JS獲取下拉列表所選中的TEXT和Value的實現(xiàn)代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01