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("시작.. ... .");
// 이벤트를 통해 비동기 요청 처리
xhr.onreadystatechange = function()
{
if( xhr.readyState == 4 )
{
Alert( "Ready.");
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 객체에 추가하여 xhr 객체의 사용을 간단히 래핑합니다. 사용할 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); / 요청 등을 중단할 수 있도록 XMLHttpRequest를 반환합니다.
return xhr
},
// ajax 요청을 발행하려면 get 메서드를 사용합니다.
get: function(url, data, callback, type) {
// 데이터 인수가 생략된 경우 인수 이동
if (jQuery.isFunction(data)) {
type = type || callback;
data = null;
}
return jQuery.ajax({
type: "GET",
url: url,
data: data,
success: callback,
dataType: type
});
}

}); // #6922
// jQuery 객체를 확장하고 로드 메서드를 추가합니다.
jQuery.fn.extend(
{
load: function (url) {
var self = this;
jQuery.get(url, function (data) {
self.each(function () {
this.innerHTML = data ;
}
)
}
)
}
}
)


페이지에서는 다음과 같이 사용할 수 있습니다.

코드 복사

코드는 다음과 같습니다. .org/1999/xhtml"> < ;head>

<입력 유형 ="버튼" id="btn" value=" me" />