제가 말씀드릴 내용은 아주 기초적인 내용이므로 전문가들은 읽지 마시길 바랍니다. 읽으시면 의견 부탁드립니다. 초보자나 저급 지식에 대해 잘 모르는 사람들도 읽어보면 이해와 기억에 도움이 됩니다.
XMLHttpRequest 객체는 AJAX 함수의 핵심입니다. AJAX 프로그램을 개발하려면 XMLHttpRequest 객체를 이해하는 것부터 시작해야 합니다.
XMLHttpRequest 객체를 이해하려면 XMLHttpRequest 객체를 생성하는 것부터 시작하십시오. 다양한 브라우저에서 XMLHttpRequest 객체를 생성하려면 다양한 방법을 사용하십시오.
먼저 XMLHttpRequest 객체를 생성하는 IE의 방법(방법 1)을 살펴보십시오.
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP" ); //최신 버전의 IE를 사용하여 IE 호환 개체(Msxml2.XMLHTTP)를 만듭니다.
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE 호환 개체(Microsoft.XMLHTTP)를 생성하려면 이전 버전의 IE를 사용하세요.
Mozilla, Opera, Safari 및 IE가 아닌 대부분의 브라우저는 다음 방법(방법 2)을 사용하여 XMLHttpRequest 객체를 생성합니다.
var xmlhttp = new XMLHttpRequest();
실제로 Internet Explorer는 Mozilla, Opera, Safari 및 대부분의 타사 브라우저에서 사용하는 XMLHttpRequest 개체(이하 통칭하여 XMLHttpRequest 개체라고 함) 대신 XMLHttp라는 개체를 사용합니다. IE7도 XMLHttpRequest 객체를 사용하기 시작했습니다.
XMLHttpRequest 개체를 생성할 때 여러 브라우저에서 잘못된 메서드를 사용하는 경우 브라우저는 오류를 보고하고 개체를 사용할 수 없습니다. 따라서 다양한 브라우저와 호환되는 XMLHttpRequest 객체를 생성하는 메서드가 필요합니다.
여러 브라우저와 호환되는 XMLHttpRequest 객체 메서드를 생성합니다.
var xmlhttp = false; //새 변수 요청을 생성하고 false 값을 할당합니다. 판단 조건으로 false를 사용합니다. 이는 XMLHttpRequest 객체가 아직 생성되지 않았음을 의미합니다.
함수 CreateXMLHttp(){
노력하다{
xmlhttp = new XMLHttpRequest(); //XMLHttpRequest 객체를 생성해 보세요. IE를 제외한 브라우저에서는 이 메서드를 지원합니다.
}
잡기 (e){
노력하다{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //최신 버전의 IE를 사용하여 IE 호환 개체(Msxml2.XMLHTTP)를 만듭니다.
}
잡기 (e){
노력하다{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE 호환 개체(Microsoft.XMLHTTP)를 생성하려면 이전 버전의 IE를 사용하세요.
}
잡기 (실패){
xmlhttp = false; //실패할 경우 요청 값이 여전히 false인지 확인합니다.
}
}
}
xmlhttp를 반환;
}
(!xmlhttp)
{
//XMLHttpRequest 객체 생성에 실패했습니다!
}
또 다른{
//성공적으로 생성되었습니다!
}
XMLHttpRequest 객체를 생성한 후 이 객체의 메서드, 속성 및 가장 중요한 onreadystatechange 이벤트 핸들러를 살펴보겠습니다.
메서드:
open() 설명: URL 및 HTTP 메서드와 같은 HTTP 요청 매개변수를 초기화하지만 요청을 보내지는 않습니다.
abort() 설명: 현재 응답을 취소하고 연결을 닫은 다음 보류 중인 모든 네트워크 활동을 종료합니다.
getAllResponseHeaders() 설명: HTTP 응답 헤더를 구문 분석되지 않은 문자열로 반환합니다.
getResponseHeader() 설명: 지정된 HTTP 응답 헤더의 값을 반환합니다.
send() 설명: open() 메서드에 전달된 매개 변수와 메서드에 전달된 선택적 요청 본문을 사용하여 HTTP 요청을 보냅니다.
setRequestHeader() 설명: 열려 있지만 전송되지 않은 요청에 HTTP 요청을 설정하거나 추가합니다.
속성:
ReadyState 설명: HTTP 요청의 상태.
responseText 설명: 지금까지 서버에서 수신한 응답 본문(헤더 제외)이거나 데이터가 수신되지 않은 경우 빈 문자열입니다.
responseXML 설명: 요청에 대한 응답으로, XML로 구문 분석되어 Document 객체로 반환됩니다.
상태 설명: 서버에서 반환한 HTTP 상태 코드입니다.
statusText 설명: 이 속성은 숫자 대신 이름을 사용하여 요청의 HTTP 상태 코드를 지정합니다.
onreadystatechange는 ReadyState 속성이 변경될 때마다 호출되는 이벤트 핸들러 함수입니다.
요청을 보내고 요청 결과를 처리하는 과정에서 XMLHttpRequest 객체를 이해해 보겠습니다.
당연히 요청을 보내기 전에 XMLHttpRequest 객체가 생성됩니다. 이미 존재하는 경우 추가 코드를 작성할 필요가 없습니다.
XMLHttpRequest 객체 생성
var xmlhttp = CreateXMLHttp();
XMLHttpRequest 객체를 생성한 후 어느 웹사이트로 요청을 보내겠습니까? 블로그 파크 홈페이지에서 RSS를 선택해 보겠습니다. 그러면 요청하려는 웹사이트 주소를 어떻게 설정하나요? open() 메소드를 사용하세요.
open(메서드, URL, 비동기, 사용자 이름, 비밀번호)
이 방법에는 5개의 매개변수가 있습니다. http://www.w3school.com.cn/xmldom/dom_http.asp 에서 구체적인 의미를 확인할 수 있습니다.
이것이 우리가 사용하는 것입니다.
xmlHttp.open("get"," http://www.cnblogs.com",true );
get 매개변수는 get 메소드를 사용한다는 의미입니다. 두 번째는 당연히 블로그 공원의 홈페이지인 대상 주소입니다. 물론 우리는 true를 사용합니다. 특정 매개변수 설명은 http://www.w3school.com.cn 에서도 확인할 수 있습니다.
좋아, 목표는 정해져 있고, 보내는 방법은 정해져 있다. send() 메소드를 사용하세요.
send(body), send() 메소드에는 DOM 객체를 나타내는 매개변수가 하나만 있습니다. 다음번에는 이 DOM 객체에 대해 많이 설명해야 합니다.
xmlhttp.send(null);
그게 다야. 자, 전송되었으니 반환된 결과를 어떻게 처리할까요? 이때 XMLHttpRequest 객체 중 가장 중요한 것이 바로 onreadystatechange 이벤트 핸들입니다. 그렇다면 XMLHttpRequest 객체의 ReadyState에 대해 설명해야 합니다. ReadyState에는 각각 0부터 4까지의 5가지 상태가 있습니다.
상태 이름 설명
0 초기화되지 않은 초기화 상태입니다. XMLHttpRequest 객체가 생성되었거나(open()이 호출되기 전) abort() 메서드에 의해 재설정되었습니다.
1 Open open() 메소드가 호출되었으나 send() 메소드가 호출되지 않았습니다. 요청이 아직 전송되지 않았습니다.
2 Sent Send() 메소드가 호출되었으며 HTTP 요청이 웹 서버로 전송되었습니다. 응답이 수신되지 않았습니다.
3 수신 모든 응답 헤더를 수신했습니다. 응답 본문이 수신되기 시작했지만 완료되지 않았습니다.
4 로드된 HTTP 응답이 완전히 수신되었습니다.
그러나 onreadystatechange 이벤트 핸들에서 여러 브라우저가 처리할 수 있는 상태는 일관성이 없습니다. IE와 FireFox는 상태 1~4를 처리할 수 있는 반면 Safari는 상태 2~4를 처리하고 Opera는 상태 3과 4를 처리할 수 있습니다. . 0의 상태는 기본적으로 쓸모가 없습니다. XMLHttpRequest 객체가 생성된 직후 open() 메서드가 호출되고, 객체가 중단에 의해 취소되었는지 확인하려는 경우가 아니면 이때 상태는 1이 되기 때문입니다. (), 그러나 이러한 상황은 여전히 매우 흔합니다. 대부분의 경우 상태가 4(수락 및 완료)인지 확인하는 것으로 충분합니다.
좋아요, 나는 ReadyState에 5개의 상태가 있다는 것을 이해합니다. 그런 다음 처리 반환 결과는 상태가 다른 상태로 변경되는지 확인하고 상태가 변경될 때 변경 사항을 처리해야 하는 XMLHttpRequest 객체를 알려주는 방법입니다. 작성 방법에는 두 가지가 있습니다. 하나는 익명 메소드를 사용하는 것이고, 다른 하나는 메소드를 지정하는 것입니다. 실제로는 동일한 효과를 갖는 서로 다른 작성 메소드입니다.
xmlhttp.onReadyStateChange = function (){
//상태 변경을 처리하는 코드
}
//또는
xmlhttp.onReadyStateChange = getResult;
함수 getResult(){
///상태 변경을 처리하는 코드
}
//그런데 핸들 이름이 비교적 길다는 뜻으로 이렇게 기억하시면 됩니다. On ReadyState Change는 읽기 상태가 변경되었을 때 요청을 보냈다는 의미이며, 반환받는 방법도 명시되어 있습니다. content? responseText와 responseXML이라는 두 가지 속성이 있습니다. 사용하려면 responseXML을 구문 분석해야 합니다. 여기서는 먼저 responseText를 사용하여 무엇이 반환되는지 살펴보겠습니다.
Alert(xmlhttp.responseText); //홈페이지의 HTML 코드가 반환되는지 확인합니다. 성공하는 사람은 당신입니다.
전체 프로세스는 XMLHttpRequest 객체 생성 -> 보내는 주소 및 보내는 방법 지정 -> 요청 보내기 -> 처리 방법 지정 및 반환 결과 처리입니다. 그러나 우리의 일반적인 이해는 이것이지만 전송하기 전에 onreadystatechange 이벤트 핸들의 지정된 처리 방법을 지정해야 하며 그렇지 않으면 상태 변경 이벤트를 처리할 수 없다는 점에 유의해야 합니다.
따라서 다음 프로세스에 따라 기억해야 합니다. XMLHttpRequest 객체 생성 -> 송신 주소 및 송신 방법 지정 -> 상태 변경 처리 방법 지정 -> 요청 보내기 요청이 전송된 후 지정된 처리 방법이 자동으로 수행됩니다. 상태가 변경되면 호출됩니다.
자, 완성된 코드를 살펴보겠습니다.
완성된 코드
var xmlhttp = false; //새 변수 요청을 생성하고 false 값을 할당합니다. 판단 조건으로 false를 사용합니다. 이는 XMLHttpRequest 객체가 아직 생성되지 않았음을 의미합니다.
함수 CreateXMLHttp(){
노력하다{
xmlhttp = new XMLHttpRequest(); //XMLHttpRequest 객체를 생성해 보세요. IE를 제외한 브라우저에서는 이 메서드를 지원합니다.
}
잡기 (e){
노력하다{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //최신 버전의 IE를 사용하여 IE 호환 개체(Msxml2.XMLHTTP)를 만듭니다.
}
잡기 (e){
노력하다{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE 호환 개체(Microsoft.XMLHTTP)를 생성하려면 이전 버전의 IE를 사용하세요.
}
잡기 (실패){
xmlhttp = false; //실패할 경우 요청 값이 여전히 false인지 확인합니다.
}
}
}
xmlhttp를 반환;
}
xmlhttp = CreateXMLHttp();
xmlhttp.open("get"," http://www.cnblogs.com",true );
xmlhttp.onReadyStateChange = getResult;
xmlhttp.send(null);
함수 getResult(){
if(xmlhttp.readyState == 4){
경고(xmlhttp.responseText);
}
}
모든 것이 괜찮은 것 같지만 네트워크 전송 중에 HTML 코드가 잘못되거나 우리가 지정한 주소가 유효하지 않게 되면 어떻게 될지 생각해 본 적이 있습니까? 이때 서버에서 반환하는 HTTP 상태 코드인 상태 속성을 사용해야 합니다. xmlhttp.status가 200이면 전송 프로세스가 완료되고 오류가 없음을 의미합니다. HTTP 상태 코드의 구체적인 의미를 보려면 W3C 조직 웹사이트로 이동하여 http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1 주소를 확인하세요.
getResult() 메소드를 아래와 같이 작성하면 정말 괜찮을 것 같습니다.
함수 getResult(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
경고(xmlhttp.responseText);
}
}
좋아, 원래는 매우 간단한 일이 내가 그것에 대해 많이 쓰고 나니 장황해 보이는 것 같습니다. 그러나 프로그래밍의 기본 내용을 이해하는 것이 매우 중요하다고 생각합니다. 요즘에는 AJAX 프로그램을 개발하는 데 JS 라이브러리가 많이 사용되므로 이러한 기본 코드를 직접 작성할 필요는 없습니다. 예를 들어, 유명한 jQuery를 사용하지만 기본 사항을 잘 이해하고 있다면 이러한 라이브러리는 오류를 보고하거나 문제가 있는 경우 오류가 있는 위치를 매우 빠르게 파악하고 더 빠르게 변경 작업을 수행할 수 있습니다. 프로그램을 정상적으로 실행시키세요.