Ajaxの簡単なステップを作成します:
Ajaxオブジェクトを作成します。var XHR =新しいXMLHttpRequestのを();
リンクサーバー:xhr.open( '取得'、 'a.php'、TRUE);
あるいはデータ送信要求:xhr.send();
関数値を呼び出すと、状態を変更します。xhr.onreadystatechange = fncallback。
パッケージのAjax:
関数アヤックス(オプション){ VARの URL = options.url、 ASY =オプション。非同期!== falseを、 タイプ =(options.type || ' GET ' ).toUpperCase()、 データ = options.data || ヌル; SUC = options.success || ヌル、 ERR = options.error || ヌル; XHR = window.XMLHttpRequest?新しい XMLHttpRequestを():新しい ActiveXObjectを(" Microsoft.XMLHTTP " ); //新規のXMLHttpRequest()IE7 +、Firefoxの、クロム、オペラ、サファリ // 新しいActiveXObjectの( 'Microsoft.XMLHTTP')ie5,6 xhr.onreadystatechange = 関数(){ 場合(xhr.readyState == 4 ){ xhr.status == 200?SUC && SUC(xhr.responseText):ERR && ERR(); } } データ = (関数(データ){ 場合(データ){ VAR ARR = []; のための(VAR I におけるデータ){ arr.push(encodeURIComponentで(I) + ' = ' + encodeURIComponentで(データ[I])) ; // %E5%93%88%E5のように符号化さencodeURIComponentで他の特別な処理漢字 %93%88 形 } 戻り arr.joinは、(' &'); // 文字列に配列:ユーザ名=名%E5%を93 E5%93%88%88%&パスワード= 123 } 他{ 返すデータ; } })(データ); IF(タイプ== ' GET ' && データ){ URL + = url.indexOf(' ?')= - !1。?' &':' ?' ; URL + +データ= " &トン= "+ Math.randomは(); } // 処理の実施形態キャッシュは常に)(値Math.randomで変更を取得まま、タイムスタンプは、getTime())(、新しい新しい日付を使用することができる。 // URLをすることができます: ?名前のユーザー名= E5%93%88%93%88%E5%&パスワード= T = 123 a.php&0.06531456997618079 xhr.open(タイプ、URL、ASY); スイッチ(タイプ){ ケース ' POST ' : xhr.setRequestHeader(" コンテンツ-type ' ' ファイルアプリケーション/ x-www-form-urlencodedで' ); データ?xhr.send(データ):xhr.send(); BREAK ; デフォルト: xhr.send(); } }
どのように使用するには:
= document.onclickの機能(){ アヤックス({ タイプ:' POST '、// デフォルト:GET URL:' a.php ' 、 データ:{ ユーザー名:' 名前ヘクタール' 、 パスワード:123 }、// デフォルト:ヌル 非同期:falseに、// トゥーレ:デフォルト 成功:機能(SDATA){アラート(SDATA)}、// デフォルトはnullである エラー:関数(){アラート(' エラー・ラ')} // デフォルトはnullです }); }
追加:
xhr.readyStateプロパティコード:
0初期化されていない状態。XMLHttpRequestオブジェクトが初期化されていない作成
接続状態は、この方法は、オープンしてリクエストを送信する準備ができて呼び出されました
2透過状態、方法は、応答結果がされておらず、送信要求と呼ばれています
図3は、コンテンツのに応答して受信され、HTTPレスポンスヘッダを受信している状態を、受信しています
コンテンツが完全に応答して受信された4負荷状態、
xhr.status一般的な状態:
200--成功したトランザクション(OK)
404--(見つかりません)(指定されたリソースを見つけられませんでした)ファイル、クエリまたはURLを見つけることができません
500--サーバーが内部エラー(内部サーバーエラー)を生成します
xhr.statusText // HTTPリクエストは、現在の状態を返します。
xhr.abort(); //非同期キャンセル
xhr.getAllResponseHeaders(); //レスポンスヘッダ情報を取得する - コンソール経由 - [表示]> [ネットワークXHR->レスポンスヘッダ
xhr.setRequestHeader(); //ヘッダ情報設定要求
図1に示すように、転送されるデータの量が2キロバイトよりも大きく、小さくない得ます。送信される大量のデータを投稿し、それが原因で実際の制限サーバや背景、理論的には無制限です
2、セキュリティが低い場合、ポスト高いセキュリティを取得します。
上のネットワークからの人々が言っているので3は、パフォーマンスの観点ポストから、取得するよりもパフォーマンスを消費:「Yahooメールチームによると、言った:AJAXリクエストでPOSTメソッドを2つに分割されます:最初のヘッダを送信し、送信しますデータ;思考を逆:データ列をポストする要求がない場合は、その後、パフォーマンスは同じ「リンクアドレスを取得する必要があります。http://cuishen.iteye.com/blog/2019925を
簡単に言えば~~~:データ転送モード、高効率、低セキュリティ、キャッシュされ、またその逆のPOSTの少量をGET。
最後に、私たちに関連する情報を提供
AJAXメソッドパッケージ下部
http://www.makeru.com.cn/live/1396_1054.html?s=45051