jQuery実装原理のシミュレーションコード -5 Ajax_jquery

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

// XHR オブジェクトを作成します
var xhr; 🎜>if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
else if (window.ActiveXObject) {
xhr = new ActiveXObject("Msxml2.XMLHTTP"); 🎜>}
else {
throw new Error("このブラウザでは Ajax がサポートされていません");
}
function ready()
{
alert("Start.. ... .");
// イベントを通じて非同期リクエストを処理します
xhr.onreadystatechange = function()
{
if( xhr.readyState == 4 )
{
alert( "準備完了。");
if( xhr.status == 200 )
{
alert("サーバーから返された結果を正常に取得しました。");完了すると、サーバーを取得できます。 返されたコンテンツ
alert( xhr.responseText );
// サーバーから返された json オブジェクトを取得します
var alice = eval( "(" xhr.responseText ")" );
alert( alice. name );
}
}
};
//リクエストパラメータを設定します
xhr.open("get", "data.json" ) ;
xhr.send( null );
}


jQuery は、一般的なアクセス メソッドを jQuery オブジェクトに追加して、それを使用する jQuery オブジェクト。

コードをコピー

コードは次のとおりです: // 主な拡張機能は jQuery にあります。アヤックス。 jQuery.extend({ // #6299

// リクエストのデフォルトパラメータ

ajaxSettings: {
url: location.href,
type: "GET",
contentType: "application/x-www-form-urlencoded",
data: null,
xhr: window.XMLHttpRequest && (window.location.protocol !== "file:" || !window.ActiveXObject)
function () {
return new window.XMLHttpRequest();
} :
function () {
try {
return new window.ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
},
// jQuery.ajaxSettings の設定とリクエスト パラメーターの設定に使用されます
ajaxSetup: function (settings) {
jQuery. extend(jQuery.ajaxSettings, settings);
},
ajax: function (origSettings) { // 実際の ajax 関数
var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings ) ;
// xhr オブジェクトを作成します
xhr = s.xhr();
// コールバック関数
var onreadystatechange = xhr.onreadystatechange = function (isTimeout) {
if (xhr.readyState === 4) {
if (xhr.status == 200) {
s.success.call(origSettings, xhr.responseText)
}
}
; >//リクエストパラメータを設定します
xhr.open(s.type, s.url);
// リクエストを行うためのデータを送信します
xhr.send(s.data); / return XMLHttpRequest により、リクエストなどの中止が可能になります。
return xhr
},
// get メソッドを使用して、Ajax リクエストを発行します。
get: function (url, data, callback, type) {
// データ引数が省略された場合に引数を移動します
if (jQuery.isFunction(data)) {
type = type callback;
data = null;
}
return jQuery.ajax({
type: "GET",
url: URL,
data: データ,
success: コールバック,
dataType: type
});
}

}); // #6922
// jQuery オブジェクトを拡張し、load メソッドを追加します
jQuery.fn.extend(
{
load: function (url) {
var self = this;
jQuery.get(url, function (data) {
self.each(function () {
this.innerHTML = data) ;
}
)
}
)
}
}
)


ページ内では以下のように使用できます。




コードをコピー

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

.org/1999/xhtml"> ;head>