Ajax:ページ全体を更新せずにデータをリクエストする方法。
Ajaxの技術的なコアはXmlhttpRequestオブジェクトです。
ajax要求プロセス:xmlhttprequestオブジェクトを作成し、サーバーに接続し、リクエストを送信し、応答データを受信します。
/*** ajax object*/function getajaxhttp(){var xmlhttp; try {// Chrome、Firefox、Opera 8.0+、Safari Xmlhttp = new XmlhttpRequest(); } catch(e){// Internet Explorer try {// ie5、6 xmlhttp = new ActiveXObject( "msxml2.xmlhttp"); } catch(e){try {// ie7以降xmlhttp = new ActiveXObject( "microsoft.xmlhttp"); } catch(e){alert( "ブラウザはajax!"); falseを返します。 }}} return xmlhttp;}/** * ajax要求を送信 *もう1つは、処理するオブジェクトです) * OBJは、コールバックメソッドで処理するオブジェクトに移動する必要があります */function ajaxrequest(url、methodtype、con、parameter、functionname、obj){var xmlhttp = getajaxhttp(); xmlhttp.onreadystatechange = function(){// readystate値説明// 0、初期化、xhrオブジェクトはまだ実行されていません// 1、ロード、オープンメソッドはまだ送信されていませんが、まだ送信されていません。 URLが見つかった// }}; xmlhttp.open(methodtype、url、con); xmlhttp.send(parameter);} //これはパラメーター関数createxml(){var xml = "<user> <userid> asdfasdfasdf <// userid> </user>"; "//" json = {id:0、username: "good person"}; return json;} function c(){alert( "");}//テスト
ajaxrequest( "http://www.baidu.com"、 "post"、true、createxml()、c、document);
別の例を見てみましょう
ajax({url: "./testxhr.aspx"、// requestアドレスタイプ: "post"、// requestメソッドデータ:{name: "super"、age:20}、 "json"、cuscess:function(response、xml){// code exected deed ofted place(code ofted(xml){// cose(xml){//コード){//コード(// function ajax(options){options = options || {}; options.type =(options.type || "get")。touppercase(); options.datatype = options.datatype || 「Json」; var params = formatparams(options.data); // create -nonie6-ステップ1 if(window.xmlhttprequest){var xhr = new xmlhttprequest(); } else {// ie6および以下のブラウザvar xhr = new ActiveXObject( 'microsoft.xmlhttp'); } //受信 - ステップ3 xhr.onreadystatechange = function(){if(xhr.readystate == 4){var status = xhr.status; if(status> = 200 && status <300){options.success && options.success(xhr.responsetext、xhr.responsexml); } else {options.fail && options.fail(status); }}} // connect and send -step 2 if(options.type == "get"){xhr.open( "get"、options.url + "?" + params、true); xhr.send(null); } else if(options.type == "post"){xhr.open( "post"、options.url、true); // xhr.setRequestheader( "content-type"、 "application/x-www-form-urlencoded")を送信するときにコンテンツタイプを設定します。 xhr.send(params); }} //フォーマットパラメーター関数formatparams(data){var arr = []; for(data in dataのvar name){arr.push(encodeuricomponent(name) + "=" + encodeuricomponent(data [name])); } arr.push(( "v =" + math.random())。置き換え( "。"、 ")); return arr.join("& ");}原則を見てみましょう
1。作成します
1.1。 IE7以降のバージョンはネイティブXHRオブジェクトをサポートするため、直接使用できます。varoajax = new XmlhttpRequest();
1.2。 IE6およびその以前のバージョンでは、XHRオブジェクトはMSXMLライブラリのActiveXオブジェクトを介して実装されています。いくつかの本は、IE、すなわちMSXML2.XMLHTTP、MSXML2.XMLHTTP.3.0およびMSXML2.XMLHTTP.6.0の3つの異なるオブジェクトを洗練しました。面倒だと思うので、次のステートメントを直接使用して作成できます。varoajax = new ActiveXObject( 'Microsoft.xmlhttp');
2。接続して送信します
2.1。 Open()関数の3つのパラメーター:要求方法、リクエストアドレス、および非同期に要求するかどうか(同期リクエストはほとんどなく、まだ使用されていません)。
2.2。 Get Requestメソッドは、URLパラメーターを介してデータをサーバーに送信し、PostがSendパラメーターとしてサーバーにデータを送信することです。
2.3。 POSTリクエストでは、データを送信する前に、送信されたフォームのコンテンツタイプを設定する必要があります。
2.4。サーバーに提出されたパラメーターは、encodeuricomponent()メソッドによってエンコードされる必要があります。実際、パラメーターリスト「key = value」の形式では、特殊文字が含まれるため、キーと値の両方をエンコードする必要があります。要求するたびに、「v = xx」の文字列がパラメーターリストに綴られます。これは、キャッシュを拒否するためであり、そのたびにサーバーに直接リクエストします。
encodeuri():URI全体のエンコードに使用され、コロン、前方スラッシュ、疑問符、ポンドサインなど、URIに属する特殊文字をエンコードしません。対応するデコード関数decodeuri();
encodeuricomponent():URIの一部をエンコードし、見つけた非標準文字をエンコードするために使用されます。対応するデコード関数decodeuricomponent();
3。受信
3.1。応答を受信した後、応答データはXHRオブジェクトで自動的に満たされます。関連する属性は次のとおりです
ResponseText:文字列タイプの応答によって返されるボディの内容。
ResponseXML:応答のコンテンツタイプが「テキスト/XML」または「アプリケーション/XML」の場合、対応するXMLデータはこのプロパティに保存されます。これはXMLに対応するドキュメントタイプです。
ステータス:応答HTTPステータスコード。
Statustext:HTTPステータスの説明。
3.2。 XHRオブジェクトのReadyStateプロパティは、リクエスト/応答プロセスの現在のアクティブステージを表します。このプロパティの値は次のとおりです
0-一方的に、open()メソッドはまだ呼び出されていません。
1-スタート、open()メソッドは呼び出されます、send()メソッドは呼び出されません。
2センドでは、send()メソッドが呼び出されており、応答はありません。
3-受信、応答データの一部が受信されました。
4完全に、すべての応答データが受信されました。
ReadyStateの値が変更されている限り、ReadyStateChangeイベントが呼び出されます(実際、論理的な滑らかさのために、送信中にサーバーが要求され、ネットワーク通信が実行されるため、送信後にReadyStateChangeを配置できます。これには時間がかかります。
3.3。 ReadyStateChangeイベントでは、最初に応答が受信されるかどうかを判断し、サーバーがリクエストを正常に処理するかどうかを判断します。 Xhr.Statusはステータスコードです。ステータスコードは2で始まり、すべてが成功します。 304は、キャッシュから取得することを意味します。上記のコードは、要求が要求されるたびに乱数を追加するため、キャッシュからの値を判断する必要はありません。
4。AJAXリクエストはクロスドメインになることはできません!