javascript는 xmlhttp object_javascript 기술을 합리적으로 생성하고 사용하기 위해 xmlhttp 개체 풀을 구축합니다.

클라이언트 측에서 ajax 기술을 자주 사용한다면 xmlhttp 객체를 여러 번 생성해야 합니다. 물론, 아시다시피 전역 변수를 사용하여 인스턴스를 캐시하는 등 인스턴스 생성 방식을 개선할 수 있습니다(클라이언트의 싱글톤 모드?!). 이는 동기 통신에 매우 효과적이지만 이 방법은 적합하지 않습니다. 비동기 통신은 프로세스를 차단하지 않으면 마지막 통신이 완료되기 전에 사용자가 동일한 xmlhttp 인스턴스를 다시 호출할 수 있으므로 통신에 문제가 있습니다. 이전 호출이 트리거됩니다(이는 이전 호출이 실패했음을 의미함). xmlhttp 인스턴스를 보유하기 위해 풀을 설정하면 가장 확실한 이점은 중복 개체를 생성하지 않으며 동시에 호출되는 동일한 xmlhttp 인스턴스가 다시 작동되지 않는다는 것입니다.

구체적인 구현 아이디어:
생성된 xmlhttp 객체 인스턴스를 배열을 사용하여 저장한 다음 호출될 때마다 풀에서 인스턴스를 가져옵니다. xmlhttp 인스턴스의 통신이 완료된 후에는 자체 ReadyState 속성으로 해당 시점에 유휴 xmlhttp 인스턴스가 없는지, 풀에 있는 인스턴스 수를 식별할 수 있으므로 별도의 처리를 수행할 필요가 없습니다. 최대 인스턴스 수보다 적으면 새 인스턴스를 만들어 풀에 넣으세요. 다시 개선된 구현 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다

//XMLHTTP를 캡슐화하는 MyAjaxObj 클래스
var MyAjaxObj = new Object();
var maxXmlHttpCount = 5; //최대 5개의 xmlhttp 객체가 존재합니다.

MyAjaxObj.reqList = []; //

