모든 현대의 브라우저가 서버로부터 데이터를 요청하는 내장 XMLHttpRequest의 목적을 가지고있다.
모든 주요 브라우저 액세스하고 XML을 조작 할 수있는 내장 된 XML 파서를 가지고있다.
XMLHttpRequest 객체
XMLHttpRequest 객체가 웹 서버로부터 데이터를 요청하기 위해 사용될 수있다.
XMLHttpRequest 객체는 a developers dream 당신이 할 수 있기 때문에 :
- 페이지를 재로드하지 않고도 웹 페이지를 업데이트
- 서버에서 요청 데이터 - 페이지가로드 된 후
- 서버에서 데이터를 수신 - 페이지가로드 된 후
- 서버에 데이터를 전송 - 백그라운드에서
XMLHttpRequest의 예
아래의 입력 필드에 문자를 입력 할 때, XMLHttpRequest 객체는 서버로 전송하고, 몇 가지 이름을 제안 반환됩니다 (from the server) :
예
Start typing a name in the input field below:
Suggestions:
XMLHttpRequest를 보내기
모든 최신 브라우저가 내장 된 XMLHttpRequest 객체를 가지고있다.
그것을 사용하는 일반적인 자바 스크립트 구문은 다음과 같이 많은 같습니다
예
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", " filename ", true);
xhttp.send(); »그것을 자신을 시도 XMLHttpRequest를 개체 만들기
이 예에서 첫 번째 줄은 위의 XMLHttpRequest의의 오브제를 만듭니다
var xhttp = new XMLHttpRequest();
인 onreadystatechange 이벤트
readyState의 속성은 XMLHttpRequest의 상태를 보유하고있다.
인 onreadystatechange 이벤트마다에게 readyState의 변화를 트리거됩니다.
서버 요청시, readyState가 0 ~ 4에서 변경 :
0 : 초기화되지 요청할
1 : 서버 연결이 설정
2 : 요청이 접수
3 : 처리 요청
4 : 완성 된 요청과 응답이 준비
readyState가이 변경 될 때 인 onreadystatechange 속성에서 실행되는 함수를 지정합니다
xhttp.onreadystatechange = function()
readyState가 4 인 상태 (200) 인 경우, 응답이 준비
if (xhttp.readyState == 4 && xhttp.status == 200)
XMLHttpRequest의 속성 및 메서드
| 방법 | 기술 |
|---|---|
| new XMLHttpRequest() | 새로운 XMLHttpRequest 객체를 생성 |
| open( method, url, async ) | 요청의 유형을 지정 method : 요청의 유형 : GET 또는 POST url : 파일 위치 async : 사실 (asynchronous) 또는 거짓 (synchronous) |
| send() | 서버에 요청을 전송한다 (used for GET) |
| send( string ) | 서버에 요청 문자열을 전송 (used for POST) |
| onreadystatechange | 함수가 호출 될 때 readyState의 속성 변경 |
| readyState | 는 XMLHttpRequest의 상태 0 : 초기화되지 요청할 1 : 서버 연결이 설정 2 : 요청이 접수 3 : 처리 요청 4 : 완성 된 요청과 응답이 준비 |
| status | 200 : OK 404 : 페이지를 찾을 수 없습니다 |
| responseText | 문자열로 응답 데이터 |
| responseXML | XML 데이터로서 응답 데이터 |
도메인 간 액세스
보안을 위해 최신 브라우저는 도메인에서 액세스를 허용하지 않습니다.
이 웹 페이지가로드하려고 XML 파일 모두가 동일한 서버에 위치되어야한다는 것을 의미한다.
w3ii의 예제 w3ii 도메인에있는 열려있는 모든 XML 파일을 저장합니다.
당신이 당신의 자신의 웹 페이지 중 하나에 위의 예제를 사용하려면, 당신은로드 XML 파일은 자신의 서버에 있어야합니다.
에서 responseText 속성
responseText 속성은 문자열로 응답을 반환합니다.
당신은 텍스트 문자열로 응답을 사용하려는 경우, responseText 속성을 사용합니다 :
인 responseXML 속성
인 responseXML 속성은 XML DOM 객체로 응답을 반환합니다.
당신이 XML의 DOM 객체로 응답을 사용하려면 responseXML에 속성을 사용합니다 :
예
파일 요청 cd_catalog.xml을 하고있는 XML DOM 객체로 응답을 사용합니다 :
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt; »그것을 자신을 시도 GET 또는 POST?
GET 간단하고보다 빠른 POST, 대부분의 경우에 사용될 수있다.
그러나, 항상 때 POST 요청을 사용합니다 :
- 캐시 된 파일은 옵션이 아닙니다 (update a file or database on the server)
- 서버에 많은 양의 데이터를 전송 (POST 더 크기 제한 없음)
- 사용자의 입력을 전송 (which can contain unknown characters) , POST는 GET보다 더 강력하고 안전합니다
URL이 - 서버에있는 파일
의 URL 매개 변수 open() 메서드는 서버에있는 파일에 주소 :
xmlhttp.open("GET", "xmlhttp_info.txt", true);
이 파일은 .ASP와 (다시 응답을 전송하기 전에 서버에서 작업을 수행 할 수 있습니다) .php가 등이 .txt와 .xml 또는 서버 스크립트 파일과 같은 모든 종류의 파일이 될 수 있습니다.
비동기 - 참 또는 거짓?
비동기 요청을 보내려면의 비동기 매개 변수 open() 메소드는 true로 설정해야합니다 :
xmlhttp.open("GET", "xmlhttp_info.txt", true);
비동기 요청 보내기 웹 개발자를위한 거대한 개선이다. 서버에서 수행되는 작업의 대부분은 매우 시간이 소모됩니다.
비동기 전송함으로써, 자바 스크립트는 서버의 응답을 기다릴 필요가 없습니다, 대신 할 수 없습니다 :
- 서버의 응답을 기다리는 동안 다른 스크립트를 실행할
- 응답이 준비되면 반응 취급
비동기 사실 =
진정한 비동기를 = 사용하는 경우, 응답이 인 onreadystatechange 이벤트 준비가되었을 때 실행하는 함수를 지정합니다
예
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send(); »그것을 자신을 시도 비동기 거짓 =
비동기를 사용하려면 = 거짓의에서 세 번째 매개 변수 변경 open() 는 false 방법 :
xmlhttp.open("GET", "xmlhttp_info.txt", false);
= false를 비동기를 사용하는 것은 권장하지 않습니다,하지만 몇 가지 작은 요청이 확인 될 수 있습니다.
서버 응답이 준비 될 때까지 자바 스크립트가 계속 실행되지 않습니다 것을 기억하십시오. 서버가 사용 중이거나 느린 경우, 응용 프로그램이 중단 또는 중지됩니다.
Note: 당신이 비동기 = false를 사용할 때, 인 onreadystatechange 함수를 작성하지 마십시오 - 그냥 후에 코드를 삽입 send() 문 :
예
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText; »그것을 자신을 시도 XML 파서
모든 최신 브라우저가 내장 된 XML 파서가 있습니다.
XML 문서 객체 모델 (the XML DOM) 액세스 할 수있는 방법과 편집 XML을 많이 포함되어 있습니다.
XML 문서에 액세스 할 수 있습니다 전에 그러나,는 XML의 DOM 객체로로드해야합니다.
XML 파서는 일반 텍스트를 읽고있는 XML DOM 객체로 변환 할 수 있습니다.
텍스트 문자열을 구문 분석
이 예는 XML DOM 객체에 텍스트 문자열을 구문 분석하고, 자바 스크립트와 그것에서 정보를 추출한다 :
예
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
»그것을 자신을 시도 오래된 브라우저 (IE5 and IE6)
인터넷 익스플로러의 이전 버전 (IE5 and IE6) XMLHttpRequest 객체를 지원하지 않습니다.
IE5와 IE6를 처리하기 위해 브라우저가 XMLHttpRequest 객체를 지원하는지 확인하거나 그렇지 않은 경우 ActiveXObject를 만들 :
예
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} »그것을 자신을 시도 인터넷 익스플로러의 이전 버전 (IE5 and IE6) DOMParser 객체를 지원하지 않습니다.
IE5와 IE6를 처리하기 위해 브라우저가 DOMParser 객체를 지원하는지 확인하거나 그렇지 않은 경우 ActiveXObject를 만들 :
예
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
»그것을 자신을 시도 
더 예
와 헤더 정보 검색 getAllResponseHeaders()
리소스의 헤더 정보를 검색 (file) .
와 특정 헤더 정보를 검색 getResponseHeader()
특정 자원 검색 헤더 정보 (file) .
ASP 파일의 내용을 검색
웹 페이지는 입력 필드에 사용자 입력 문자하면서 웹 서버와 통신 할 수있는 방법.
데이터베이스의 콘텐츠를 검색
어떻게 웹 페이지는 XMLHttpRequest 객체와 데이터베이스에서 정보를 가져올 수있다.
XML 파일의 내용을 검색
XML 파일로부터 데이터를 검색하고 HTML 테이블의 데이터를 표시하는 XMLHttpRequest 객체를 생성한다.