최근에 나는 많은 Ajax 작업을 수행했으며 백그라운드에서해야 할 일을해야합니다. 내가 지금 사용하는 ajax 기능은 배경 직원이 캡슐화하지만 jQuery ajax를 기반으로하므로 jQuery없이 쓸모가 없습니다. 그리고 jQuery의 Ajax 방법은 매우 완전하고 직접 사용할 수 있다고 생각합니다. jQuery가 있으면 그의 ajax는 헛되지 않습니다. 내가 부족한 것은 jQuery없이 사용할 수있는 ajax 방법입니다.
그래서 나는 또한 하루를 쓰는 것을 보냈습니다. 매개 변수와 호출 방법은 jQuery의 ajax와 유사합니다. xhr = xmlhttprequest이기 때문에 XHR이라고합니다.
코드 사본은 다음과 같습니다.
/*
* 이름 : XHR, AJAX 캡슐화 기능
* 설명 : jquery의 Ajax 호출 방법을 모방하는 Javax 통화 캡슐화 클래스
* 저자 : 10 년의 빛
*/
var xhr = function () {
var
ajax = function () {
return (창에서 'xmlhttprequest')? 기능 () {
새로운 xmlhttprequest ()를 반환합니다.
} : 기능 () {
New ActiveXobject ( "Microsoft.xmlhttp")를 반환합니다.
}
} (),
formatdata = function (fd) {
var res = '';
for (fd in fd) {
res+= f+'='+fd [f]+'&';
}
반환 Res.slice (0, -1);
},
ajax = function (ops) {
var
root = this,
req = ajax ();
root.url = ops.url;
root.type = ops.type || 'responsetext';
root.method = ops.method || '얻다';
root.async = ops.async || 진실;
root.data = ops.data || {};
root.complete = ops.complete || 기능 () {};
root.success = ops.success || 기능(){};
root.error = ops.error || 함수 (s) {alert (root.url+'-> 상태 :'+s+'error!')};
root.abort = req.abort;
root.setData = function (data) {
for (data in data) {
root.data [d] = data [d];
}
}
root.send = function () {
var datastring = formatdata (root.data),
sendstring, get = false,
async = root.async,
완료 = root.complete,
메소드 = root.method,
유형 = root.type;
if (method === 'get') {
root.url+= '?'+datastring;
get = true;
}
req.open (method, root.url, async);
if (! get) {
req.setRequestHeader ( "content-type", "application/x-www-form-urlencoded");
SendString = Datastring;
}
// 보내기 전에 onreadyStateChange 메서드를 재설정하십시오. 그렇지 않으면 새 동기화 요청이 나타나고 두 개의 성공적인 콜백이 실행됩니다 (Chrome 등은 요청을 동기화 할 때 onreadyStateChange도 실행합니다).
req.onreadyStateChange = Async? 기능 () {
// console.log ( 'async true');
if (req.readystate == 4) {
완벽한();
if (req.status == 200) {
root.success (req [type]);
} 또 다른 {
root.error (req.status);
}
}
} : null;
req.send (sendstring);
if (! async) {
//console.log('async false ');
완벽한();
root.success (req [type]);
}
}
root.url && root.send ();
};
return function (ops) {return new ajax (ops);}
} ();
매개 변수 설명 :
1.URL : 요청 주소. 당신은 그것을 작성할 수 없으며 요청이 시작되지 않습니다. 그러나 당신이 그것을 채우지 않고 강제로 보내지 않으면, 나는 실수에 대해 당신을 비난하지 않을 것입니다.
2.method : 'get'또는 'post', 모두 대문자, 기본값 GET
3.Data : 전송 될 데이터는 객체입니다
4. async : 비동기이든 기본적이든
5. 유형 : 반환 된 데이터 유형은 ResponseText 또는 ResponseXML이며 기본 ResponseText입니다.
6.complete : 요청이 완료되면 실행 된 기능
7. Success : 요청이 성공할 때 실행 된 기능
8. 오류 : 요청이 실패하면 기능이 실행됩니다
참고 : 유형 매개 변수는 jQuery의 데이터 유형만큼 풍부하지 않으며 기본 ajax의 responseetext 또는 responsexml 만 있습니다. JSON 데이터가 반환되면 텍스트를 JSON으로 변환하기 위해 성공 함수에서 직접 처리해야합니다.
기능 설명 :
인스턴스화 된 XHR 객체에 사용할 두 가지 기능이 있습니다. 하나는 전송됩니다. 호출 메소드는 다음과 같습니다. xhr.send ()는 매개 변수가 없습니다. 그 기능은 요청 프로세스를 시작하는 것입니다. 초기화 중에 URL이없는 경우, Send 메소드가 실행되지 않으므로 나중에 URL을 추가하고 수동으로 전송을 시작할 수 있습니다. Send 중에 URL이 없으면 요청이 실패 하고이 오류를 처리하지 않았습니다. 오직 당신만이 오류를 직접 찾을 수 있습니다.
또 다른 방법은 setData이고, 호출 메소드는 xhr.setdata (data_obj)이고 매개 변수는 객체입니다. setData 메소드의 기능은 xhr.data의 데이터 속성의 값을 부분적으로 바꾸는 것입니다. 예를 들어, 이미 xhr.data에는 페이지가 이미 있습니다. xhr.setdata ({page : 2})를 사용하여 이미 데이터에 존재하는 다른 속성 값에 영향을 미치지 않으면 서 값을 업데이트 할 수 있습니다.
통화 방법 :
코드 사본은 다음과 같습니다.
var a1 = xhr ({
URL : '2.php',
데이터:{
'사용자 이름': 'lix',
'비밀번호': '123456',
'성별': '남성',
'인터셋': 'Play'
},
비동기 : false,
방법 : 'get',
성공 : 기능 (데이터) {
var obj = json.parse (데이터);
// ...
}
});
참고 : 새로운 글을 쓸 필요가 없습니다
주요 소개 :
이 프로젝트 경험이 끝나면 Ajax 클래스는 매우 일반적인 기능을 가져야한다는 것을 알았습니다. 요청을 반복적으로 시작하는 것이 편리합니다. 예를 들어, 프로젝트에 Ajax 페이지를 작성할 때 페이지를 돌릴 때마다 요청을 보내야하지만 현재 페이지 번호와 각 페이지의 번호를 제외하고 전송 된 데이터는 변경되지 않습니다. 변경되지 않은 매개 변수를 반복적으로 정의해야한다면 의심 할 여지없이 자원 낭비입니다.
따라서이 XHR 기능은 이미이 기능을 고려했습니다. 페이지 매김의 예를 들어보세요. 페이지를로드 할 때 XHR 객체를 초기화하고 변수 A1로 저장할 수 있습니다. 페이지 회전 요청이 시작되면 다른 매개 변수가 변경되지 않았지만 Pagenumber는 변경되었습니다. 현재 XHR의 SetData 메소드를 호출하여 Pagenumber를 변경할 수 있습니다.
코드 사본은 다음과 같습니다.
a1.setdata ({pagenumber : 2});
참고 : SetData의 매개 변수도 객체입니다.
물론 데이터를 완전히 바꿀 수도 있습니다.
a1.data = {…};
데이터뿐만 아니라 URL 변경, 성공 기능 변경, 게시 GET 변경 및 동기식으로 변경하는 등의 인스턴스화 된 XHR 객체 A1을 더 많이 변경할 수 있습니다. 변경 후 A1.Send () 메서드를 호출하면 설정에 따라 다시 요청이 시작됩니다.
물론, 완전히 관련이없는 또 다른 AJAX 요청이라면이 기성품 A1을 강요 할 필요가 없습니다. 우리는 A2라는 다른 XHR을 인스턴스화 할 수 있습니다.
XHR이라는 이름에 만족하지 않으면 직접 변경할 수 있습니다.
또한 압축 암호화 버전을 제공합니다. 압축되지 않은 버전은 2KB에 대한 주석을 제거하고 압축 버전은 1.00KB입니다.
코드 사본은 다음과 같습니다.
var xhr = function () {var e = function () {window? function () {return new xmlhttprequest} : function () {return new activexObject ( "microsoft.xmlhttp")}}}}} (e) {var t = "; e) {t+= n+"="+e [n]+"&"} return t.slice (0, -1)}, n = function (n) {var r = this, i = e (); r.url = n.url; r.type = n.type || "responceetext"; r.method = n.method || "get"; r.async = n.async || true; r.data = n.data || {}; r.complete = n.complete || functio n () {}; r.success = n.success || function () {}; r.error = n.error || function (e) {alert (r.url+"-> 상태 :"+e+"error!")}; e) {r.data [t] = e [t]}}; r.send = function () {var e = t (r.data), n, s = false, o = r.async, u = r.complete, a = r.method, f = r.type; if (a === "get") {r.url+= "?"+e; s = tr ue} i.open (a, r.url, o); if (! s) {i.setRequestheader ( "content-type", "application/x-www-form-urlencoded "); n = e} I.OnreadyStateChange = O? function () {if (i.readystate == 4) {u (); if (i.status == 200) {r.success (i [f ])} else {r.error (i.status)}}} : null; i.send (n); if (! o) {u (); r.success (i [f])}}; r.url && r.send ()}; return 함수 (e) {return new n (e)}} ()
XHR에는 약간의 불완전 성이 있어야합니다. 앞으로 사용하는 동안 찾을 수 있다면 제 시간에 수정하겠습니다. 만족하지 않거나 불충분하다면 개선을위한 제안을하십시오.