브라우저 간 설정 innerHTML method_javascript 기술

Ajax는 좋은 것이지만 사용하기가 그리 편리하지는 않습니다. 문제를 요약하면 다음과 같습니다.

생성 및 사용 방법이 브라우저마다 일관되지 않습니다.
브라우저마다 응답에 대한 캐싱 전략이 다릅니다.
브라우저에는 도메인 간 획득 제한이 있습니다.
처음 두 개는 다음과 같습니다. 문제는 XMLHTTPRequest 객체를 캡슐화하여 해결할 수 있습니다. 세 번째 문제에 대한 많은 해결책은 로컬 서버에 릴레이 프록시를 배치하는 것입니다. Modello.ajax는 이 솔루션을 제공하는 도구 세트입니다.

설치
Modello 및 Mdello.ajax 다운로드
압축을 풀고 modello.js, modello.ajax.js, jsproxy.php 세 파일을 서버의 모든 문서 디렉토리에 넣습니다.
다음을 포함합니다. html 페이지
urlget 메서드
에 있는 두 개의 스크립트 파일 modello.js 및 modello.ajax.js Modello.ajax는 사용이 매우 간단합니다. 다음 예를 참조하세요.

// Cross- 설정 도메인 전송 프록시 경로 Define('URLGET_PROXY', '/jsproxy.php'); // 강력한 urlget 메소드 var urlget = Class.get('modello.ajax.Urllib').urlget var url = '.. .'; // var response = urlget(url); // var data = '...'를 얻기 위한 동기 POST 메소드 var response = urlget(url, data); // var 콜백을 얻기 위한 비동기 POST 메소드 = function (response) { // ...}var ret = urlget(url, data, callback); // 요청 헤더 설정 var headers = ["User-Agent: Modello.ajax's urlget"];var ret = urlget ( url, data, callback, headers); // 명명된 채널 사용 var chunnel = '...'; var ret = urlget(url, data, callback, headers, chunnel) // 응답 객체 사용 if (response.getStatus ) == 200) { 경고(response.getText());}// 도메인 간 전송 프록시 경로 설정
Define('URLGET_PROXY', '/jsproxy.php')

// 강력한 urlget 메소드
var urlget = Class.get('modello.ajax.Urllib').urlget;

var url = '...'

// 동기식 GET 메소드
var response = urlget(url);

//
var data = '...'
를 얻기 위한 동기식 POST 메서드 = urlget(url, data) ;

//
var callback = function (response) {
// ...
}
var ret = urlget(url, data, callback)을 얻기 위한 비동기 POST 메서드 );

//요청 헤더 설정
var headers = ["User-Agent: Modello.ajax's urlget"]
var ret = urlget(url, data, callback, headers); 🎜 >
//이름이 지정된 채널 사용
var chunnel = '...';
var ret = urlget(url, data, callback, headers, chunnel)//사용 응답 객체
if (response.getStatus() == 200) {
Alert(response.getText())
}

urlget 각 매개변수에 대한 설명은 다음과 같습니다. 🎜>
url: 대상 리소스의 URL 주소입니다.
데이터: POST 데이터. 데이터가 비어 있으면 GET 메서드를 사용하여 가져옵니다.
콜백: 콜백 함수를 비동기적으로 가져옵니다. 콜백이 비어 있으면 동기 획득이 사용됩니다.
헤더: 추가 요청 헤더입니다. 이것은 배열이고 각 항목은 문자열이며 줄 머리글을 설정하고 문자열 끝에 캐리지 리턴이 허용되지 않습니다.
chunnel: 이름이 지정된 채널입니다. 연결 채널을 재사용하는 데 사용됩니다.
urlget 반환 값:

동기적으로 획득한 경우 Response 객체가 성공적으로 반환되고, 실패하면 false가 반환됩니다. 비동기식으로 획득한 경우 true를 성공적으로 반환하고, 획득 후 콜백 함수를 호출하며, 실패하면 false를 반환합니다. 명명된 채널이 지정되었지만 해당 채널이 다른 요청에 의해 점유된 경우 동기 및 비동기 모두 false를 반환합니다.

콜백 함수 매개변수:

response: 응답 객체.
chunnel: 호출 시 지정된 명명된 채널입니다.
응답 객체
응답 객체는 응답의 다양한 데이터 항목에 액세스하는 데 사용됩니다.다음 인터페이스를 제공합니다.

response.getStatus(); // HTTP 응답 코드(정수) response.getStatusText(); // 응답 코드의 리터럴 해석 response.getHeader(key); key 응답의 헤더 데이터 response.getAllHeaders(); // 응답의 모든 헤더 데이터(상태 줄 제외) response.getRawHeader() // 응답의 원래 헤더 데이터(상태 줄 포함) .getText() ; // 응답의 본문 데이터 response.getXML(); // 응답의 본문 데이터는 Xml 문서 객체로 형식화됩니다. response.getStatus() // HTTP 응답 코드(정수)
response.getStatusText(); // 응답 코드의 리터럴 설명
response.getHeader(key); // 키로 지정된 응답의 헤더 데이터
response.getAllHeaders(); response (상태 줄 제외)
response.getRawHeader(); // 응답의 원래 헤더 데이터(상태 줄 포함)
response.getText() // 응답의 본문 데이터
response .getXML(); // 응답 본문 데이터는 Xml 문서 객체로 형식화됩니다.

