Ajax는 새로운 프로그래밍 언어가 아니라 기존 표준을 사용하는 새로운 접근법입니다. Ajax는 전체 페이지를 다시로드하지 않고 서버와 데이터를 교환 할 수 있습니다. 이 비동기 상호 작용 방법을 사용하면 클릭 후 페이지를 새로 고치지 않고도 새 데이터를 얻을 수 있습니다.
xmlhttprequest 객체
Ajax의 핵심은 XMLHTTPREQUEST 객체 (XHR)입니다. XHR은 서버에 요청을 보내고 서버 응답을 해결하기위한 인터페이스를 제공합니다. 비동기 방식으로 서버에서 새로운 데이터를 얻는 기능.
브라우저에서 객체를 만듭니다 (IE7 이상 만 지원) :
var xhr = 새로운 xmlhttprequest ();
XHR 사용 방법
소개해야 할 첫 번째는 Open () 메소드입니다. 3 개의 매개 변수를 수신합니다.
• 전송 요청 유형 (게시, GET 등)
• 요청 된 URL
• 요청이 비동기로 전송되는지 여부를 나타내는 Bolean 값
호출 Open () 예 :
xhr.open ( "get", "index.jsp", false);
index.jsp에 대한 요청을 받으십시오. URL은 코드가 실행되는 현재 페이지와 관련이 있습니다. Open () 메소드를 호출하는 것은 실제로 요청을 보내지 않으며 전송 요청이 시작됩니다.
요청을 보내려면 send ()에게 전화하십시오.
xhr.send (null);
send ()는 매개 변수, 즉 요청 본문으로 전송 될 데이터를 수신합니다. 요청 본문을 통해 데이터를 전송하지 않아도되는 경우 NULL을 전달해야합니다.
해당 데이터는 XHR 객체의 관련 속성으로 채워집니다.
• respondeText : 텍스트는 응답 본문으로 반환되었습니다
• Responsexml : 응답이 "Text/XML"또는 "Application/XML"이므로 콘텐츠 유형
• 상태 : 응답의 HTTP 상태
• Statustext : HTTP 상태에 대한 설명
응답을받은 후 먼저 상태 속성을 확인하고 응답이 반환되었는지 확인하십시오. 일반적으로 200은 성공의 표시로 사용됩니다. 상태 코드 304는 리소스가 수정되지 않았고 브라우저의 캐시 버전을 직접 사용할 수 있음을 나타냅니다.
적절한 응답을 받으려면 다음과 같은 방식으로 두 가지 상태 코드를 감지해야합니다.
xhr.open ( "get", "index.jsp", false); xhr.send (null); if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.responsetext);ReadyState 속성을 감지함으로써 요청/응답 프로세스의 현재 활성 단계를 결정할 수 있습니다.
• 0 : 초기화되지 않습니다. Open () 메소드가 호출되지 않았습니다
• 1 : 시작하십시오. Open () 메소드가 호출되었고 send () 메소드가 호출되지 않았습니다.
• 2 : 보내기. send () 메소드가 호출되었고 응답이 수신되지 않았습니다.
• 3 :받습니다. 일부 데이터가 접수되었습니다
• 4 : 완료. 모든 데이터가 수신되었으며 클라이언트 측에서 사용할 수 있습니다.
ReadyState 속성의 값이 변경되면 ReadyStateChange 이벤트가 트리거됩니다. 브라우저 호환성을 보장하려면 Open ()을 호출하기 전에 OnreadyStateChange 이벤트 핸들러를 지정하십시오.
var xhr = new xmlhttprequest (); xhr.onreadyStateChange = function () {if (xhr.readystate == 4) {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.rsponseteetex); " + xhr.status);}}}; xhr.open ("get ","index.jsp ", true); xhr.send (null);응답을 받기 전에 비동기 요청을 취소 할 수 있습니다.
xhr.abort ();
HTTP 헤더 정보
XHR 객체는 요청 헤더를 조작하고 헤더 정보에 응답하는 방법을 제공합니다.
기본적으로 XHR 요청을 보내는 동안 다음 헤더 정보도 전송됩니다.
• 수락 : 브라우저가 처리 할 수있는 컨텐츠 유형
• accept-charset : 브라우저가 표시 할 수있는 문자 세트
• 수락 인코딩 : 브라우저가 처리 할 수있는 압축 인코딩
• 허용 언어 : 현재 브라우저에서 설정 한 언어
• 연결 : 브라우저와 서버 간의 연결 유형
• 쿠키 : 현재 페이지에 설정된 쿠키
• 호스트 : 요청이 발행 된 페이지가있는 도메인
• 참조 : 요청을 발행 한 페이지의 URL
• 사용자 AENT : 브라우저의 사용자 에이전트 문자열
setRequestheader ()를 사용하여 사용자 정의 요청 헤더 정보를 설정하십시오. 호출 한 후에는 end ()를 호출해야합니다.
setRequestHeader () :
xhr.open ( "get", "index.jsp", true); xhr.setrequestheader ( "myheader", "myValue"); xhr.send (null);
getResponseHeader ()를 호출하고 필드 이름으로 전달하여 해당 응답 헤더 정보를 얻으십시오. getAllResponseHeader ()는 모든 헤더 정보가 포함 된 긴 문자열을 가져옵니다.
var myheader = xhr.getResponseHeader ( "MyHeader"); var allheaders = xhr.getallResponseheader ();
요청 받으십시오
get은 특정 정보에 대해 서버를 쿼리하는 데 사용됩니다. URL 끝에 쿼리 문자열 매개 변수를 추가 할 수 있습니다. 쿼리 문자열에서 각 매개 변수의 이름과 값은 encodeUricomponent ()를 사용하여 인코딩해야합니다.
xhr.open ( "get", "login.jsp? name1 = value1 & name2 = value2", false); addUrlParam ()은 추가 할 매개 변수의 URL, 매개 변수의 이름 및 매개 변수의 값을 수신합니다. var url = "login.jsp"; // 매개 변수 추가 url = addurlparam (url, "username", "xxyh"); url = addUrlParam (url, "password", "xxyh123"); // 요청 xhr.open ( "get", url, false);
사후 요청
게시물 요청은 저장 해야하는 서버로 데이터를 보내는 데 사용됩니다. 게시물 요청 본문에는 많은 데이터가 포함될 수 있으며 형식은 무제한입니다.
초기화 요청 :
xhr.open ( "post", "login.jsp", true); 먼저 컨텐츠 유형 헤더 정보를 Application/X-WWW-Form-urlencoded로 설정 한 다음 문자열 형식을 만듭니다. 페이지에서 양식 데이터를 직렬화 한 다음 XHR을 통해 서버로 보내야하는 경우 Serialize () 함수를 사용하여 xhr.open ( "get", "login.jsp", false); xhr.setrequestheader ( "content-type", "application/x-www-form-urlencoded"; document.getElementById ( "user-info"); xhr.send (serialize (form));
위는 편집자가 소개 한 JavaScript에서 Ajax에 대한 심도있는 이해입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!