MyAjaxObj.getFreeObj = function() {
var req = null
var len = this.reqList.length; /먼저 현재 풀에서
를 가져옵니다. for (var i = 0; i < len; i ) {
if (this.reqList[i]) {
if (this.reqList[i]. ReadyState == 4 || this.reqList[i].readyState == 0) {
req = this.reqList[i]
break
}
//유휴 객체가 없으면 독립적으로 생성
if (req == null) {
if (this.reqList.length < maxXmlHttpCount) {
req = getXmlHttp()
this .reqList.push(req);
}
}
req;
}


//다른 브라우저와 호환되는 XMLHTTP 객체 생성
function getXmlHttp() {
var xmlHttp = false
var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0", "MSXML2 . XMLHTTP",
"Microsoft.XMLHTTP"];
for (var i = 0; i < arrSignatures.length; i ) {
try {
xmlHttp = new ActiveXObject(arrSignatures[i ] );
return xmlHttp;
}
catch (oError) {
xmlHttp = false; //무시
}
}
// 새로운 오류 발생("MSXML 시스템에 설치되어 있지 않습니다.");
if (!xmlHttp && typeof XMLHttpRequest != 'undefine') {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}

/* 서버에 요청을 보내는 XMLHTTP 작업을 캡슐화합니다.
url: 서버에 대한 경로 요청 메서드: 요청 메서드(get/post): when 서버는 결과를 성공적으로 반환합니다(C# 콜백 함수와 유사)***
data: 서버에 요청할 때 첨부된 데이터: URL이 인코딩되었는지 여부: callBackError; 서버가 오류를 반환할 때 호출되는 함수
*/
MyAjaxObj.send = function(url, method, callback, data, urlencoded, cached, callBackError) {
var req = this.getFreeObj(); //풀에서 XMLHTTP를 인스턴스화하거나

의 인스턴스를 직접 인스턴스화합니다.//XMLHTTP 요청 상태가 변경될 때 호출됩니다(핵심 처리 기능)
req.onreadystatechange = function() {
// 요청이 로드되었습니다

if (req.readyState == 4) {
// 요청이 성공했을 때
if (req.status == 200) { //또는 req.status < ; 400
// 성공이 정의된 경우 함수 호출 시 성공 콜백 함수를 실행합니다.
if (callback)
callback(req, data)
}
// 요청 시

else {
/ /실패 콜백 함수가 정의되면 실패 콜백 함수를 실행합니다.
if (callBackError)
callBackError(req, data)
}

// 풀 관리를 통해 리소스를 해제하기 위한 메소드를 저장할 수 있습니다
// try {
// delete req;// req = null
// }
// catch (e) {
// 경고 (e.message)
// }
}
}

//다음에 서버로 다시 보내는 경우 POST 모드
if (method.toUpperCase() == "POST" ) {
req.open("POST", url, true)
//요청을 캐시해야 하는지 여부(이것은 가능) req.open 이후에만 설정됨)
if (캐시됨)
req.setRequestHeader("If-Modified-Since", "0")
//요청을 인코딩해야 합니다
if (urlencoded)
req.setRequestHeader('Content-Type', 'application/x- www-form-urlencoded')
req.send(data)
MyAjaxObj.reqList.push(req) ;
}
//GET 모드에서 요청
else {
req.open("GET", url, true)
//요청을 캐시해야 하는지 여부
if (캐시됨)
req.setRequestHeader("If-Modified-Since", "0")
req.send(null)
MyAjaxObj.reqList.push(req);
req req;
}

//모든 XMLHTTP 배열 요소 지우기, 리소스 해제
MyAjaxObj.clearReqList = function() {
var len = MyAjaxObj.reqList.length; 🎜>for (var i = 0; i < len; i ) {
var req = MyAjaxObj .reqList[i]
if (req) {
try {
delete req; 🎜>} catch (e) { }
}
}
MyAjaxObj.reqList = [];
}

//XMLHTTP가 POST에서 요청을 보낼 때 코드를 추가로 캡슐화합니다. 모드
//isClear: XMLHTTP 배열의 모든 요소를 ​​지울지 여부, 다른 매개변수의 의미는 MyAjaxObj.send
MyAjaxObj.sendPost = function(url, data, callback, isClear, isCached, callBackError)를 참조하세요. {
if (isClear) {
MyAjaxObj.clearReqList();
}
MyAjaxObj.send(url , "POST", callback, data, true, isCached, callBackError); 메소드에는 인코딩이 필요합니다
}
//XMLHTTP가 GET 모드에서 요청을 보낼 때 코드를 추가로 캡슐화합니다
MyAjaxObj.sendGet = function (url, args, callback, isClear, isCached, callBackError) {
if (isClear)
MyAjaxObj.clearReqList();
return MyAjaxObj.send(url, "GET", callback, args, false, isCached, callBackError)


마지막으로 추신: 지난 주말 친구와 채팅을 하면서 ajax 애플리케이션의 xmlhttp 객체에 대해 이야기했습니다. 그 친구 Ms.는 나에게 xmlhttp가 비동기적으로 통신하는 이유를 매우 "독실하게" 물었습니다. 나는 이 객체가 우리의 요청 호출을 "비동기적으로" 처리하기 때문에(물론 동기로 설정할 수 있지만 이는 말도 안되는 소리입니다) 현재 요청이 다른 작업에 영향을 미치지 않을 것이라고 생각하지 않고 말했습니다. 이 답변은 매우 "공식적"이며 분명히 문제의 본질을 다루지 않습니다. 형님 꼭 그렇게 보이셔야 해요 BS? 이제 약간의 분석을 통해 개인적으로 각 xmlhttp 비동기 요청이 콜백 함수를 호출할 것이라고 생각합니다. 이 메서드는 "비동기"입니다. C#의 비동기 처리 콜백 메서드를 비교해 보면 실제로는 원칙적으로 동일합니다. 하하, 이제야 알았네요. 생각만 해도 너무 뿌듯하고 기대됩니다.