1。AJAX （非同期JavaScript + XML）は、ページをアンインストールせずにサーバーのような追加データを要求できます。つまり、ローカルリフレッシュテクノロジー
2。XHRオブジェクトを作成します
function createxhr（）{if（typeof xmlhttprequest！= "undefined"）{return new xmlhttprequest（）; } else if（typeof activexobject！= "undefined"）{// <ie7 if（typeof arguments.callee.activexstring！= "string"）{var version = ["msxml2.xmlhttp.6.0" "、" msxml2.xmlhtp.3.0 for（i = 0、len = version.length; i <len; i ++）{try {new ActiveXObject（version [i]）; arguments.callee.activexstring = version [i];壊す; } catch（ex）{}}} new ActiveXObject（arguments.callee.activexstring）を返します。 } else {throw new error（ "xhrのサポートなし"）; }} var xhr = createxhr（）;アラート（xhr）; // [オブジェクトxmlhttprequest]3。使用量注：このセクションのすべての例は、サーバー側に適用されます
1。Open（）メソッドを呼び出します。送信されるリクエストのタイプ（ "get"、 "post"など）、リクエストのURL、およびリクエストが非同期に送信されるかどうかを示すブール値の3つのパラメーターを受け入れます。
2。リクエストを送信するには、send（）メソッドを呼び出してパラメーターを受け入れます。つまり、リクエストの対象となることです。必要でない場合はヌル
3.返されたデータは、XHRオブジェクトのプロパティに自動的に入力されます。
var xhr = createxhr（）; // synchronallyでexample.txtファイルを開く// synchronization：javascriptコードは、サーバーがxhr.open（ "get"、 "embler.txt"、false）の応答と実行を待機します。 xhr.send（null）; //応答のHTTPステータスを表す// 200はOKを表し、304は（（xhr.status> = 200 && xhr.status <300）|| xhr.status == 304）{alert（xhr.responseText）; //応答のテキストを返し、123456} else {alert（ "要求が失敗しました：" + xhr.status）; }4.example.textファイルコンテンツは文字列です：123456
4.もちろん、前のプロセスで使用された同期方法に問題はありません。非同期方法に挑戦する必要があります。
var xhr = createxhr（）;// XHR.ReadyStateはリクエスト/応答の現在のステータスを表し、4はすべての応答データがXHR.ReadyStateの変更の値に加えて受け入れられていることを表します。XHR.ONREADYSTATECHANGEイベントはXHR.ONSTATECHANGE = FUNCTION（）{IF（XHR.ReadyState = = 4）{If（Xhr.ReadyState = = 4） xhr.status <300）||。 } else {alert（ "要求が失敗した：" + xhr.status）; }}}; xhr.open（ "get"、 "emple.txt"、true）; xhr.send（null）;
5.各HTTP要求と応答には、対応するヘッダー情報があります。
1.デフォルトでは、XHRリクエストを送信している間、次のヘッダー情報も送信されます。
ACCEPT：ブラウザが処理できるコンテンツの種類。
ACCEPT-CHARSET：ブラウザが表示できる文字セット。
ACCEPT-ENCODING：ブラウザが処理できる圧縮エンコード。
ACCEPT-LANGUAGE：現在ブラウザによって設定されている言語。
⑤接続：ブラウザとサーバーの間の接続のタイプ。
Cookies：現在のページに設定されたCookie。
host：リクエストが発行されたページがあるドメイン。
Referer：リクエストを発行したページのURI。
⑨User-agent：ブラウザのユーザーエージェント文字列。
2。SetRequestHeader（）メソッドを使用して、カスタムリクエストヘッダー情報を設定します。 2つのパラメーターを受け入れます：ヘッダーフィールドの名前とヘッダーフィールドの値
var xhr = createxhr（）; // XHR.ReadyStateはリクエスト/応答の現在のステータスを表し、4はすべての応答データがXHR.ReadyStateの変更の値に加えて受け入れられていることを表します。XHR.ONREADYSTATECHANGEイベントはXHR.ONSTATECHANGE = FUNCTION（）{IF（XHR.ReadyState = = 4）{If（Xhr.ReadyState = = 4） xhr.status <300）||。 } else {alert（ "要求が失敗した：" + xhr.status）; }}}; xhr.open（ "get"、 "emple.txt"、true）; // xhr.setRequestheader（ "name"、 "zhang"）; // example.txt： "Zhang" xhr.send（null）のhttpで受け入れられている「名前」が表示されます。3.リクエストヘッダー情報と対応する情報を取得するには、getResponseHeader（）メソッドgetAllResponseHeaders（）メソッドを呼び出します
var xhr = createxhr（）; // XHR.ReadyStateはリクエスト/応答の現在のステータスを表し、4はすべての応答データがXHR.ReadyStateの変更の値に加えて受け入れられていることを表します。XHR.ONREADYSTATECHANGEイベントはXHR.ONSTATECHANGE = FUNCTION（）{IF（XHR.ReadyState = = 4）{If（Xhr.ReadyState = = 4） xhr.status <300）||。 // alert（connection）; // text/plain //すべての応答情報を取得var all = xhr.getallResponseHeaders（）;アラート（すべて）; } else {alert（ "要求が失敗した：" + xhr.status）; }}}}; xhr.open（ "get"、 "emple.txt"、true）; xhr.send（null）;6。リクエストを取得します。以前にGETリクエストの方法について説明しました。次に、拡張して、Get Requestにいくつかのパラメーターを追加しましょう。
/ ** url：リクエストなしのURL：リクエストキー値：リクエスト値return：url with request string*/ function addurlparam（url、name、value）{url +=（url.indexof（ "？"）== -1？ "？"： "＆"）; url + = encodeuricomponent（name） + "=" + encodeuricomponent（value）; return url; } var xhr = createxhr（）; xhr.oneadystatechange = function（）{if（xhr.readystate == 4）{if（（xhr.status> = 200 && xhr.status <300）|| xhr.status == 304）{alert（xhr.responseText）; } else {alert（ "要求が失敗した：" + xhr.status）; }}}}; var url = "embles.txt"; url = addurlparam（url、 "name"、 "zhang"）; url = addurlparam（url、 "age"、 "23"）; //要求されたurlは：example.txt？name = zhang＆age = 23 xhr.open（ "get"、url、true）になります。 xhr.send（null）;7。リクエストを投稿します
1。ケース分析：次に、POSTメソッド、つまりユーザー登録にリクエストを送信するAJAXアプリケーションについて説明しましょう。また、登録されたユーザー名に基づいてプロンプトが返されます。
2。実装手順
1）最初に、登録されたページが必要です（もちろん、ここでは非常に簡単です）ajax.html
<！Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> untitled document </title> <stly> </style> </head> <body> <form name = "myform"/<post = ""> <pust = ""/fimp id = "userlabel"> username </label> <br/>パスワードを入力してください：<入力タイプ= "パスワード"パスワード= "パスワード"/> <br/> <入力タイプ= "" value "/> <br/> </form> <scrip src =" eventutil.js "> </scrip> <src =" serialize.js "> </script> </script src = "ajax.js"> </script> <script src = "ajaxdo.js"> </script> <script src = "ajaxdo.js"> </script> </body> </html>
2）もちろん、JavaScriptの部分
eventutil.js、ここにイベントリスニングパーツのリストにすぎません
var eventutil = {addevent：function（element、type、handler）{if（element.addeventlistener）{element.addeventlistener（inty、handler、false）; } else if（element.attachevent）{element.attachevent（ "on" + type、handler）; }}}}②Serialize.js：フォームシリアル化
function serialize（form）{var parts = []、field = null、i、len、j、optlen、option、optvalue; for（i = 0、len = form.elements.length; i <len; i ++）{field = form.elements [i]; switch（field.type）{case "select-one"：case "select-multiple"：if（field.name.length）{for（j = 0、optlen = field.options.length; j <optlen; j ++）{option = field.options [j]; if（option.selected）{optvalue = ""; if（option.hasattribute）{optvalue =（option.hasattribute（ "value"）？option.value：option.text）; } else {optvalue =（option.attributes ["value"]。specied？option.value：option.text）; } parts.push（encodeuricomponent（field.name） + "=" + encodeuricomponent（optvalue））; } } } 壊す;ケース未定義：//フィールドセットケース "ファイル"：//ファイル入力ケース "送信"：//ボタンケースを送信 "リセット"：//リセットボタンケース "ボタン"：//カスタムボタンbreak;ケース「ラジオ」：//ラジオボタンケース "チェックボックス"：//チェックボックスif（！field.checked）{break; } /*デフォルト操作の実行}}} return parts.join（ "＆"）; }ajax.jsは上記のcreatexhr（）関数であり、ここにはリストされません。
コアファイルであるajaxdo.jsは、私たちの名前の操作部分であり、ランダムに記述されています。
var form = document.forms [0]; // form var username = form.elements ['username']; // username var userlabel = document.queryselector（ "＃userlabel"）; // empt eventutil.addevent（username、 "blur"、function（）{var xhr = createxhr（）; xhr.onreadystatechange = function（）{if（xhr.status> = 200 && xhr.status <300）| xhr.status = xhr.status = 300）| xhr.status xhr.responseTextの場合、緑色のフォントが誤っている場合、userlabel.color = "green" =申し訳ありませんが、このユーザーは存在します。 「アプリケーション/x-www-form-urlencoded」; // xhr.send（form））;3。改善部分：誰もがそれを見ました。フォームを今すぐ送信したとき、フォームをシリアル化しました。 FormDataタイプは、XmlhttpRequestレベル2でこれで定義されています。これは、フォームを自動的にシリアル化し、自分で書く必要はありません。
コードの一部のみを移動します
// ...ここで省略されたコードは上記と一致しています// sopt request xhr.open（ "post"、 "dome.php"、true）; //以前の関数xhr.send（new formdata（form））を置き換えるために、ここでのみ変更する必要があります。
8。他の部分（互換性が十分ではないので理解してください）
1。タイムアウト設定
xhr.open（ "get"、 "emple.txt"、true）; xhr.timeout = 1000; //タイムアウトを1秒に設定します（IE8+のみ）xhr.ontimeout = function（）{alert（ "要求は秒で返されませんでした。"）; }; xhr.send（null）;2。オーバーリデミメティプ（）メソッド、サーバーによって返されるタイプ
var xhr = createxhr（）; xhr.open（ "get"、 "emple.txt"、true）; xhr.OverRideMimeType（ "Text/xml"）; //前のものはテキスト/プレーンxhr.send（null）でした。
3。進捗イベント
1.ブラウザがサーバーの情報を受信している限りトリガーされたイベントをロードします。
var xhr = createxhr（）; xhr.onload = function（）{if（（xhr.status> = 200 && xhr.status <300）|| xhr.status == 304）{alert（xhr.responsetext）; } else {alert（ "要求が失敗した：" + xhr.status）; }}; xhr.open（ "get"、 "emple.txt"、true）; xhr.send（null）;2。新しいデータを受信するブラウザ中に定期的にトリガーされる進行イベント
var xhr = createxhr（）; xhr.onprogress = function（event）{var divstatus = document.getElementById（ "status"）; //応答から受信されたデータの割合を計算します（event.lengthComputable）{divstatus.innerhtml = "receed" + event.position + "of" + event.totalsize + "bytes"; }}; xhr.open（ "get"、 "altevents.php"、true）; xhr.send（null）;上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。