ホームページ > 記事 > バックエンド開発 > HTTPメッセージとajaxの基礎知識を例で解説

HTTPメッセージとajaxの基礎知識を例で解説

小云云オリジナル: 2017-12-26 10:04:091407ブラウズ

この記事では、HTTP メッセージと Ajax の基本的な知識を例を挙げて説明します。クライアントからサーバーに渡されるコンテンツと、サーバーからクライアントに渡されるコンテンツは、どちらも HTTP メッセージです。 Ajax は、サーバーにリクエストを送信するために使用されるクライアント JS のメソッドです。この記事では、HTTP メッセージと Ajax についての基本的な知識を説明します。興味のある方はぜひご覧ください。

HTTPメッセージ

HTTPメッセージには、クライアントからサーバーに渡される内容と、サーバーからクライアントに渡される内容が含まれます

開始行：リクエスト開始行レスポンス開始行

ヘッダ：リクエストヘッダレスポンスヘッダ共通header (リクエストとレスポンスの両方) カスタムヘッダー

本体: リクエストボディレスポンスボディ

クライアントがサーバーに渡すデータ:

リクエスト URL の後に疑問符を使用してパラメーターをサーバーに渡す /getList?name=zhangsan&age=7

Setリクエストのヘッダー (リクエストヘッダー情報を設定します)

リクエストボディを設定し、サーバーに渡す内容をリクエストボディに入れてサーバーに渡します

サーバーからクライアントに渡されるデータ:

を設定応答ヘッダー情報

応答本文の内容を設定します

Ajax: 非同期 JavaScript および XML 非同期 JS および XML (拡張可能なマークアップ言語、XML ファイルで使用されるタグはすべて独自に拡張され、独自の拡張通常タグを使用して関連データを格納します) )

Ajax はクライアント JS のメソッドで、サーバーにリクエストを送信し (データをサーバーに渡すこともできます)、サーバーから返されたコンテンツを取得するために使用されます (Ajax は通常、クライアントのブラウザーで実行されます)。

Ajaxの4つのステップ:

Ajaxオブジェクトを作成する(以下の記述方法はIE6以下のブラウザではサポートされていません)

var xhr = new XMLHttpRequest;

送信前の基本情報設定:リクエストメソッドの設定(GET、POST、PUT、DELETE、HEAD) ...)

URL アドレスを開きます (リクエストの送信先サーバーアドレスを構成します)

同期または非同期 (true は非同期を表し、false は同期を表し、デフォルトは true)

[ユーザー名] はリクエストをサーバーユーザー名

[userpass] は、サーバーに要求されたユーザーのパスワードを提供します。これらの 2 つの値は通常、サーバーがセキュリティ制限を設け、特定のユーザーのみにアクセスを許可する場合にのみ渡されます。

xhr.open('get',"/data.txt",false,[username],[userpass]);

から onreadystatechange へのイベントはメソッドにバインドされ、ステータスの変化をリッスンします (ステータスが変化する限り、メソッドの実行がトリガーされます)

xhr.onreadystatechange = function(){

xhr.readyState: AJAX ステータスコード。現在の処理

0 unset 現在のリクエストはまだ送信されていません

1 opens URLアドレスがオープンされました（送信前のパラメータ設定が完了しています）

2 headers_received レスポンスヘッダ情報が受け付けられました

3loading main 返されたコンテンツはサーバー側で準備中です

4 完了レスポンスボディのコンテンツはクライアントターミナルに正常に返されました

xhr.status: HTTP ネットワークステータスコード、サーバーレスポンスコンテンツのステータスを説明します

200 OR ^2d{2} (200 または 2 から始まる) -> どちらもレスポンスボディの内容が正常に返されたことを表します

301 永続リダイレクト/永続転送

302 一時リダイレクト/一時転送サーバー負荷分散

304 今回取得した内容はキャッシュ内のデータの読み込みです

400 クライアントからサーバーに渡すパラメータに誤りがあります

401 アクセス権限がありません

404 クライアントがアクセスしたアドレスが存在しません

500 不明なサーバーエラー

503 サーバーが過負荷になっています

　　if(xhr.readyState===4 && /^2\d{2}$/.test(xhr.status)){
　　　　var val = xhr.responseText;
　　}
}

リクエストの送信: パラメーターはリクエスト本文でサーバーに渡される内容です

xhr.send(null);

HTTPメッセージとajaxの基礎知識を例で解説

関連記事