ホームページ > 記事 > ウェブフロントエンド > 自分で ajax を作成するにはどうすればよいですか? ajaxの作成手順を詳しく解説(解析例付き)
この記事では主にajaxcaseを自分で作成する方法について説明します
ここで、ajaxの構造と機能をまとめてみましょう。
ajaxの目的は、バックグラウンドでデータをリクエストすることです。その特徴は、ajaxが登場する前は、ユーザーにとって、多くの項目を含むフォームに入力するのは単純に面倒でした。手順のいずれかが間違って入力されると、最終送信時にエラーが表示され、何度もフォームに入力しなければならなくなるという悪夢です。それはアウトです。その後、ajax の登場により、この問題はうまく解決され、項目が入力されるたびに結果がサーバー経由で検証されて返されるため、効率がある程度向上し、ユーザーのエクスペリエンスが向上しました。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAJAX 開発マニュアル のコラムにアクセスして学習してください)
それでは、Ajax を使用する際のいくつかの問題について説明しましょう: まず、IE ではデータが時間内に更新されません (原因は次のとおりです)。キャッシュ)、URL は 1 回だけ読み取られるため、更新されるたびに URL を変更する必要がありますが、ドメイン名はどうなるのでしょうか?次のパラメータはページの取得には影響しませんが、異なる URL を持つブラウザはページをリロードするため、ページ キャッシュの問題は解決されます。 url+'?t='+new Date().getTime(); を渡すこともできますし、Math.random(); を使用することもできます。次に、統一されたエンコーディングが必要な、受信したデータ形式に問題があります。 any Thing は文字とともに返されます。この時点では、データを自分で解析する必要があります。次に、自分で ajax を作成します:
1. ajax オブジェクトを作成しますvar oAjax=new XMLHttpRequest() ~上位バージョンのブラウザーまたは新しい ActiveXObject('Microsoft.XMLHTTP')~IE
2.接続 oAjax.open (メソッド、アドレス、非同期)
3. ステータス変更の読み取り時に を受け入れる oAjax.send();ジャックス。 readyState ステータス コード
0。ajax オブジェクトが作成されました (新しい ajax オブジェクト)
1. サーバーに接続されました (open メソッドが実行されたばかりです)2。 completed
3. 受信完了 (ファイルヘッダー)
4. 受信完了 (本文)、コンテンツリクエスト失敗も 4
ここで、http ステータスコード:
oAjax.status 200< =n<300 または n==304 は送信が成功したことを意味します
oAjax.responseText はデータを返します
encodeURIComponent(str)
文字列は URI コンポーネントとして使用されます
ajax:
//data 后台要的数据 //options = url,data,type,timeout,success,error function ajax(options){ options=options||{}; options.data=options.data||{}; options.type=options.type||'get'; options.timeout=options.timeout||0; //整理data数据 options.data.t=Math.random();//给data创建一个t 键 var arr=[]; for(var key in options.data){ arr.push(key+'='+encodeURIComponent(options.data[key])); } var str=arr.join('&'); if(window.XMLHttpRequest){//1 var oAjax=new XMLHttpRequest(); }else{ var oAjax=new ActiveXObject('Microsoft.XMLHTTP'); } if(options.type=='get'){ oAjax.open('get',options.url+'?'+str,true);//2 oAjax.send();//3 }else{//post oAjax.open('post',options.url,true); //设定ajax的头信息 oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); oAjax.send(str); } oAjax.onreadystatechange=function(){//4 if(oAjax.readyState==4){ if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){ clearInterval(timer); options.success && options.success(oAjax.responseText) }else{ options.error && options.error(oAjax.status); } } }; if(options.timeout){ var timer=setTimeout(function(){ alert('超时了'); oAjax.abort(); //终止加载 },options.timeout); } }
1.ajax関数を作成します。ajaxではパラメータが不確定で配置位置も異なるため、データとしてjsonを使用し、パラメータ オプションが渡されます。オプションはオプションです。渡された場合は、渡されたデータが使用されます。そうでない場合は、送信メソッドのタイプ、タイムアウト設定、データを含むデフォルトのパラメータが使用されます。
2.
URL は最後にいくつかのランダム変数を追加する必要があるため、最初にキー options.data.t=Math.random(); をデータに追加し、次に URL をエンコードします。データを処理します。3.
次に、ブラウザを決定します。chrome と ff はどちらも window.XMLHttpRequest をサポートしますが、IE ブラウザは ActiveXObject ('Microsoft. メソッドのみをサポートします。URL の後に設定した乱数を追加する必要があります)。 oAjax.send(); データを送信できますが、post メソッドの場合は、ajax ヘッダー情報 oAjax.setRequestHeader('Content-Type',' application/x-www-form-urlencoded'); も設定する必要があります。データを送信してください4.对状态改变时进行判断oAjax.onreadystatechange当oAjax.readyState==4时表明接收完成此时再判断状态码oAjax.status>=200 && oAjax.status<300 || oAjax.status==304时表明成功了此时进行成功时的回调函数,否则就是失败了,此时返回状态码,告诉用户。 5.在这中间可以设置一个定时器,当在设定的时间内还没有获取成功则表明超时了,此时需要终止加载oAjax.abort(),并且告诉用户超时了,如果在设置的时间内加载成功了,则清除定时器。 此时ajax就封装完毕了,调用时就简单了
本篇文章到这就结束了(想看更多就到PHP中文网AJAX使用手册栏目中学习),有问题的可以在下方留言提问。 以上が自分で ajax を作成するにはどうすればよいですか? ajaxの作成手順を詳しく解説(解析例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。ajax({
data: {a:3,b:5},
url: 'php/php_get.php',
success:function(str){
alert(str);
}
});