Ajax는 비동기 JavaScript 및 XML의 약어이며 페이지의 특정 부분을 업데이트하는 메커니즘입니다. 서버에서 데이터를 얻은 후 페이지의 일부를 업데이트 할 수있는 전원을 제공하므로 전체 페이지를 새로 고치지 않도록합니다. 또한 이러한 방식으로 로컬 페이지 업데이트를 실현하면 원활한 사용자 경험을 효과적으로 생성 할 수있을뿐만 아니라 서버의로드를 줄일 수 있습니다.
다음은 기본 AJAX 요청에 대한 분석입니다.
var xhr = new xmlhttprequest (); xhr.open ( 'get', 'send-ajax-data.php'); xhr.send (null);
여기서는 서버에 HTTP 요청을 할 수있는 클래스 인스턴스를 만듭니다. 그런 다음 열린 메소드가 호출되는데, 여기서 첫 번째 매개 변수는 HTTP 요청 메소드이고 두 번째 매개 변수는 요청 페이지의 URL입니다. 마지막으로 매개 변수 NULL로 보내기 메소드를 호출합니다. Post Request Method를 사용하는 경우 (여기에 이동) Send Method 매개 변수에는 보내려는 데이터가 포함되어야합니다.
서버의 응답을 처리하는 방법은 다음과 같습니다.
xhr.onreadystatechange = function () {var done = 4; // ReadyState 4는 요청이 서버 var ok = 200으로 전송되었음을 의미합니다. // 상태 200은 (xhr.readystate == done) {if (xhr.status === OK) {console.log (xhr.responsetext); // 이것은 반환 된 텍스트입니다} else {console.log ( "error :"+ xhr.status); //이 요청에서 오류가 발생했습니다}}}OnreadyStateChange는 비동기식이므로 언제든지 호출됩니다. 이 유형의 함수를 콜백 함수라고합니다. 일부 처리가 완료되면 호출됩니다. 이 경우이 처리는 서버에서 발생합니다.
예
편리한 Ajax 방법은 많은 사람들이 jQuery에 의존하는 이유이기도하지만 실제로는 Native JavaScript의 Ajax API도 매우 강력하며 기본 사용량은 각 브라우저마다 크게 다르지 않습니다. 따라서 혼자서 Ajax 객체를 완전히 캡슐화 할 수 있습니다. 다음은 캡슐화 된 Ajax 객체입니다.
// ajax 메소드 // 게으른 부하 생성 xhr 객체 함수 createxhr () {if (창에 'xmlhttprequest') {createxhr = function () {return new xmlhttprequest (); }; } else if (창에서 'ActiveXobject') {createxhr = function () {return new ActiveXobject ( "msxml2.xmlhttp"); }; } else {createxhr = function () {Throw New Error ( "Ajax는이 브라우저에서 지원되지 않습니다"); }; } return createxhr (); } // ajax는 함수 요청 (ajaxdata) {var xhr = createxhr (); ajaxdata.before && ajaxdata.before (); // 이벤트 xhr.onreadystatechange = function () {if (xhr.readystate == 4) {if (xhr.status == 200) {if (ajaxdata.datatype == 'json') {// 서버 JSONST = XHR.RESTETETETE를 통해 비동기 요청 XHR.OradeyStateChange = function () {if (xhr.status == 200) {if (ajaxdata.datatype == 'json'); json1 = eval ( '(' + jsonst + ')'), json2 = (새 함수 ( 'return' + jsonst)) (); ajaxdata.callback (json2); // ajaxdata.callback (json.parse (xhr.responsetext)); // IE6/7에서 지원되지 않는 기본 메소드} else ajaxdata.callback (xhr.responsetext); } else {ajaxdata.error && ajaxdata.error (xhr.responsetext); }}}; // 요청 매개 변수 설정 xhr.open (ajaxdata.type, ajaxdata.url); if (ajaxdata.nocache == true) xhr.setrequestheader ( 'if-modified-since', '0'); if (ajaxdata.data) {xhr.setrequestheader ( 'content-type', 'application/x-www-form-urlencoded'); xhr.send (ajaxdata.data); } 또 다른 {? ? xhr.setRequestHeader ( 'x- requested-with', 'xmlhttprequest'); xhr.send (null); } return xhr;} 함수 post (ajaxdata) {ajaxdata.type = 'post'; var _result = request (ajaxdata); return _result;} 함수 get (ajaxdata) {ajaxdata.type = 'get'; ajaxdata.data = null; var _result = request (ajaxdata); 반환 _result;}사용법의 예는 다음과 같습니다.
index.html
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> 기본 JavaScript 구현 ajax </title> <링크 rel = "Stylesheet"type = "text/css"media = "all"href = "href =". Font-Family : 'Lucida Grande', 'Microsoft Yahei'} #content .btn_ctr {display : block; 너비 : 120px; 높이 : 30px; 마진 : 0 Auto 20px; 배경 : #53A7BB; 색상 : #fff; 글꼴 중량 : 대담한; 글꼴 크기 : 14px; 라인 높이 : 30px; 텍스트 결정 : 없음; Border-Radius : 4px; } #test {너비 : 280px; 높이 : 130px; 여백 : 0 Auto; 패딩 : 15px; 배경 : #fff; Border-Radius : 4px; 텍스트 정렬 : 왼쪽; . href = "http://kayosite.com"target = "_ blank"> 내 블로그 </a> </p> <p> kayo © Copyright 2011-2013 </p> </div> <h1> css3 animation </h1> </div> </div> <div id = "content"> <a href = "javascrip :;" onclick = "get ({url : './ajax.html', callback : function (out) {document.getElementById ( 'test'). innerHtml = out;}}}")> ajax get content </a> <div id = "test"> </div> <cript> // ajax 방법을 반복하지 않습니다. 여기 </script> </body> </html> ajax.html<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> ajax </title> </head> <bod> <p>이 텍스트를 성공적으로 얻었습니다 </p> </body> </html>
특정 효과의 경우 전체 데모를 탐색 할 수 있습니다.