この記事では主にカプセル化ajaxの導入と、ajaxの非同期リクエストについて説明します
ajaxと言えば、ajaxとは何でしょうか? Ajax は、インタラクティブな Web アプリケーションを作成するためのテクノロジーです。
ajax の応用シナリオには以下が含まれます: (マップ) リアルタイム更新、フォーム検証など' ' は - サーバー側の圧力の欠点: 1. ブラウザーの前後方向の動作が破壊されます。メカニズム (AJAX 自動更新メカニズムのため)
まず、ajaxを使用するにはバックエンド環境(サーバー側)のサポートが必要です。
POST: データのアップロードに使用されます。POST のセキュリティは一般に (GET) よりも優れており、容量はほぼ無制限です (主にフォームに使用されます)。
Ajax の使用
ajax を使用するには 4 つのステップがあります: 1. ajax を作成する、2. サーバーに接続する、3. リクエストを送信する、4. 戻り値を受け入れる。
xhr.open ("リクエストメソッド (GET/POST)、URL パス、「非同期/同期」)。
3 番目のパラメータ: true===》非同期、false===》同期。 (詳細をご覧になりたい場合は、PHP中国のWebサイト
Ajax開発マニュアルcollueを学習してください) 、「非同期/同期」)。
request メソッドが POST の場合、リクエストは xhr.send(request data) として送信されます。また、post を使用する場合は、POST (リクエスト データ) を使用するときの戻り値に
var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else{ xhr = new ActiveXObject("Mricosoft.XMLHTTP"); }
Ajax は、リクエストが送信されたときにイベント ReadyStateChange インシデントを使用します。サーバー、私たちはサーバーに送信されます、私たちはサーバーに送信されます、私たちはいくつかの応答ベースの操作を実行する必要があります。
readystatechange が変化すると、このイベントの実行がトリガーされます。
readyState:请求的状态,返回的是状态码(0 - 4):0(未初始化)open还没有调用、1(载入)已经调用了send()正在发送请求、2(载入完成)send方法已经完成 已经收到了全部的响应内容、3(解析)正在解析响应内容、4(完成)响应内容解析完成 可以在客户端用了。
responseText:返回请求的内容。
status:返回请求的结果码:返回200(成功)、返回404(未找到)、返回5**(5开头)(服务器错误)
在封装ajax的时候会使用到参数传递,因此必须写个方法作为对象属性转换为ajax请求数据的方法
下面是ajax封装,并举例:
function ajax(options){ var xhr = null; var params = formsParams(options.data); //创建对象 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest() } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } // 连接 if(options.type == "GET"){ xhr.open(options.type,options.url + "?"+ params,options.async); xhr.send(null) } else if(options.type == "POST"){ xhr.open(options.type,options.url,options.async); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(params); } xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ options.success(xhr.responseText); } } function formsParams(data){ var arr = []; for(var prop in data){ arr.push(prop + "=" + data[prop]); } return arr.join("&"); } } ajax({ url : "a.php", // url---->地址 type : "POST", // type ---> 请求方式 async : true, // async----> 同步:false,异步:true data : { //传入信息 name : "张三", age : 18 }, success : function(data){ //返回接受信息 console.log(data); } })
本篇文章到这就结束了(想看更多就到PHP中文网AJAX使用手册栏目中学习),有问题的可以在下方留言提问。
以上がAjax の長所と短所は何ですか? ajaxの正しい使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。