【Javascript学習ノート】【HTTPリクエストの照会+Ajax入門】

目次

目次

Ajax

同期および非同期の理解

HTTPリクエスト

完全なHTTP要求プロセス

リクエスト

レスポンス

ステータスコード

ベース

XMLHttpRequestオブジェクトの作成

XMLHttpRequest送信要求

XMLHttpRequest取得応答

例実戦

#

ドメイン間処理-エージェントまたはJSONPメソッド

JSONP

共通ステータスコード

実戦コードDownload

ショートカットリンク

Ajax
Ajaxは、「Asynchronous Javascript And XML」(非同期JavaScriptおよびXML)であり、インタラクティブなWebアプリケーションを作成するWeb開発技術を指す.理解:Webページ全体を再ロードする必要がなく、一部のWebページの技術を更新することができます.
同期と非同期の理解
HTTPリクエスト
コンピュータネットワークという授業では、wiresharkeをダウンロードして、パッケージをつかんで要求された情報をもっと理解したいと学びました.ここで、HTTPリクエストは、ステータスレスリクエストであり、前回サーバに取得した情報を取得するには、再リクエストが必要であり、前回の情報は保持されない.
完全なHTTP要求プロセス

TCP接続の確立（3 ）

WebブラウザがWebサーバに要求コマンドを送信

Webブラウザ送信要求ヘッダ情報(初回握手)

Webサーバ応答(2回目の握手ACK)

Webブラウザ送信応答ヘッダ情報(第3回握手ACK)

Webサーバがブラウザにデータを送信

WebサーバTCP接続を閉じる

リクエスト
GET/POSTリクエスト、リクエストURL、リクエストヘッダ情報(環境、アイデンティティ)、リクエストボディ(本文)
応答

1つの数字と1つの文字からなるステータスコードで、リクエストが成功したか失敗したかを表示します

レスポンスヘッダ情報:サーバタイプ、時間、コンテンツタイプ、長さ

応答体:本文

ステータスコード
ステータスコードは通常3を数字で構成する.1**(情報類):要求を受信し、処理を継続することを示す.顧客は要求101を継続して発行しなければならない.顧客はサーバに要求に従ってHTTPプロトコルバージョン2**( )を変換することを要求する.動作が正常に受信され、理解され、受け入れられたことを示す.200—— ，要求されたリソースはクライアント201に返送される.新しいファイルのURL 202を知ることを促す.ただし、処理が完了していない203-返信情報が不確定または不完全204-要求が受信されたが、返信情報が空の205-サーバが要求を完了し、ユーザエージェントは現在閲覧済みのファイル206をリセットしなければならない--サーバは一部のユーザのGET要求を完了した
3**(リダイレクトクラス): ， 300--要求されたリソースは複数箇所で301を得ることができる--本ページは別のURL 302に永久的に転送される--要求されたページは新しいアドレスに転送されるが、顧客アクセスは元のURLアドレスを通じて引き続きリダイレクトされ、新しいURLはresponseのLocationで返される.ブラウザは新しいURLを使用して新しいRequestを発行します.303——顧客に他のURLまたはアクセス方式304へのアクセスを提案する——前回の要求後、要求されたウェブページは修正されていないが、サーバーがこの応答を返す時、ウェブページの内容は返されず、前回のドキュメントがキャッシュされたことを代表して、305を引き続き使用することができる——要求されたソースはサーバーが指定したアドレスから306を得なければならない——前のバージョンHTTPで使用されたコードは、現行バージョンでは307は使用されません.要求されたリソースの一時的な削除を宣言します.
4**( ):要求にはエラー構文が含まれているか、正しく実行できない400が含まれています.クライアント要求には構文エラーがあり、サーバに理解されていない401があります.要求は許可されていません.このステータスコードは、WWW-AuthenticateヘッダドメインとともにHTTP 401.2-未承認を使用する必要があります:サーバ構成の問題によりログインに失敗したHTTP 401.3-ACLリソースへのアクセス禁止HTTP 401.4-未承認:フィルタによるHTTP 401.5の拒否を許可する-未許可:ISAPIまたはCGIの許可に失敗した402-有効なChargeToヘッダ応答403を保持する-アクセス禁止、サーバはリクエストを受信し、しかしサービス提供拒否HTTP 403.1アクセス禁止:実行可能アクセス禁止HTTP 403.2-アクセス禁止:読み取りアクセス禁止HTTP 403.3-アクセス禁止:書き込みアクセス禁止HTTP 403.4-アクセス禁止:SSL HTTP 403.5-アクセス禁止:SSL 128 HTTP 403.6-アクセス禁止:IPアドレス拒否HTTP 403.7-アクセス禁止アクセス禁止:クライアント証明書を要求するHTTP 403.8-アクセス禁止:サイトアクセス禁止HTTP 403.9-アクセス禁止:接続されたユーザーが多すぎるHTTP 403.10-アクセス禁止:無効なHTTP 403.11の構成-アクセス禁止:パスワード変更HTTP 403.12-アクセス禁止:マッパーアクセス拒否HTTP 403.13-アクセス禁止:クライアント証明書すでに取り消されたHTTP 403.15-アクセス禁止:顧客アクセス許可が多すぎるHTTP 403.16-アクセス禁止:顧客証明書が信用できないか無効なHTTP 403.17-アクセス禁止:顧客証明書が期限切れになったか、まだ発効していない404--404エラーはサーバーに接続できることを示しているが、サーバーは要求されたページを取得できず、要求リソースが存在しない.eg:誤ったURL 405が入力されている--Request-lineフィールドでユーザが定義する方法は406を許可していない--ユーザが送信したAcceptドラッグに基づいて、要求リソースは407にアクセスできない--401のように、ユーザはまずプロキシサーバ上で許可408を得なければならない--クライアントはユーザが指定した空腹時間内に要求409を完了していない--現在のリソース状態に対して、要求が完了しない410--サーバ上にこのリソースが存在せず、さらに参照アドレスがない411--サーバがユーザ定義のContent-Longth属性要求412を拒否する--1つ以上の要求ヘッダフィールドが現在の要求でエラー413である--要求されたリソースはサーバが許可したサイズ414より大きい--要求されたリソースURLはサーバが許可した長さ415より長い--要求リソースは要求項目フォーマット416をサポートしていません.要求にはRange要求ヘッダフィールドが含まれています.現在の要求リソース範囲内にrange指示値はありません.要求にはIf-Range要求ヘッダフィールド417も含まれていません.サーバは要求Expectヘッダフィールドに指定された期待値を満たしていません.エージェントサーバであれば、次のレベルのサーバは要求長を満たすことができません.
5**( ):サーバが適切な要求HTTP 500を正しく実行できない-サーバにエラーが発生しました.要求HTTP 500.100-内部サーバエラー-ASPエラーHTTP 500-11サーバを閉じるHTTP 500-12アプリケーションを再起動HTTP 500-13-サーバが忙しいHTTP 500-14-アプリケーションが無効なHTTP 500-15-globalは許可する.asa Error 501-HTTP 502を実現していない-ゲートウェイエラーHTTP 503:オーバーロードまたはダウンタイムメンテナンスのため、サーバーが現在使用できなくなり、しばらくしてから正常に戻る可能性がある
きそ
XMLHttpRequestオブジェクトの作成

