jQuery ajax(검토) - Baidu ajax는 분리된 version_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] 사용자 이름
* @config {String} [password] 비밀번호
* @config {Function} [onsuccess] 요청이 성공하면 트리거됩니다, function(XMLHttpRequest xhr, string responseText).
* @config {Function} [onfailure] 요청이 실패하면 트리거됩니다. function(XMLHttpRequest xhr).
* @config {Function} [onbeforerequest] function(XMLHttpRequest xhr) 요청을 보내기 전에 트리거됩니다.
*
* @meta 표준
* @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")
}
// 바인딩 지우기
window.setTimeout (함수(){
xhr.onreadystatechange= new Function();
if (async){
xhr = null;
}
},0); >}
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(method,url,async,username,passowrd)
}else{
xhr.open(method,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])
}
// 요청 전 이벤트 트리거
fire("beforerequest")
// 데이터 보내기
xhr.send(data)
// 비동기적이지 않은 경우
(!async){
// 데이터를 처리하기 위해 stateChangeHandler를 직접 실행
stateChangeHandler()
}
return xhr;
이 코드는 비교적 이해하기 쉽습니다:
• XMLHttpRequest()를 통해 새로운 XMLHttpRequest 객체를 생성합니다.
•GET인지 POST인지 확인하세요. GET인 경우 url을 조립하세요. POST인 경우 요청 헤더를 설정하세요.
•비동기식인지 확인하고, 그렇다면 리스닝 함수인 stateChangeHandler를 등록하세요.
•사용자 이름과 비밀번호가 필요한지 확인하고 열기를 실행합니다.
•요청을 보냅니다.
•리스닝 기능이 이벤트를 처리할 때까지 기다립니다.
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 표준
* @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 send 요청된 URL 주소
* @param {Function} [onsuccess] 요청 성공 후 콜백 함수, function(XMLHttpRequest xhr, string responseText)
* @meta 표준
* @see ajax.post,ajax . 요청
*
* @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를 통해 확장됩니다.