首頁 > web前端 > js教程 > 主體

幾種javascript實作原生ajax的方法

小云云
發布: 2017-11-18 10:16:03
原創
2731 人瀏覽過

在基於資料的應用程式中,使用者需求的資料如聯絡人列表,可以從獨立於實際網頁的服務端取得並且可以被動態地寫入網頁中,給緩慢的Web應用程式體驗著色使之像桌面應用一樣。自從js有了各種框架之後,例如jquery,使用ajax已經變的相當簡單了。但有時候為了追求簡潔,可能專案中不需要載入jquery這種龐大的js插件。但要使用到ajax這種功能該如何辦呢?以下和大家分享幾種利用javascript實作原生ajax的方法。

首先實作ajax之前必須要建立一個 XMLHttpRequest 物件的。如果不支援建立該物件的瀏覽器,則需要建立ActiveXObject,具體方法如下:

var xmlHttp;
function createxmlHttpRequest(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest)
xmlHttp=new XMLHttpRequest();
}
登入後複製

下面使用上面建立的xmlHttp實作最簡單的ajax get請求:

function doGet(url){//注意在传参数值的时候最好使用encodeURI处理一下,防止乱码
createxmlHttpRequest();
xmlHttp.open("GET",url);
xmlHttp.send(null);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
alert('success');
}else{
alert('fail');
}
}
}
登入後複製

使用上面建立的xmlHttp實作最簡單的ajax post請求:

function doPost(url,data){//注意在传参数值的时候最好使用encodeURI处理一下,防止乱码
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');
}
}
}
登入後複製

下面再分享一個從網上看到的模擬jquery的$.ajax方法的封裝:

var createAjax=function(){
   var xhr=null;
   try{//IE系列浏览器
       xhr=new ActiveXObject("microsoft.xmlhttp");
   }catch(e1){
       try{//非IE浏览器
           xhr=new XMLHttpRequest();
       }catch(e2){
           window.alert("您的浏览器不支持ajax,请更换!");
       }
   }
   return xhr;
};
var ajax=function(conf){
   var type=conf.type;//type参数,可选 
   var url=conf.url;//url参数,必填 
   var data=conf.data;//data参数可选,只有在post请求时需要 
   var dataType=conf.dataType;//datatype参数可选 
   var success=conf.success;//回调函数可选
   if(type==null){//type参数可选,默认为get
       type="get";
   }
   if(dataType==null){//dataType参数可选,默认为text
       dataType="text";
   }
   var xhr=createAjax();
   xhr.open(type,url,true);
   if(type=="GET"||type=="get"){
       xhr.send(null);
   }else if(type=="POST"||type=="post"){
       xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
       xhr.send(data);
   }
   xhr.onreadystatechange=function(){
       if(xhr.readyState==4&&xhr.status==200){
           if(dataType=="text"||dataType=="TEXT"){
               if(success!=null){//普通文本
                   success(xhr.responseText);
               }
           }else if(dataType=="xml"||dataType=="XML"){
               if(success!=null){//接收xml文档
                   success(xhr.responseXML);
               }
           }else if(dataType=="json"||dataType=="JSON"){
               if(success!=null){//将json字符串转换为js对象
                   success(eval("("+xhr.responseText+")"));
               }
           }
       }
   };
};
该
登入後複製

該方法使用也很簡單,和jquery的$.ajax方法一樣,不過沒那麼多的參數。只是簡單的實作了一些基本的ajax功能。使用方法如下:

ajax({
    type:"post",//post或者get,非必须
    url:"test.jsp",//必须的
    data:"name=dipoo&info=good",//非必须
    dataType:"json",//text/xml/json,非必须
    success:function(data){//回调函数,非必须
        alert(data.name);
    }
});
登入後複製

以上這幾種javascript實作原生ajax的方法你們學會了嗎?希望對大家有幫助。

相關推薦:

ajax如何跳到新的jsp頁面的實作方法

jQuery使用ajax讀取本機json文件的案例

如何解決多個ajax頁面請求,頁面loading阻塞問題

以上是幾種javascript實作原生ajax的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板