XML의 DOM은 - HttpRequest에이 개체
XMLHttpRequest 객체를 통해, 사용자는 전체 페이지를 재로드하지 않고도 웹 페이지의 일부분을 업데이트 할 수있다.
XMLHttpRequest 객체
XMLHttpRequest 객체는 뒤에서 서버와 데이터를 교환하기 위해 사용된다.
당신이 할 수 있기 때문에 XMLHttpRequest객체는 개발자의 꿈이다 :
- 페이지를 다시로드하지 않고 웹 페이지를 업데이트
- 페이지는 서버 요청 데이터로부터로드되면
- 페이지가로드 된 이후의 데이터는 서버로부터 수신
- 백그라운드에서 서버로 데이터를 전송
XMLHttpRequest 객체를 생성
모든 최신 브라우저 (IE7 +, 파이어 폭스, 크롬, 사파리와 오페라) 내장 XMLHttpRequest를 목적으로한다.
XMLHttpRequest 객체 구문을 만들기
ActiveX 개체를 사용하여 인터넷 익스플로러 (IE5와 IE6)의 이전 버전 :
IE5와 IE6를 포함한 모든 현대적인 브라우저를 처리하기 위해 브라우저가 XMLHttpRequest 객체를 지원하는지 여부를 확인하시기 바랍니다. 그렇다면, 그렇지 않은 경우, XMLHttpRequest를 객체를 생성하는 ActiveX 객체를 생성 :
예
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
»시도
서버에 대한 요청을 보낼
서버에 요청을 전송하기 위해, 우리는 XMLHttpRequest 객체의 open () 및 () 메소드를 전송을 사용
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型，URL，请求是否应该进行异步处理。 method：请求的类型：GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） |
| send(string) | 发送请求到服务器。 string：仅用于 POST 请求 |
GET 또는 POST?
POST보다 간단하고 빠른 GET 대부분의 경우에 사용될 수있다.
그러나, 항상 다음과 같은 경우 POST 요청을 사용 :
- 캐시 파일 (업데이트 서버 나 데이터베이스 파일) 옵션을 선택하지 않습니다
- 서버에 전송 된 데이터의 양 (크기 제한을 POST 없음) 큰
- 보내는 사용자 입력 (알 수없는 문자를 포함 할 수 있습니다), POST 강하고 GET보다 더 안전
URL - 서버의 파일
URL 인수 open () 메서드는 서버에있는 파일의 주소입니다 :
이 파일 (예 : .txt 및 .XML 등) 파일의 모든 유형이 될 수 있습니다, 또는 서버 스크립트 파일 (예 : .html 중에서 및 .php가 등은 응답을 전송하기 전에 서버에서 작업을 수행 할 수 있습니다).
비동기 - 참 또는 거짓?
비동기 전송 요청에 대해 비동기 인수 open () 메서드가 true로 설정해야합니다 :
웹 개발자를위한 비동기 요청을 보내기 앞으로 큰 단계입니다. 수행 할 수있는 서버에서 많은 작업은 매우 많은 시간이 소요됩니다.
비동기 전송을 통해, JavaScript는 서버의 응답을 기다릴 필요가 없지만, 대신 할 수있다 :
- 서버에서 응답을 기다리는 동안, 추가 스크립트를 실행합니다
- 상기 응답을 처리 할 준비가 될 때의 응답
비동기 사실 =
비동기 = TRUE를 사용 준비가되면 소정의 기능을 onreadystatechange 이벤트에 응답하여 실행될 때
예
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();
»시도
비동기 거짓 =
세 번째 매개 변수 비동기의 경우 = 거짓, () 메소드가 false 오픈을 변경 :
= false를 비동기 권장하지만, 경우는 여러 개의 작은 요청이나 캔을 처리하지 않습니다.
당신이 준비가 될 때까지 서버 응답에서 자바 스크립트가 계속되지 않습니다 기억하십시오. 서버가 바쁘거나 느린 경우, 애플리케이션은 정지되거나 중단된다.
참고 : 비동기를 사용하는 경우 = 인 onreadystatechange 함수 거짓 쓰지 않는다 - 단지에) (송신 후 문을 코드를 삽입 할 필요를 :
예
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
»시도
서버 응답
서버의 응답을 얻기 위해, XMLHttpRequest 객체의에서 responseText 또는 responseXML에 속성을 사용합니다.
| 属性 | 描述 |
|---|---|
| responseText | 获取响应数据作为字符串 |
| responseXML | 获取响应数据作为 XML 数据 |
responseText 속성
서버에서 응답이 XML이 아닌 경우, responseText 속성을 사용하십시오.
에서 responseText 속성은 문자열로 응답을 반환, 당신은 그것을 따라 사용할 수 있습니다 :
responseXML에 등록
응답이 서버에서 XML하지 않고, 당신이 XML 객체에를 해결하려면, responseXML에 속성을 사용 :
예
파일 요청 cd_catalog.xml을 하고 응답을 구문 분석 :
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "
";
}
document.getElementById("myDiv").innerHTML=txt;
»시도
인 onreadystatechange 이벤트
요청이 서버로 전송 될 때, 우리는 응답에 기초하여 어떤 동작을 수행 할 필요가있다.
인 onreadystatechange 이벤트가 될 때마다 readyState의 변화를 트리거됩니다.
XMLHttpRequest의 readyState의 속성은 상태를 보유하고있다.
XMLHttpRequest 객체의 세 가지 중요한 특성 :
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用 |
| readyState | 存放了 XMLHttpRequest 的状态。从 0 到 4 变化： 0：请求未初始化 1：服务器建立连接 2：收到的请求 3：处理请求 4：请求完成和响应准备就绪 |
| status | 200："OK" 404：找不到页面 |
인 onreadystatechange 경우, 우리는 시간이 서버 응답을 처리 할 준비가되면 무슨 일이 일어날 지 지정합니다.
readyState가 4 상태 또는 200 인 경우, 반응은 제조 :
예
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
»시도
참고 : 인 onreadystatechange 이벤트마다에게 readyState의 변화를 유발 네 번 총 트리거됩니다.
더 많은 예제
getAllResponseHeaders () 헤더 정보를 검색하여
자원 (문서) 헤더 정보를 검색 할 수 있습니다.
() 지정된 헤더 정보를 검색 getResponseHeader
헤더 정보를 지정하는 자원 (파일)을 검색 할 수 있습니다.
콘텐츠 검색 ASP 파일
사용자가 웹 페이지를 웹 서버와 통신하는 방법 입력 필드에 문자를 입력 할 때.
데이터베이스에서 콘텐츠를 검색
웹 페이지에서는 XMLHttpRequest 객체를 통해 데이터베이스에서 정보를 추출합니다.
컨텐츠 검색 용 XML 파일
XML 파일로부터 데이터를 검색하고 HTML 테이블의 데이터를 표시하는 XMLHttpRequest 객체를 생성한다.