var request=new XMLHttpRequest();

XMLHttpRequest送信リクエスト

open(method,url,async)//    :method=      ，url    ，async boolon         send(string)

例:

xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

XMLHttpRequestレスポンス取得
responseTextは、文字列形式の応答データを取得する.responseXMLは、XML形式の応答データを取得する.
リスニング:readyState、XMLfttpRequestのステータスを取得onreadystatechangeで合計5回トリガー0:要求未初期化1:サーバ接続確立2:要求受信3:要求処理中4:要求完了、応答完了
readyStateが4に等しく、ステータスが200の場合、応答が完了したことを示します.

request.onreadystatechange=function()
{
    if (request.readyState==4 && request.status==200)
    {
    document.getElementById("myDiv").innerHTML=request.responseText;
    }
}

実例実戦
#
ドメイン間処理-エージェントまたはJSONPメソッド
サブ、プライマリドメイン名、またはポートが異なり、ドメイン間に属します.
JSONP
コモンステートコード
200:サーバーの応答は正常です.304:このリソースは、前回のリクエスト後も変更されていません(これは、一般的にブラウザのキャッシュメカニズムで使用され、GETリクエストを使用する場合に特に注意が必要です).400:要求されたリソースが見つかりません.401:リソースへのアクセス権限が不足しています.403:リソースにアクセスする権限がありません.404:アクセスが必要なリソースは存在しません.405:アクセスが必要なリソースは禁止されています.407:アクセスするリソースには、プロキシ認証が必要です.414:要求されたURLが長すぎます.500:サーバ内部エラー.
実戦コードDownload
(github:KuanG 97)実戦コードClickHereをダウンロード
ショートカットリンク
すべてのReact学習ノートのディレクトリClick Here>>すべてのJavascript学習ノートのディレクトリClick Here>>Less学習ノートClick Here>>安利一波フロントエンド開発推奨ツールClick Here>>ESLint問題記録Click Here>>github各種実戦練習ソースダウンロードClick Here>>私のものがあなたを助けることができると思ったら、无限へようこそgithubライブラリコレクションStar~0 v 0~