ホームページ > 記事 > ウェブフロントエンド > ネイティブ Ajax を実装するためのいくつかの JavaScript メソッド

ネイティブ Ajax を実装するためのいくつかの JavaScript メソッド

小云云オリジナル: 2017-11-18 10:16:032714ブラウズ

データベースのアプリケーションでは、連絡先リストなどのユーザーが必要とするデータを、実際の Web ページとは独立したサーバーから取得でき、Web ページに動的に書き込むことができるため、遅い 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(&#39;success&#39;);
}else{
alert(&#39;fail&#39;);
}
}
}

作成された xmlHttp を使用します。最も単純な ajax ポストを実装するには、上記のようにします。リクエスト:

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(&#39;success&#39;);
}else{
alert(&#39;fail&#39;);
}
}
}

オンラインで見た 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);
    }
});

ネイティブ Ajax を実装するための JavaScript の上記のメソッドを学習しましたか?みんなが助けてくれることを願っています。

ネイティブ Ajax を実装するためのいくつかの JavaScript メソッド

関連記事