JavaScript学習記(7) AjaxとHTTPステータスコード_基礎知識

Ajax とその仕組み

AJAX は、Web ページを更新せずにサーバーとデータを交換するテクノロジーで、Google によって Google マップで初めて使用され、すぐに普及しました。

AJAX はドメインを越えることはできません。ドメインを越える必要がある場合は、domain.domain='a.com'; を使用するか、サーバー プロキシを使用して XMLHttpRequest ファイルをプロキシすることができます。

AJAX は既存のインターネット標準に基づいており、それらを組み合わせて使用​​します。

XMLHttpRequest オブジェクト (サーバーと非同期でデータを交換します)

JavaScript/DOM (情報表示/操作)
CSS (データのスタイルを定義)
XML (データを変換するための形式として)

XMLHttpRequest オブジェクトを作成します

すべての最新のブラウザ (IE7、Firefox、Chrome、Safari、Opera) には XMLHttpRequest オブジェクトが組み込まれています。

Ajax オブジェクトの作成:

//IE6 以降

var oAjax = 新しい XMLHttpRequest();

//IE6

var oAjax =new ActiveXObject("Microsoft.XMLHTTP")
サーバーに接続

oAjax.open(メソッド、URL、非同期かどうか)

Ajax が「Asynchronous Javascript And XML」(非同期 JavaScript および XML) を意味し、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指すことは誰もが知っています。したがって、Ajax は当然非同期モードで動作します (非同期は true、同期は false)

同期と非同期

同期とは、送信者がデータを送信し、受信者が応答を返すのを待ってから次のデータ パケットを送信する通信方法を指します。

非同期とは、送信者がデータを送信し、受信者が応答を返してくるのを待ってから、次のデータ パケットを送信する通信方法を指します。
(簡単に言うと、同期とは 1 つのことしか実行できないことを意味しますが、非同期とは複数のことを同時に実行できることを意味します)

リクエストの送信 send()

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="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();
}



データのリクエスト

取得または投稿?

POST と比較すると、GET はより簡単かつ高速であり、ほとんどの場合に機能します。

ただし、次の状況では POST リクエストを使用してください:

キャッシュファイル(サーバー上のファイルやデータベースの更新)は使用できません

大量のデータをサーバーに送信します (POST にはデータ サイズ制限がありません)
不明な文字を含むユーザー入力を送信する場合、POST は GET よりも安定しており信頼性が高くなります
返品情報を受け取る

oAjax.onreadystatechange = function(){ //リクエストの状態が変化したときに呼び出されるイベント ハンドラー

アラート(oAjax.readystate);

}

readyState 属性の値が変更される限り、readyStatechange イベントがトリガーされます。このイベントは、状態が変化するたびに、readyState の値を検出するために使用できます。通常、この時点ではすべてのデータの準備が整っているため、readyState 値が 4 のステージのみに注目します。ただし、ブラウザ間の互換性を確保するには、open() を呼び出す前に onreadystatechange イベント ハンドラーを指定する必要があります。例を見てみましょう:

コードをコピー コードは次のとおりです:

var xhr = createXHR();
xhr.onreadystatechange = function () {
If (xhr.readyState == 4) {
If ((xhr.status >= 200 && xhr.status アラート(xhr.statusText);
} else {
alert("リクエストは失敗しました: " xhr.status);
}
}
};
xhr.open("get", "example.txt", true);
xhr.send(null);

XHR オブジェクト

XHR オブジェクトが HTTP リクエストをサーバーに送信すると、リクエストが処理されて応答を受信するまで、いくつかの状態を経ます。 readyState は、XHR リクエストのステータス属性であり、次の 5 つの属性値があります。

0 (初期化されていない) open() メソッドはまだ呼び出されていません

1 (ロード中) send() メソッドが呼び出され、リクエストが送信されています
2 (ロード完了) send() メソッドが完了し、すべての応答コンテンツが受信されました
3 (解析) 応答内容の解析
4 (完了) 応答コンテンツが解析され、クライアントで使用できるようになります
ステータス

status属性はサーバーから返されるレスポンスステータスコードを表します。例: 200 は成功を意味し、404 は見つからなかったことを意味します。

1 つのプレフィックス: メッセージ。このタイプのステータス コードは、リクエストが受け入れられ、処理を続行する必要があることを意味します。

2 接頭辞: 成功。このタイプのステータス コードは、リクエストがサーバーによって正常に受信、理解され、受け入れられたことを意味します。
プレフィックス 3: リダイレクト。このタイプのステータス コードは、リクエストを完了するためにクライアントがさらなるアクションを実行する必要があることを示します。
プレフィックス 4: クライアント エラー。このタイプのステータス コードは、クライアント側で発生したと思われるエラーを表し、サーバーによる処理の妨げとなります。
プレフィックス 5: サーバー エラー。このタイプのステータス コードは、サーバーによるリクエストの処理中にエラーまたは異常な状態が発生したことを表します

添付:

http ステータス コードの詳細な説明

ステータステキスト

StatusText は応答によって返されるテキスト情報であり、readyState 値が 3 または 4 の場合にのみ使用できます。 readyState が他の値の場合、ビューの statusText プロパティへのアクセスは例外をスローします。

XHR 方式

方法	描述
abort()	导致当前正在执行的请求被取消
getAllResponseHeaders()	返回包含所有响应头的名称和值的单个字符|串
getResponseHeader(name)	返回响应头中指定的名称和值
open(method,url,async,username,pwd)	设置HTTP方法（get或post）等
send(content)	发出带有指定主体内容的请求
setRequestHeader(name,value)	使用指定的名称和值设置请求头

コードをコピーします コードは次のとおりです:

<スクリプトタイプ="text/javascript">
var oAjax =oAjax();
alert(oAjax.readyState);//「0」をポップアップします
oAjax.open("get","index.html",true);
alert(oAjax.readyState);//「1」をポップアップします
oAjax.send(null);
alert(oAjax.readyState); //IE では 4 が表示されますが、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);