ajax技術を理解して、パッケージングのもとでajax要求を生みます.
9513 ワード
一、Ajax概要 Ajaxは である. Ajaxは技術です.言語ではありません. XHTML+CSSを使用して、ノーマライズされたレンダリング を示す. XMLとXSLTを用いてデータ交換および関連動作 を行う. XMLHttpRequestオブジェクトを使用して、Webサーバと非同期データ通信を行う . Javascriptを用いてDcument Object Modelを操作して動的表示およびインタラクションを行う . JavaScriptを使用して、すべてのデータをバインディングし、処理する .
長所: ページローカルリフレッシュ:ユーザー待ち時間を減らし、ユーザー体験を向上させる. は、サーバと非同期的に通信する:ユーザの操作を中断する必要がなく、より迅速な応答能力を持つ .必要に応じてデータを取得し、帯域幅を節約する.
欠点: は、ブラウザの後退機構を破壊しました.解決策:HTML 5直接操作閲覧履歴 は検索エンジンの最適化に不利である.解決策:(更新待ち) **セキュリティ問題:***Ajax技術は、企業データに対して直接的なチャネルを確立したように、開発者が気付かないうちに、以前よりも多くのデータとサーバ論理 を暴露することができます.
コア: ＊構成:＊JavaScript、XMLHTTPRequest、DOMオブジェクト は、XMLHttpRequestオブジェクトを介してサーバに非同期要求を送信し、サーバからデータを取得し、その後、JavaScriptでDOMを操作してページ を更新する.
作業原理: は、ユーザとサーバとの間に中間層(ajaxエンジン)を追加したものに相当し、非同期要求データ(ユーザ操作とサーバ応答を非同期化する) は、すべてのユーザ要求がサーバに提出されているわけではありません.いくつかのデータ検証(例えば、ユーザがデータを入力したかどうかを判断する)やデータ処理(例えば、ユーザがデータを入力したかを判断する)などは、Ajaxエンジンに任せます.サーバから新しいデータを読み出す必要があると判断した場合だけ、Ajaxエンジンに代わってサーバに要求を提出します.
比較: 従来のJS取得データ:ユーザがHttp要求をトリガするごとに、空き待ち時間が必要です.サーバは完全なHTMLページに戻ります.毎回のデータのインタラクションは、新しいページです.小さなインタラクションでも、ユーザーはサーバーの応答と完全なHTMLページを待つ必要があります.短所:帯域幅の無駄、アプリケーションの応答時間は、サーバの応答時間 に依存する. Ajax突出点:*Ajaxは、Httpプロトコルに基づいて、非同期的にサーバと通信する*サーバにデータを要求して、ページを更新する必要がない(ページ部分更新)ので、全体の実行効率とユーザ体験 が大幅に向上しているということが分かります.
二、Ajaxのコアオブジェクト
1.XMLHttpRequest対象はAjax技術の核心である. Javascriptは、XMLHttpRequestオブジェクトを介して直接サーバと対話する(データを要求し、データを取得する) . XMLtpRequestオブジェクトの略称は、Ajax技術の中核であるAjax技術のエンジン です. XMLtpRequestオブジェクトは、ブラウザの内蔵オブジェクトとして、HTTP要求と応答情報 の送信と受信を実現する.
2.xhrオブジェクトの属性
readyState:要求の状態(デジタルフォーマット)を返します.の値は5種類あります.以下の通りです. 状態
名前
説明
0
ユニトニック
初期化状態:XMLHttpRequestオブジェクトが作成されましたか?またはabort()メソッドにリセットされました.
1
Open
要求はまだ送信されていません.Open()メソッドは起動されましたが、send()メソッドは起動されていません.
2
Send
応答が受信されていません.Send()メソッドが起動され、HTTP要求がWebサーバに送信されました.
3
Receiving
すべての応答ヘッダはすでに受信され、応答体は受信を開始しましたが、まだ完了していません.
4
Loaded HTTP
応答は完全に受信されました.
レスポンスText:応答体(文字列フォーマット)を返します.この属性は、これまでに受信した応答体(ヘッダを含まない) を表している.データが受信されていない場合、空の文字列 に戻る. readyState値が3未満の場合、この属性の値は必ず空の文字列 である. readyState値が3の場合、これは属性の値であり、応答体全体であり、部分応答体 であるかもしれない.
レスポンスXML:応答体(xmlフォーマット)この属性は、これまでに受信した応答体(ヘッダを含まない) を表している.
status:サーバから返信されたHTTPステータスコード(デジタルフォーマット) readyStateが3未満の場合、この属性を読み取ると異常が発生します. 一般的な状態コードは以下の通りである. 200:成功を求める 404:ファイル、クエリ、またはurl が見つかりませんでした. 400~499:クライアント問題 500:サービス端末問題 status Text:サーバから戻るHTTP状態(詳細説明)
3.xhr対象の方法
open()HTTP要求を初期化しますが、要求を送信しません.文法: 作用: は に設定します.は、 は、以前のリクエストヘッダを削除し、受信した応答ヘッダ を削除する.は、応答体、応答状態コードをデフォルト値 に設定する.
send()HTTP要求を送信する(Webサーバのネットワーク接続を開く)文法: 前にopen()を呼び出した時に指定されたHTTP方法、url及び認証資格(あれば) の前にset Request Header()を呼び出した時に指定された要求ヘッダ(もしあれば) この方法に渡すbodyパラメータ 作用: は、readyStateを2に設定し、Webサーバのネットワーク接続 を開く.は部分応答を受けた後、 に設定する.は、すべての応答を受け入れた後、 に設定する.
特別な状況: が投げられます.もし に戻ります.
set Request Header()設定要求ヘッダ文法: を含むべきではない. を含むべきではない.
制約:この方法は要求ヘッダ情報を設定し、 を設定しなければならない.要求ヘッダには、次のようなものが含まれている. Host Connection Keep-Alive Acctept charst Acceept Enccoding If-Maodified-Since If-None-Motch If-Range Range get ResonseHeader()指定ヘッダの取得文法: get All Response Headers()すべての要求ヘッダを取得文法: 4.xhr対象のイベント
onreadystatechange readyStateが変わるとこのイベントが発生します.
三、パッケージ一つのオリジナルのAjax
Asynchronous Javascript And XMLの簡略二、Ajaxのコアオブジェクト
1.XMLHttpRequest対象はAjax技術の核心である.
2.xhrオブジェクトの属性
readyState:要求の状態(デジタルフォーマット)を返します.
名前
説明
0
ユニトニック
初期化状態:XMLHttpRequestオブジェクトが作成されましたか?またはabort()メソッドにリセットされました.
1
Open
要求はまだ送信されていません.Open()メソッドは起動されましたが、send()メソッドは起動されていません.
2
Send
応答が受信されていません.Send()メソッドが起動され、HTTP要求がWebサーバに送信されました.
3
Receiving
すべての応答ヘッダはすでに受信され、応答体は受信を開始しましたが、まだ完了していません.
4
Loaded HTTP
応答は完全に受信されました.
レスポンスText:応答体(文字列フォーマット)を返します.
レスポンスXML:応答体(xmlフォーマット)
status:サーバから返信されたHTTPステータスコード(デジタルフォーマット)
3.xhr対象の方法
open()HTTP要求を初期化しますが、要求を送信しません.
open(method, url, async, username, password)method要求方式:GET、POST、HEAD urlは、アドレスを要求する.ソースポリシーasyncは、非同期要求であるかどうか:デフォルト値はtrue(オプションパラメータ)である.このパラメータがfalseである場合、要求は同期され、その後のsend()への呼び出しは、応答が完全に受信されるまでブロックされる.username、password:urlに必要な授権のための認証資格(オプション、一般的には書かない)を提供するreadyStateを1 send()方法で使用される要求パラメータを保持し、XMLHttpRequestオブジェクトをリセットして、多重化する.send()HTTP要求を送信する(Webサーバのネットワーク接続を開く)
send(body)body要求体:get要求時bodyはnull;post要求時のbodyは要求体(一文字列または対象)であり、パラメータbodyは以下のいくつかの部分から構成されるべきである.send()またはバックグラウンドスレッドがreadyStateを3 send()またはバックグラウンドスレッドは、readyStateを4 readyStateが1でないと(つまり、open( )を起動していない方法)、異常open()パラメータasyncがfalseであれば、send( )方法はブロックされて戻りません.readyStateが4であり、サーバの応答が完全に受信されてからset Request Header()設定要求ヘッダ
setRequestHeader(name, value)nameヘッダの名前:このパラメータは空白、コロンまたは改行valueヘッダの値:このパラメータは改行open( )を呼び出した後、send( )を呼び出す前に、getResponseHeader(name) getAllResponseHeaders( ) onreadystatechange readyStateが変わるとこのイベントが発生します.
三、パッケージ一つのオリジナルのAjax
<script>
// 1：jquery ajax
$.ajax({
url: 'http://118.31.238.237:8080/metro/get', //
type: 'GET', //
data: {cityId:2}, //
dataType: 'json',
success: (response) => {
console.log(response)
}
});
// 2： ajax
function ajaxMy(options) {
let {
url,
type,
data,
dataType,
success,
fail,
} = options;
//
type = type.toUpperCase();
dataType = dataType ? dataType : 'json';
let xhr = null;
// 1. xhr
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else { //IE6
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 2.
if (type === 'GET') {
// get
let requestParams = '?';
for (let [key, value] of Object.entries(data)) {
requestParams += `${key}=${value}&`;
}
requestParams = requestParams.slice(0, -1);
xhr.open('GET', url + requestParams);
xhr.send(null);
} else if (type === 'POST') {
// ，
xhr.open("POST", options.url, true);
//
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//
xhr.send(data);
}
// 3.
xhr.onreadystatechange = () => {
if (xhr.readyState ===4) {
if (xhr.status >= 200 && xhr.status < 300) {
success && success(JSON.parse(xhr.responseText));
} else {
fail && fail(xhr.status)
}
}
}
}
ajaxMy({
url: 'http://118.31.238.237:8080/metro/get',
type: 'GET',
data: {cityId:2},
dataType: 'json',
success: (response) => {
console.log(response)
}
});
script>