대부분의 경우 urlget 함수를 사용하는 것으로 충분하며 브라우저와 도메인 전반에 걸쳐 사용할 수 있습니다. 일부 하위 수준 작업을 수행하려는 경우 Modello.ajax는 브라우저 간 사용을 위한 두 가지 기본 클래스인 연결 및 요청을 제공합니다.

연결 클래스
이는 브라우저 간 사용을 제공하는 정적 클래스입니다. 이 메소드는 XMLHTTPRequest 객체를 반환합니다. 사용 방법은 다음과 같습니다.

/* * 크로스 브라우저 버전의 XMLHTTPRequest 객체를 성공적으로 반환하고, * 실패 시 null을 반환합니다. */var conn = Class.get('modello.ajax.Connection').get();/*
* XMLHTTPRequest 객체의 크로스 브라우저 버전을 성공적으로 반환하고,
* 실패 시 null을 반환합니다.
*/
var conn = Class.get('modello.ajax.Connection').get();

요청 클래스
이것은 XMLHTTPRequest 객체를 캡슐화한 것입니다. 인터페이스를 사용하고 브라우저 응답 캐싱 문제를 해결하지만 도메인 간 획득 기능은 없습니다. Request에서 제공하는 속성과 메소드는 다음과 같습니다.

/* * 클래스 경로 */var Request = Class.get('modello.ajax.Request') /* * 인스턴스 생성 * url, method; , 데이터는 모두 선택적 매개변수의 경우 */var request = new Request([url[, method[, data]]]) /* * URL 설정 */request.setURL(url) /* * 획득 방법 설정 . 현재 지원되는 항목: GET, POST, HEAD */request.setMethod(method) /* * 획득 방법을 설정합니다.현재 지원됨: GET, POST, HEAD */request.setData(data); /* * 콜백 함수 설정 * 콜백 함수의 프로토타입은 다음과 같습니다. * var callback = function (response) {} */request.setHandler(handler) ); /* * 요청 헤더 설정 */request.setHeader(key, value); /* * 요청 헤더 추가 */request.addHeader(header) /* * 요청 보내기 * 비동기 모드 사용 * 기본 동기 메서드 * 호출이 성공하면 동기 메서드는 응답 개체를 반환하고 비동기 메서드는 true를 반환합니다. * 호출이 실패하면 false를 반환합니다. */request.open([async]) /* * 현재 요청의 상태를 쿼리합니다. * 문자열 설명을 반환합니다. 다음의 경우: * 초기화되지 않음: 초기화되지 않음 * 로드 중: 초기화됨 * 로드됨: 데이터 전송 * 대화형: 데이터 전송 중 * 완료: 완료됨 */request.getState() /* * 현재 사용되는 Connection 객체를 반환합니다. */request.getConnection() ; /* * Response 객체를 반환합니다. * 현재 요청 상태가 Complete가 아닌 경우 null을 반환합니다. */request.getResponse() /* * 현재 요청을 중단합니다. request.abort(); /* * 모든 요청 헤더 정리 * /request.reset() /* * 위의 방법 외에도 요청 객체에 대한 이벤트 처리 기능을 설정할 수도 있습니다. 다음 이벤트 */ request.onException = function() {};request.onLoading = function() {};request.onLoaded = function() {};request.onInteractive = function() {};request.onComplete = function( ) {};/*
* 클래스 경로
*/
var Request = Class.get('modello.ajax.Request')

/*
* 인스턴스 생성
* url, method, data는 모두 선택 매개변수입니다
*/
var request = new Request([url[, method[, data]]])

/*
* URL 설정
*/
request.setURL(url)

/*
* 획득 방법을 설정합니다. 현재 지원되는 항목: GET, POST, HEAD
*/
request.setMethod(method)

/*
* 획득 방법을 설정합니다. 현재 지원되는 항목: GET, POST, HEAD
*/
request.setData(data);

/*
* 콜백 함수 설정
* 콜백 함수의 프로토타입은 다음과 같습니다.
* var callback = function (response) {};
*/
request.setHandler(handler)

/*
* 요청 헤더 설정
*/
request.setHeader(key, value);

/*
* 요청 헤더 추가
*/
request.addHeader(header); 🎜> * 요청 보내기
* async가 true이면 비동기 메서드 사용
* 기본적으로 동기 메서드 사용
* 호출이 성공하면 동기 메서드는 응답 개체를 반환하고 비동기 메서드는 true를 반환
* 호출이 실패하면 균일 반환 false
*/
request.open([async])

