Ajaxとそれがどのように機能するか
Ajaxは、Webページを更新せずにサーバーとデータを交換するテクノロジーです。 Googleで最初にGoogleマップで使用され、すぐに人気がありました。
ajaxはクロスドメインにすることはできません。ドメインをクロスする必要がある場合は、document.domain = 'a.com'を使用できます。または、サーバープロキシを使用してXMLHTTPREQUESTファイルをプロキシします。
Ajaxは既存のインターネット標準に基づいており、それらを組み合わせて使用します。
xmlhttprequestオブジェクト（サーバーとデータを非同期に交換）
JavaScript/dom（情報表示/相互作用）
CSS（データのスタイルを定義）
XML（データを変換するための形式として）
xmlhttprequestオブジェクトを作成します
すべての最新のブラウザ（IE7+、Firefox、Chrome、Safari、およびOpera）には、XMLHTTPRequestオブジェクトが組み込まれています。
ajaxオブジェクトを作成します。
// IE6以降
var oajax = new xmlhttprequest（）;
// IE6
var oajax = new ActiveXObject（ "microsoft.xmlhttp"）
サーバーに接続します
oajax.open（メソッド、url、それは非同期ですか）
Ajax、すなわち「非同期JavaScriptとXML」（非同期JavaScriptとXML）は、インタラクティブなWebアプリケーションを作成するWeb開発テクノロジーを指すことを私たちは皆知っています。したがって、ajaxは非同期モードで働くために生まれます（非同期は真、同期偽です）
同期および非同期
同期とは、次のデータパケットを送信する前に、送信者がデータを送信し、受信者が応答を送信するのを待つ通信方法を指します。
非同期とは、送信者がレシーバーが応答を送信するのを待たずにデータを送信する通信方法を指し、次のデータパケットを送信します。
（簡単に言えば：同期は1つずつしか行うことができませんが、非同期は複数のことを同時に行うことができます）
送信リクエスト送信（）
コードコピーは次のとおりです。
<script type = "text/javascript">
関数getDoc（）{
var xmlhttp;
if（window.xmlhttprequest）{
xmlhttp = new xmlhttprequest（）;
}
それ以外{
xmlhttp = new ActiveXObject（ "microsoft.xmlhttp"）; // ie6の場合
}
xmlhttp.onreadystatechange = function（）{
if（xmlhttp.readystate == 4 && xmlhttp.status == 200）{
document.getElementById（ "myid"）。innerhtml = xmlhttp.responsetext;
}
}
xmlhttp.open（ "get"、index.php、true）;
xmlhttp.send（）;
}
</script>
</head>
<body>
<ボタンタイプ= "button" onclick = "getDoc（）"> request data </button>
</body>
取得または投稿しますか？
POSTと比較して、GETはよりシンプルで高速で、ほとんどの場合利用可能です。
ただし、次のケースではPOSTリクエストを使用します。
キャッシュされたファイルを使用できません（サーバー上のファイルまたはデータベースを更新）
大量のデータをサーバーに送信します（投稿にはデータ制限がありません）
投稿は、不明な文字を含むユーザー入力を送信するときに取得するよりも安定して信頼性が高くなります
返品情報を受け取ります
oajax.onreadystatechange = function（）{//要求状態が変更されたときに呼び出されるイベントハンドラー
アラート（oajax.readystate）;
}
ReadyStateプロパティの値が変更されるたびに、ReadyStateChangeイベントがトリガーされます。このイベントは、各状態が変更された後のReadyStateの値を検出するために使用できます。通常、この時点ですべてのデータが準備されているため、ReadyState値が4の段階にのみ関心がありますが、Close-Browserの互換性を確保するために、Open（）を呼び出す前に、condeadedStateChangeイベントハンドラーを指定する必要があります。例を見てみましょう：
コードコピーは次のとおりです。
var xhr = createxhr（）;
xhr.onedeadystatechange = function（）{
if（xhr.readystate == 4）{
if（（xhr.status> = 200 && xhr.status <300）|| xhr.status == 304）{
alert（xhr.statustext）;
} それ以外 {
Alert（ "要求が失敗しました：" + xhr.status）;
}
}
};
xhr.open（ "get"、 "emple.txt"、true）;
xhr.send（null）;
XHRオブジェクト
XHRオブジェクトがHTTP要求をサーバーに送信すると、リクエストが処理されるまでいくつかの状態を通過し、応答を受信します。 ReadyStateは、XHR要求の状態プロパティであり、それ自体が5つのプロパティ値を持っています。
0（uninitialized）open（）メソッドはまだ呼び出されていません
1（load）send（）メソッドが呼び出され、リクエストが送信されています
2（読み込みが完了）send（）メソッドが完了し、すべての応答コンテンツが受信されました
3（分析）応答コンテンツは解析されています
4（完全）応答コンテンツの解析が完了し、クライアントが使用できます。
状態
ステータス属性は、サーバーから返される応答ステータスコードを表します。例：200は成功を意味し、404は見つかりません。
1ワードヘッダー：メッセージ。このタイプのステータスコードは、リクエストが受け入れられ、処理する必要があることを意味します。
2ワードヘッド：成功。このタイプのステータスコードは、リクエストがサーバーによって正常に受信、理解、受け入れられたことを意味します。
3ワードヘッダー：リダイレクト。このタイプのステータスコードは、クライアントがリクエストを完了するためにさらなるアクションが必要であることを意味します。
4キャラクターヘッダー：クライアントエラー。このタイプのステータスコードは、クライアントにエラーがあるように見えることを意味し、サーバーの処理を妨げます。
5ワードヘッダー：サーバーエラー。このタイプのステータスコードは、サーバーの要求処理プロセス中に発生したエラーまたは異常な状態を表します
添付：HTTPステータスコードの詳細な説明
statustext
Statustextは応答で返されるテキスト情報であり、ReadyState値が3または4の場合にのみ使用できます。ReadyStateが別の値である場合、View Access Statustextプロパティは例外をスローします。
XHRメソッド
| 方法 | 説明する |
|---|---|
| アボート（） | 現在実行中のリクエストがキャンセルされます |
| getallResponseHeaders（） | 単一の文字を返す|すべての応答ヘッダーの名前と値を含む文字列 |
| getResponseHeader（名前） | 応答ヘッダーで指定された名前と値を返します |
| open（Method、url、async、username、pwd） | HTTPメソッド（取得または投稿）などを設定します。 |
| 送信（コンテンツ） | 指定されたサブジェクトコンテンツでリクエストを発行します |
| setRequestheader（名前、値） | 指定された名前と値でリクエストヘッダーを設定します |
コードコピーは次のとおりです。
<script type = "text/javascript">
var oajax = oajax（）;
alert（oajax.readystate）; // "0" Popsup "
oajax.open（ "get"、 "index.html"、true）;
alert（oajax.readystate）; // "1"がポップアップします
oajax.send（null）;
alert（oajax.readystate）; // 4はIEの下にポップアップしますが、Firefoxは2です
// ReadyStateChangeイベントを聞くことができます
oajax = xhr（）;
oajax.onreadystatechange = function（）{
alert（oajax.readystate）; // firefoxの下の順序は1、2、3、4ですが、最終的には別の1があります。
// IEの下では、1、1、3、4です
};
oajax.open（ "get"、 "index.txt"、true）;
oajax.send（null）;
</script>