1. Ajax (비동기 JavaScript + XML)는 페이지를 제거하지 않고 서버와 같은 추가 데이터를 요청할 수 있습니다.
2. XHR 객체를 만듭니다
함수 createxhr () {if (typeof xmlhttprequest! = "undefined") {return new xmlhttprequest (); } else if (typeof activexObject! = "undefined") {// <ie7 if (typeof arguments.callee.activexstring! = "string") {var version = [ "msxml2.xmlhttp.6.0", "msxml2.xmlhttp.3.0", "msxml22.x mlhtp"; for (i = 0, len = version.length; i <len; i ++) {try {new ActiveXobject (버전 [i]); arguments.callee.activexstring = 버전 [i]; 부서지다; } catch (ex) {}}} return new ActiveXobject (arguments.callee.activexstring); } else {Throw New Error ( "XHR에 대한 지원 없음"); }} var xhr = createxhr (); 경고 (XHR); // [Object XMLHTTPREQUEST]3. 사용법 참고 : 이 섹션의 모든 예제는 서버 측에 적용됩니다.
1. Open () 메소드를 호출하십시오. 3 개의 매개 변수를 허용합니다. 보내야 할 요청 유형 ( "get", "post"등), 요청의 URL 및 요청이 비동기로 전송되는지 여부를 나타내는 부울 값을 허용합니다.
2. 요청을 보내려면 send () 메소드를 호출하고 매개 변수를 수락합니다. 즉, 요청의 주제가됩니다. 필요하지 않은 경우 NULL
3. 반환 된 데이터는 XHR 객체의 속성에 자동으로 채워집니다.
var xhr = createxhr (); // example.txt 파일을 get synchronously // 동기화 : JavaScript 코드는 서버가 응답하고 xhr.open ( "get", "example.txt", false를 실행할 때까지 기다립니다. xhr.send (null); // 상태는 응답의 HTTP 상태를 나타냅니다. // 200은 OK를 나타냅니다. 304는 ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.responsetext); // 응답 텍스트를 반환, 123456} else {alert ( "요청이 실패했습니다 :" + xhr.status); }4.example.text 파일 내용은 문자열입니다 : 123456
4. 물론, 이전 프로세스에 사용 된 동기화 방법에는 아무런 문제가 없습니다. 우리는 비동기 방법에 도전해야합니다.
var xhr = createxhr ();// xhr.readystate는 요청/응답의 현재 상태를 나타내고, 4는 xhr.readystate의 값이 변경되는 한 모든 응답 데이터가 수락되었음을 나타냅니다. xhr.status <300) || } else {alert ( "요청은 실패했습니다 :" + xhr.status); }}}; xhr.open ( "get", "example.txt", true); xhr.send (null);
5. 각 HTTP 요청 및 응답에는 해당 헤더 정보가 있습니다.
1. 기본적으로 XHR 요청을 보내는 동안 다음 헤더 정보도 전송됩니다.
incept : 브라우저가 처리 할 수있는 컨텐츠 유형.
incept-charset : 브라우저가 표시 할 수있는 문자 세트.
③ accept-encoding : 브라우저가 처리 할 수있는 압축 인코딩.
④ accept-language : 현재 브라우저에서 설정 한 언어.
connection : 브라우저와 서버 간의 연결 유형.
Cookies : 현재 페이지에 설정된 쿠키.
HOST : 요청이 발행 된 페이지가있는 도메인.
weferer : 요청을 발행 한 페이지의 URI.
⑨user-agent : 브라우저의 사용자 에이전트 문자열.
2. setRequestheader () 메소드를 사용하여 사용자 정의 요청 헤더 정보를 설정하십시오. 두 개의 매개 변수를 허용합니다 : 헤더 필드의 이름과 헤더 필드의 값
var xhr = createxhr (); // xhr.readystate는 요청/응답의 현재 상태를 나타내고, 4는 xhr.readystate의 값이 변경되는 한 모든 응답 데이터가 수락되었음을 나타냅니다. xhr.status <300) || } else {alert ( "요청은 실패했습니다 :" + xhr.status); }}}; xhr.open ( "get", "example.txt", true); // xhr.setRequestHeader ( "이름", "Zhang"); // 허용 된 "이름"은 example.txt의 http에서 볼 수 있습니다. "Zhang"xhr.send (null);3. 요청 헤더 정보 및 해당 정보 가져 오기 getResponseHeader () 메소드 getAllResponseHeaders () 메서드를 호출하십시오.
var xhr = createxhr (); // xhr.readystate는 요청/응답의 현재 상태를 나타내고, 4는 xhr.readystate의 값이 변경되는 한 모든 응답 데이터가 수락되었음을 나타냅니다. xhr.status <300) || // 경고 (연결); // text/plain // 모든 응답 정보 가져 오기 var var = xhr.getallresponseheaders (); 경고 (모두); } else {alert ( "요청은 실패했습니다 :" + xhr.status); }}}}; xhr.open ( "get", "example.txt", true); xhr.send (null);6. 요청을 받으십시오. 우리는 이전에 GET 요청 방법에 대해 논의했습니다. 이제 확장하고 GET 요청에 일부 매개 변수를 추가하겠습니다.
/ ** URL : 요청 이름이없는 URL : 요청 키 값 : 요청 문자열이있는 URL*/ function addUrlParam (url, name, value) {url += (url.indexof ( "?") == -1? ":"& "); url + = encodeUricomponent (name) + "=" + encodeUricomponent (value); 반환 URL; } var xhr = createxhr (); xhr.onreadystatechange = function () {if (xhr.readystate == 4) {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.responsetext); } else {alert ( "요청은 실패했습니다 :" + xhr.status); }}}}; var url = "example.txt"; url = addurlparam (url, "name", "zhang"); url = addurlparam (url, "age", "23"); // 요청 된 URL은 다음과 같습니다. example.txt? name = zhang & age = 23 xhr.open ( "get", url, true); xhr.send (null);7. 후 요청
1. 사례 분석 : 다음으로, 게시물에서 요청을 보내는 AJAX 응용 프로그램, 즉 사용자 등록 및 등록 된 사용자 이름에 따라 프롬프트가 반환됩니다.
2. 구현 단계
1) 먼저 등록 된 페이지가 있어야합니다 (물론 여기에는 매우 간단합니다) ajax.html
<! docType html> <html> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"> <title> 제목없는 문서 </title> <style> </style> </head> <body> <form name = "myform" "post"> <intex = "text" id = "userLabel">를 입력하십시오 </label> <br/> 비밀번호를 입력하십시오 : <input type = "password"name = "password"/> <br/> <input type = "제출"value = "login"/> <br/> <br/ <br/ipt> <script src = "eventutil.js"> </script> <scrc = "serialize. src = "ajax.js"> </script> <script src = "ajaxdo.js"> </script> <scrc = "ajaxdo.js"> </script> </body> </html>
2) 물론 JavaScript 부분
①eventutil.js, 여기에 이벤트 듣기 부품 목록이 있습니다.
var eventUtil = {addEvent : 함수 (요소, 유형, 핸들러) {if (element.addeventListener) {element.addeventListener (type, handler, false); } else if (element.attachevent) {element.attachevent ( "on" + type, handler); }}}}②serialize.js : 양식 직렬화
함수 serialize (form) {var parts = [], field = null, i, len, j, optlen, 옵션, optValue; for (i = 0, len = form.elements.length; i <len; i ++) {field = form.elements [i]; switch (field.type) {case "select-one": case "select-multiple": if (field.name.length) {for (j = 0, optlen = field.options.length; if (Option.Selected) {optValue = ""; if (Option.HasAttribute) {optValue = (Option.HasAttribute ( "value")? 옵션. value : 옵션 .text); } else {optValue = (옵션 .attributes [ "value"]. 지정? 옵션. value : 옵션 .text); } parts.push (EncodeUricomponent (field.name) + "=" + encodeUricomponent (optValue)); } } } 부서지다; case undefined : // 필드 세트 "파일": // 파일 입력 사례 "제출": // 제출 버튼 사례 "재설정": // 재설정 버튼 "버튼": // 사용자 정의 버튼 브레이크; CASE "RAD } /* 기본 조작을 수행* /default : // 이름이없는 양식 필드를 중단합니다. }}} return parts.join ( "&"); }③ajax.js는 위의 Createxhr () 함수이며 여기에는 나열되지 않습니다.
핵심 파일 인 Ajaxdo.js는 우리 이름의 작동 부분이며 무작위로 작성되었습니다.
var form = document.forms [0]; // 양식 var var username = form.elements [ 'username']; // username var userLabel = document.querySelector ( "#userLabel"); // 프롬프트 태그 eventUtil.addevent (username, "blur", function () {var xhr = createxhr (); xhr.onreadyStateChange = function () {if (xhr.readystate == 4) {if ((xhr.status> = 200 && xhr.status <300) | xhr.responsetext; // 녹색 글꼴이 프롬프트되면, explice는 (ustry) {userlabel.firstchild.data = "username "이 사용자는 이미 존재합니다. // 양식 xhr.send (serialize (form));3. 개선 부분 : 모두가 그것을 보았습니다. 우리가 지금 방금 양식을 제출했을 때, 우리는 양식을 직렬화했습니다. FormData 유형은 XMLHTTPREQUEST 레벨 2에서 정의되어 있으며, 이는 우리를 위해 양식을 자동으로 직렬화 할 것이며 직접 작성할 필요가 없습니다.
우리는 코드의 일부만 이동합니다
// ... 여기서 생략 된 코드는 위의 // post request xhr.open ( "post", "dome.php", true)과 일치합니다. // 이전 함수 xhr.send (new FormData (form))를 대체하기 위해 여기에서만 변경하면됩니다.
8. 다른 부분 (호환성이 충분하지 않기 때문에 이해)
1. 시간 초과 설정
xhr.open ( "get", "example.txt", true); xhr.timeout = 1000; // 타임 아웃을 1 초로 설정합니다 (IE8+의 경우에만) xhr.ontimeout = function () {alert ( "요청이 1 초 안에 반환되지 않았습니다."); }; xhr.send (null);2. ResisteMimimetype () 메소드, 서버에서 반환 한 유형
var xhr = createxhr (); xhr.open ( "get", "example.txt", true); xhr.overridemimeType ( "Text/XML"); // 이전의 것은 텍스트/일반 xhr.send (null)입니다.
3. 진행 사건
1. 브라우저가 서버의 정보를 수신하는 한 트리거 된 이벤트.
var xhr = createxhr (); xhr.onload = function () {if ((xhr.status> = 200 && xhr.status <300) || xhr.status == 304) {alert (xhr.responsetext); } else {alert ( "요청은 실패했습니다 :" + xhr.status); }}; xhr.open ( "get", "example.txt", true); xhr.send (null);2. 새로운 데이터를 수신하는 브라우저 중에 주기적으로 트리거 된 진행 이벤트
var xhr = createxhr (); xhr.onprogress = function (event) {var divstatus = document.getElementById ( "status"); // if (event.lengthcomputable) {divstatus.innerhtml = "수신" + event.position + "of" + event.totalsize + "bytes"; }}; xhr.open ( "get", "altevents.php", true); xhr.send (null);위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.