データベースのアプリケーションでは、連絡先リストなどのユーザーが必要とするデータを、実際の 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('success'); }else{ alert('fail'); } } }
作成された 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('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); } });
ネイティブ Ajax を実装するための JavaScript の上記のメソッドを学習しましたか?みんなが助けてくれることを願っています。
関連する推奨事項:
新しい JSP ページにジャンプするために ajax を実装する方法
ajax を使用してローカル JSON ファイルを読み取る場合の jQuery のケース
複数の Ajax ページリクエストとページ読み込みのブロック問題を解決する方法
以上がネイティブ Ajax を実装するためのいくつかの JavaScript メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。