XMLHTTP 객체 캡슐화 기술 샘플 코드에 대한 자세한 설명

Ajax 기술의 구현은 주로 xmlhttprequest에 의존하지만 비동기 데이터 전송을 위해 호출할 때 xmlhttp는 단기 프로세스이므로(이벤트 처리 후 파기됨) 객체가 패키징되지 않으면 호출해야 하는 xmlhttprequest 재구성에서는 각 호출에 대해 큰 코드 섹션을 작성해야 하는데 이는 실제로 좋은 생각이 아닙니다. 다행히도 이제 많은 오픈 소스 Ajax 프레임워크가 xmlhttp 캡슐화를 위한 솔루션을 제공합니다. 여기서는 ajaxtags와 함께 제공되는 프로토타입-1.4.0.js를 마스터로 사용하여 xmlhttp 객체를 재사용 가능한 메서드로 캡슐화하는 방법을 확인합니다.

prototype.js에서는 Ajax

　 var Ajax = {
　　　 getTransport: function() {
　　　　 return Try.these(
　　　　　 function() {return new ActiveXObject('Msxml2.XMLHTTP')},
　　　　　 function() {return new ActiveXObject('Microsoft.XMLHTTP')},
　　　　　 function() {return new XMLHttpRequest()}
　　　 ) || false;
　 },
　　 
　　 activeRequestCount: 0
}

변수가 먼저 정의됩니다. 이 변수는 Ajax.getTransport()를 호출하면 매번 반환되는 것을 볼 수 있습니다. 새로운 xmlhttprequest 객체.

기본 메소드 Ajax.Base와 기본 메소드의 프로토타입은 Ajax 변수에 정의되어 있습니다(초기에는 각 스크립트 메소드에는 기본적으로 Object의 프로토타입을 상속하는 빈 프로토타입이 있습니다. 만약 우리가 프로토타입이 Object에서 변경되면 모든 스크립트 메소드가 변경됩니다.) 이 기본 메소드는 Ajax.Request에 상속됩니다. 상속받은 프로토타입의 동일한 이름의 메소드나 변수가 Ajax.Request에 채워지면 변경됩니다. .

Ajax.Base 프로토타입에서 가장 중요한 것은 나중에 사용할 setOptions 메소드입니다.

setOptions: function(options) {
　　 this.options = {
　　　 method:　　　 'post',
　　　 asynchronous: true,
　　　 parameters:　 ''
　　 }

프로토타입의 요청은 Ajax.Request 프로토타입(Ajax.Request.prototype)을 정의하여 구현됩니다. 그러나 Ajax.Request를 직접 호출할 수는 없습니다. 주된 이유는 Ajax.Request가 통합된 처리 프로세스를 제공하지 않기 때문입니다. 그리고 요청을 통해 응답을 얻어야 할 수도 있습니다. (고객이 메시지를 보냈지만 응답을 받지 못했다고 상상해 보세요. 매우 짜증날 것입니다~) 프로토타입도 우리를 위해 응답(Ajax.Responders)을 캡슐화하지만 둘 다 서로 독립적입니다. 어떻게 통합합니까?

은 프로토타입에 두 가지 솔루션을 제공합니다. 하나는 Ajax.Updater이고 다른 하나는 Ajax.PeriodicalUpdater입니다. 두 솔루션은 3개의 매개변수를 전달해야 한다는 공통점이 있습니다.

container :

응답 데이터를 전달할 위치입니다. 예를 들어 html에서 반환된 데이터를

로 출력하려는 ​​경우에만 해당됩니다. 컨테이너를 이것으로 변경해야 합니다. id 값이면 충분합니다. 컨테이너를 찾을 수 없으면 스크립트 오류가 발생합니다.

url:

요청 요청이 전달될 대상입니다. 요청 객체는 서블릿의 do*** 메소드를 통해서만 자동으로 얻을 수 있으므로 대상은 서블릿 또는 jspservlet이어야 합니다.

options:

구조는 위의 Ajax.Base에서 정의한 setOptions()의 옵션 구조와 동일해야 합니다. 비어 있거나 작성되지 않은 경우 Ajax에서 정의한 초기 값입니다. 기본이 사용됩니다(매개변수를 전달할 때 사용되지 않음).

둘 사이의 차이점은 Ajax.Updater가 완전한 responseText를 컨테이너에 반환한다는 것입니다. responseText가 완전히 얻어지고 예외가 발생하지 않는 경우에만 콘텐츠가 컨테이너에 기록됩니다. responseText, 완전히 획득되었는지 여부에 관계없이 예외가 발생하거나 responseText를 완전히 획득할 때까지 콘텐츠가 컨테이너에 채워집니다. 대부분의 경우 첫 번째 방법을 사용해야 합니다. 첫 번째 방법은 예외가 발생할 때 컨테이너에 예외 정보를 표시하지만 두 번째 방법은 그렇지 않을 수 있기 때문입니다.

이제 xmlhttp가 캡슐화되었으므로 위에서 언급한 세 가지 매개변수만 설정하면 됩니다. 옵션 매개변수를 설정할 때 베이스의 옵션 구조에 따라 설정해야 한다는 점에 유의하세요. post 메소드를 사용하면 opitons에 postBody 속성을 설정하고 전송될 queryString을 본문에 넣을 수도 있습니다. 전송하기 위해 post 메소드를 사용하는 스크립트의 예는 다음과 같습니다.

/*表单提交用post方法*/
function doRequest(container,paraments,url){
　　 var options ={
　　　 method:　　　 'post',
　　　 asynchronous: true,
　　　 postBody: paraments
　　 };
　　 new Ajax.Updater(container,url,options);　　
}

마지막 사항입니다. 중국어 인코딩 문제라고 말해야 합니다. 프로토타입은 전달된 모든 매개변수에 대해 인코딩 변환을 수행하고 전달된 각 값은 encodeURIComponent를 통해 처리됩니다. 인코딩은 utf-8로 변환됩니다. 백그라운드에서 요청을 얻을 때 페이지의 인코딩 형식에 관계없이 request.setCharacterEncoding("UTF-8")을 균일하게 사용하여 요청에 대한 인코딩을 설정해야 합니다. 데이터 전송을 위해 post 메소드를 사용하면 자동으로

request가 실행됩니다. setHeader('Content-type','application/x-www-form-urlencoded') 전송된 데이터의 인코딩 형식이 올바른지 확인하세요.

위 내용은 XMLHTTP 객체 캡슐화 기술 샘플 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!