Ajax 및 작동 방식
Ajax는 웹 페이지를 새로 고치지 않고 서버와 데이터를 교환하는 기술입니다. Google Maps에서 Google에서 처음 사용했으며 빠르게 인기가있었습니다.
Ajax는 크로스 도메인이 될 수 없습니다. 도메인을 교차 해야하는 경우 document.domain = 'A.com'을 사용할 수 있습니다. 또는 서버 프록시를 사용하여 xmlhttprequest 파일을 프록시하십시오.
Ajax는 기존 인터넷 표준을 기반으로하며이를 조합하여 사용합니다.
xmlhttprequest 객체 (비동기 적으로 데이터를 서버와 교환)
JavaScript/dom (정보 표시/상호 작용)
CSS (데이터의 스타일 정의)
XML (데이터 변환 형식)
xmlhttprequest 객체를 만듭니다
모든 최신 브라우저 (IE7+, Firefox, Chrome, Safari 및 Opera)에는 내장 XMLHTTPREQUEST 객체가 있습니다.
ajax 객체 만들기 :
// IE6 이상
var oajax = new xmlhttprequest ();
// IE6
var oajax = new ActiveXobject ( "microsoft.xmlhttp")
서버에 연결하십시오
oajax.open (메소드, URL, 비동기식)
우리는 모두 Ajax, 즉 "비동기 JavaScript 및 XML"(비동기 JavaScript 및 XML)이 대화식 웹 응용 프로그램을 생성하는 웹 개발 기술을 나타냅니다. 따라서 Ajax는 비동기 모드에서 작동하기 위해 태어났습니다 (비동기식은 사실입니다.
동기 및 비동기
동기화는 발신자가 데이터를 전송하고 다음 데이터 패킷을 보내기 전에 수신기가 응답을 보내도록 대기하는 통신 방법을 나타냅니다.
비동기식은 발신자가 수신자가 응답을 보내기를 기다리지 않고 데이터를 보내고 다음 데이터 패킷을 전송하는 통신 방법을 나타냅니다.
(간단히 말하면 : 동기화는 하나만 하나만 수행 할 수 있지만 비동기식은 동시에 여러 가지 작업을 수행 할 수 있습니다)
보내기 요청 보내기 ()
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
함수 getDoc () {
var xmlhttp;
if (window.xmlhttprequest) {
xmlhttp = new xmlhttprequest ();
}
또 다른{
xmlhttp = new ActiveXobject ( "microsoft.xmlhttp"); // IE6의 경우
}
xmlhttp.onreadyStateChange = function () {
if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
document.getElementById ( "myid"). innerHtml = xmlhttp.responsetext;
}
}
xmlhttp.open ( "get", index.php, true);
xmlhttp.send ();
}
</스크립트>
</head>
<body>
<버튼 유형 = "버튼"onclick = "getDoc ()"> 요청 데이터 </button>
</body>
얻거나 게시 하시겠습니까?
Post와 비교할 때 Get은 더 간단하고 빠르며 대부분의 경우 사용할 수 있습니다.
그러나 다음 경우 게시물 요청을 사용하십시오.
캐시 된 파일을 사용할 수 없습니다 (서버에서 파일 또는 데이터베이스 업데이트)
많은 양의 데이터를 서버로 보냅니다 (Post는 데이터 제한이 없습니다)
포스트는 알 수없는 문자가 포함 된 사용자 입력을 보낼 때 얻는 것보다 더 안정적이고 신뢰할 수 있습니다.
반품 정보를받습니다
OAJAX.ONREADYSTATECHANGE = function () {// 요청 상태가 변경 될 때 호출 할 이벤트 핸들러
경고 (Oajax.readystate);
}
ReadyState 속성의 값이 변경 될 때마다 ReadyStateChange 이벤트가 트리거됩니다. 이 이벤트는 각 상태 변경 후 ReadyState의 값을 감지하는 데 사용될 수 있습니다. 일반적으로 모든 데이터가 준비되기 때문에 ReadyState 값이 4 인 단계에만 관심이 있습니다. 그러나 oneadyStateChange 이벤트 핸들러는 Open ()을 호출하기 전에 크로스 브라우저 호환성을 보장해야합니다. 예를 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
var xhr = createxhr ();
xhr.onreadystatechange = function () {
if (xhr.readystate == 4) {
if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {
경고 (xhr.statustext);
} 또 다른 {
ALERT ( "요청은 실패했습니다 :" + xhr.status);
}
}
};
xhr.open ( "get", "example.txt", true);
xhr.send (null);
XHR 객체
XHR 객체가 서버에 HTTP 요청을 보내면 요청이 처리 될 때까지 여러 상태를 통과 한 다음 응답을받습니다. ReadyState는 XHR 요청의 주 재산으로 5 가지 속성 값이 있습니다.
0 (UniTialized) Open () 메소드가 아직 호출되지 않았습니다.
1 (load) send () 메소드가 호출되고 요청이 전송됩니다.
2 (로드가 완료 됨) send () 메소드가 완료되었고 모든 응답 내용이 수신되었습니다.
3 (분석) 응답 내용이 구문 분석되고 있습니다
4 (완료) 응답 컨텐츠 구문 분석이 완료되었으며 클라이언트가 사용할 수 있습니다.
상태
상태 속성은 서버에서 반환 된 응답 상태 코드를 나타냅니다. 예를 들면 : 200은 성공을 의미하며 404는 찾을 수 없습니다.
1 단어 헤더 : 메시지. 이 유형의 상태 코드는 요청이 수락되어 처리해야 함을 의미합니다.
2 단어 헤드 : 성공. 이 유형의 상태 코드는 요청이 서버에서 성공적으로 수신, 이해 및 수락되었음을 의미합니다.
3 단어 헤더 : 리디렉션. 이 유형의 상태 코드는 클라이언트가 요청을 완료하기 위해 추가 작업이 필요하다는 것을 의미합니다.
4-character 헤더 : 클라이언트 오류. 이 유형의 상태 코드는 클라이언트에 오류가있는 것처럼 보일 수 있으며 서버의 처리를 방해합니다.
5 단어 헤더 : 서버 오류. 이 유형의 상태 코드는 서버의 요청 처리 프로세스 중에 오류 또는 비정상 상태가 발생했습니다.
또한 첨부 : HTTP 상태 코드에 대한 자세한 설명
statustext
Statustext는 응답에서 반환 된 텍스트 정보이며 ReadyState 값이 3 또는 4 인 경우에만 사용할 수 있습니다. ReadyState가 다른 값인 경우 뷰는 StatusText 속성에 액세스 할 수 있습니다.
XHR 방법
| 방법 | 설명하다 |
|---|---|
| 중단 () | 현재 실행중인 요청이 취소됩니다 |
| getAllResponseHeaders () | 모든 응답 헤더의 이름과 값을 포함하는 단일 문자 | 문자열을 반환합니다. |
| getResponseheader (이름) | 응답 헤더에 지정된 이름과 값을 반환합니다. |
| Open (메소드, URL, 비동기, 사용자 이름, PWD) | HTTP 메소드 (GET 또는 POST) 등을 설정하십시오. |
| 보내기 (콘텐츠) | 지정된 주제 내용으로 요청을 발행하십시오 |
| setRequestHeader (이름, 값) | 지정된 이름과 값으로 요청 헤더를 설정하십시오 |
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
var oajax = oajax ();
ALERT (OAJAX.READYSTATE); // "0"팝업 "
oajax.open ( "get", "index.html", true);
ALERT (OAJAX.READYSTATE); // "1"팝업
Oajax.send (null);
ALERT (OAJAX.READYSTATE); // 4는 IE에서 팝업되고 Firefox는 2입니다.
// ReadyStateChange 이벤트를 통해들을 수 있습니다
oajax = xhr ();
OAJAX.ONREADYSTATECHANGE = function () {
ALERT (OAJAX.READYSTATE); // Firefox의 순서는 1, 2, 3, 4이지만 결국 1 개가 있습니다.
// 즉, 그것은 1, 1, 3, 4입니다
};
oajax.open ( "get", "index.txt", true);
Oajax.send (null);
</스크립트>