/*
* 현재 요청 상태 쿼리
* 다음과 같은 문자열 설명을 반환합니다.
* 초기화되지 않음: 초기화되지 않음
* 로드 중: 초기화됨
* 로드됨: 데이터 전송 중
* 대화형: 데이터가 전송 중
* 완료: 완료됨
*/
request.getState() ;

/*
* 현재 사용되는 연결 객체를 반환합니다.
*/
request.getConnection(); 🎜>/*
* 응답 객체를 반환합니다
* 현재 요청 상태가 완료가 아닌 경우 null을 반환합니다.
*/
request.getResponse()

/*
* 현재 요청 중단
*/
request.abort();

/*
* 모든 요청 헤더 지우기
*/
request.reset() ;

/*
* 제외 위의 방법에서는 Request 객체에 대한 이벤트 처리 기능도 설정할 수 있습니다
* 총 다음과 같은 이벤트가 있습니다
*/

request.onException = function() {};
request.onLoading = function() {};
request.onLoaded = function() {}; };
request.onComplete = function() {};

jsproxy
도메인 간 호출의 경우 Modello.ajax는 로컬 서버에서 릴레이 프록시를 사용합니다. 프록시 방식을 사용하면 개별 브라우저에 대해 특별한 설정을 할 필요가 없고 특정 서버에 의존하지 않으며 확장성 등의 장점이 있습니다. Modello.ajax 도구 세트와 함께 제공되는 프록시는 PHP로 작성되었으며 PHP를 실행할 수 있는 모든 서버에 설치할 수 있습니다.Proxy는 다른 언어로도 작성될 수 있습니다. Modello.ajax는 후속 버전에서 Python 버전의 jsproxy를 제공할 계획입니다. jsproxy의 디자인은 아래에 설명되어 있습니다. 필요한 친구는 이를 참조하여 jsproxy의 다른 언어 버전을 구현할 수 있습니다.

jsproxy는 url, data, headers라는 세 가지 POST 매개변수를 받습니다. url은 대상 리소스의 URL 주소이고, data는 POST 데이터입니다. 비어 있으면 GET 메서드를 사용하여 리소스 헤더를 가져옵니다. jsproxy는 이러한 매개변수를 기반으로 대상 리소스를 얻은 다음 수신된 모든 응답 헤더와 응답 본문을 요청자에게 전달합니다. jsproxy에서 받은 매개변수는 Modello.ajax로 전송되며, 문자셋은 UTF-8로 처리되므로 주의하시기 바랍니다. jsproxy에서 얻은 응답에 대해 가능한 문자 집합이 많이 있습니다. 응답을 전달하기 전에 jsproxy는 현재 응답의 문자 집합을 자동으로 감지하고 전달된 응답 헤더에 이를 표시해야 합니다. 이 단계를 무시하면 요청자가 받은 응답이 왜곡될 수 있습니다.

urlparse, urljoin 함수
urlparse, urljoin과 같은 URL 처리 함수는 다른 스크립팅 언어에서는 매우 일반적이지만 JavaScript에서는 그렇지 않습니다. Modello.ajax는 앞서 언급한 urlget 함수에서 내부적으로 사용되는 두 가지 함수를 제공합니다. 다음은 그 사용법을 설명합니다:

/* * urlparse: URL 분석 기능 */var url = 'http://user:pass@host:port/path?query#flagment';var ret = Class . get('modello.ajax.Ullib').urlparse(url);// 이때 // ret.user == 'user'// ret.pass == 'pass'// ret.host == 'host '// ret.post == 'post', 기본값은 80// ret.path == 'path', '/'로 시작 // ret.query == 'query'// ret.flagment == 'flagment ' /* * urljoin: 두 URL 병합 */var url1 = 'http://www.example.com/about/about.html';var url2 = '/index.html';var url = Class.get( ' modello.ajax.Urllib').urljoin(url1, url2);//현재로서는// url == 'http://www.example.com/index.html'/*
* urlparse: URL 분석 함수
*/
var url = 'http://user:pass@host:port/path?query#flagment'
var ret = Class.get('modello.ajax.Ullib') .urlparse(url);
// 이때
// ret.user == '사용자'
// ret.pass == 'pass'
// ret.host == ' 호스트'
// ret.post == '포스트', 기본값은 80
// ret.path == '경로', '/'로 시작
// ret.query == ' query '
// ret.flagment == 'flagment'

/*
* urljoin: 두 URL 병합
*/
var url1 = 'http://www. example.com/about/about.html';
var url2 = '/index.html';
var url = Class.get('modello.ajax.Ullib').urljoin(url1, url2);
// 현재
// url == 'http://www.example.com/index.html'

요약
Modelello.ajax에서 제공하는 모든 내용을 설명했습니다. , Ajax 애플리케이션 개발 속도를 높이는 데 도움이 되기를 바랍니다. ;)