jQuery ajax (レビュー) - Baidu Ajax リクエスト分離バージョン_JavaScript スキル

この記事は確かに Baidu ajax に関するものですが、ずっと前のバージョンです。
jQuery ajax モジュールは 800 行、コア関数 jQuery.ajax は 380 行あるため、このコードを直接解析するとコード ロジックで混乱しやすくなります。

それでは、まず初期の Baidu Tangram プロジェクトの単純な ajax コードを分析してみましょう。
最初にこれを使用して、ajax の知識を復習してください。

baidu.ajax.request 分離版

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

/**
* ajax リクエストを送信します
* @author: allstar, erik, berg
* @name ajax.request
* @function
* @grammar ajax.request(url[, options] )
* @param {string} url リクエストを送信する URL
* @param {Object} options リクエストを送信するオプションのパラメータ
* @config {String} [method] リクエストの種類送信済み。デフォルトは GET
* @config {Boolean} [async] 非同期でリクエストするかどうか。デフォルトは true (非同期) です。
* @config {String} [data] 送信されるデータ。 GET リクエストの場合、この属性は必要ありません
* @config {Object} [headers] 設定する http リクエスト ヘッダー
* @config {number} [timeout] タイムアウト、単位 ms
* @ config {String} [username] Username
* @config {String} [password] Password
* @config {Function} [onsuccess] リクエストが成功したときにトリガーされます、function(XMLHttpRequest xhr, string responseText)。
* @config {Function} [onfailure] リクエストが失敗したときにトリガーされます、function(XMLHttpRequest xhr)。
* @config {Function} [onbeforerequest] リクエスト function(XMLHttpRequest xhr) を送信する前にトリガーされます。
*
* @meta standard
* @see ajax.get,ajax.post
*
* @returns {XMLHttpRequest} リクエストを送信する XMLHttpRequest オブジェクト
*/
var ajax = {};
ajax.request = function(url,options,type){
// 非同期かどうかが必要です
var async = options.async||true,
// ユーザー名、パスワード
username = options.username||"",
password = options.password||"",
/ / 送信するデータ
data = options.data||"",
// GET または POST
method = (options.method||"GET").toUpperCase(),
// リクエスト ヘッダー
headers = options.headers||{},
// イベント ハンドラー関数テーブル
eventHandler = {},
// リクエスト データ型
dataType = type ||" string";//xml||string
function stateChangeHandler(){
// 準備ができているかどうかを確認します
if(xhr.readyState == 4){
// xhr を取得しますcurrent Status
var sta = xhr.status;
// 成功したかどうかを判断します
if(sta == 200||sta == 304){
// 成功した場合は成功をトリガーします
fire( "success");
}else{
// 失敗が失敗を引き起こす
fire("failure");
}
// バインディングをクリア
(function (){
xhr.onreadystatechange= new Function();
if (async){
xhr = null;
}
} }
function fire(type){
// タイプを ontype に変更します
type = "on" type;
// イベント ハンドラー テーブルで対応するイベント処理関数を検索します
var handler =eventHandler[type];
// 関数が存在する場合、
if(handler){
// 失敗した場合
if(type != "onsuccess"){
handler (xhr);
// 成功
}else{
// dataType
handler(xhr,dataType!="xml"?xhr.responseText:xhr.responseXML ); に従って異なるデータを返します。
}
}
}
//eventHandler
for(var key in options){
eventHandler[key] = options[key]
}
; // 新しい XMLHttpRequest オブジェクトを作成します
var xhr = new XMLHttpRequest();
// メソッドが GET の場合、データを URL にアセンブルします
if(method == "GET"){
url = (url.indexOf("?")>=0)?"&":"?";
url = data;
// データをクリアします
data = null; }
// 非同期の場合
if (async){
//readystatechange ハンドラーをバインドします
xhr.onreadystatechange = stateChangeHandler;
}
// パスワードが必要かどうかを確認します
if(ユーザー名){
xhr.open(メソッド,url,async,ユーザー名,パスワード);
}else{
xhr.open(メソッド,url,async);
// POST の場合
if(method == "POST"){
// リクエストヘッダを設定
xhr.setRequestHeader("Content-Type", "application/x -www) -form-urlencoded");
}
// オプションにすべてのリクエスト ヘッダー情報を設定します
for(var key in headers){
xhr.setRequestHeader(name,headers[ key])
}
// イベントをトリガーします beforerequest
fire("beforerequest");
// データを送信します
xhr.send(data); // 非同期でない場合
if (!async){
// stateChangeHandler を直接実行してデータを処理します
stateChangeHandler()
}
return xhr;
このコードは比較的理解しやすいです:
• XMLHttpRequest() を通じて新しい XMLHttpRequest オブジェクトを作成します。
•GETかPOSTかを確認し、GETの場合はURLを組み立て、POSTの場合はリクエストヘッダを設定します。
•非同期かどうかを確認し、非同期であればlisten関数stateChangeHandlerを登録します。
•ユーザー名とパスワードが必要かどうかを確認し、open を実行します。
•リクエストを送信します。
•リッスン関数がイベントを処理するまで待ちます。
baidu.ajax.get & baidu.ajax.post

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

/**
* 投稿リクエストを送信します
* @name ajax.post
* @function
* @grammar ajax.post(url, data[, onsuccess])
* @param {string} url リクエストの URL アドレス
* @param {string} data 送信されたデータ
* @param {Function} [onsuccess] リクエストが成功した後のコールバック関数 function(XMLHttpRequest xhr, string responseText)
* @meta standard
* @see ajax.get,ajax.request
*
* @returns {XMLHttpRequest} リクエストを送信する XMLHttpRequest オブジェクト
*/
ajax.post = function(url,data,onsuccess){
return ajax.request(url,{"data":data,"onsuccess": onsuccess,method :"POST"});
}

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

/**
* get リクエストを送信します
* @name ajax.get
* @function
* @grammar ajax.get(url[, onsuccess])
* @param {string} URL 送信リクエストされた URL アドレス
* @param {Function} [onsuccess] リクエストが成功した後のコールバック関数、function(XMLHttpRequest xhr, string responseText)
* @meta standard
* @see ajax.post,ajax . request
*
* @returns {XMLHttpRequest} 要求された XMLHttpRequest オブジェクトを送信します
*/
ajax.get = function(url,data,onsuccess){
return ajax.request(url,{"data": data,"onsuccess": onsuccess});
}

baidu.ajax.get と baidu.ajax.post は両方とも baidu.ajax.request を通じて拡張されます。