Ajax : 전체 페이지를 새로 고치지 않고 데이터를 요청하는 방법;
Ajax의 기술 핵심은 xmlhttprequest 객체입니다.
AJAX 요청 프로세스 : XMLHTTPREQUEST 객체를 작성하고 서버에 연결하고 요청을 보내고 응답 데이터를 수신합니다.
/*** ajax 객체 get*/function getajaxhttp () {var xmlhttp; 시도 {// Chrome, Firefox, Opera 8.0+, Safari xmlhttp = new xmlhttprequest (); } catch (e) {// Internet Explorer try {// ie5, 6 xmlhttp = new ActiveXobject ( "msxml2.xmlhttp"); } catch (e) {try {// ie7 이상 xmlhttp = new ActiveXobject ( "microsoft.xmlhttp"); } catch (e) {alert ( "브라우저는 Ajax를 지원하지 않습니다!"); 거짓을 반환합니다. }}} return xmlhttp;}/** * ajax 요청 * url-url * methodtype (post/get) * con (true (비동기) | 거짓 (synchronous)) * 매개 변수 (매개 변수) * functionname (콜백 메소드 이름, 필요할 때만 호출됩니다) * (참고는 다음과 같습니다. 다른 하나는 처리 할 객체입니다. xmlhttp.onreadystatechange = function () {// readystate 값 설명 // 0, 초기화, 초기화, xhr 객체가 생성되지 않았고, 오픈이 아직 실행되지 않았지만,로드, 오픈 메소드가 호출되었지만 요청이 아직 전송되지 않았지만, 로딩이 완료되지 않았으며, 요청이 전송되었으며, 요청 // 40 : no questor action // 40 : no questor action / 444. 또는 URL 찾기 // 500 : 서버는 (xmlhttp.readystate == 4 && xhr.status == 200)이면 내부 오류를 생성합니다. {// http 응답은 functionName (xmlhttp, obj)을 호출하기 전에 완전히 수신되었습니다. }}; xmlhttp.open (MethodType, url, con); xmlhttp.send (parameter);} // 이것은 매개 변수 함수 createxml () {var xml = "<user> <userid> asdfasdfasdf <// userid> </user>"; // "//"이것은 왼쪽 슬래시와 오른쪽 Slash return xml입니다. json = {id : 0, 사용자 이름 : "좋은 사람"}; return json;} function c () {alert ( "");}//시험
ajaxRequest ( "http://www.baidu.com", "post", true, createxml (), c, document);
다른 예를 살펴 보겠습니다
ajax ({url : "./testxhr.aspx", // 요청 주소 유형 : "post", // 요청 메소드 데이터 : {name : "super", age : 20}, // Age : 20}, // "JSON", "JSON", "JSON"{// code, XML), faill : faill : plactured}); 함수 ajax (옵션) {옵션 = 옵션 || {}; 옵션 .type = (옵션 .type || "get"). touppercase (); 옵션 .datatype = 옵션 .datatype || "JSON"; var params = formatparams (옵션 .data); // 생성 - 비이6 -1 단계 if (wind } else {// IE6 이하 브라우저 var xhr = new ActiveXobject ( 'microsoft.xmlhttp'); } // 수신 - 3 단계 xhr.onreadystatechange = function () {if (xhr.readystate == 4) {var status = xhr.status; if (status> = 200 && status <300) {options.success && 옵션 .success (xhr.responsetext, xhr.responsexml); } else {옵션 .fail && 옵션 .fail (상태); }}} // Connect and Send -2 단계 if (옵션 .type == "get") {xhr.open ( "get", Options.url + "?" + params, true); xhr.send (null); } else if (Options.Type == "post") {xhr.open ( "post", option.url, true); // XHR.SetRequestHeader 양식을 제출할 때 컨텐츠 유형을 설정합니다 ( "Content-Type", "Application/X-www-form-urlencoded"); xhr.send (params); }} // 형식 매개 변수 함수 형식 파람 (data) {var arr = []; for (data의 var name) {arr.push (encodeUricomponent (name) + "=" + encodeUricomponent (data [name])); } arr.push (( "v =" + math.random ()). 교체 ( ".", ")); return arr.join ("& ");} return원리를 살펴 보겠습니다
1. 생성
1.1. IE7 이상의 버전은 기본 XHR 객체를 지원하므로 직접 사용할 수 있습니다 : var Oajax = new xmlhttprequest ();
1.2. IE6 및 이전 버전에서 XHR 객체는 MSXML 라이브러리의 ActiveX 객체를 통해 구현됩니다. 일부 책은 IE에서 이러한 객체의 세 가지 버전, 즉 MSXML2.XMLHTTP, MSXML2.XMLHTTP.3.0 및 MSXML2.XMLHTTP.6.0을 개선했습니다. 나는 그것이 너무 번거 롭다 고 생각하기 때문에 다음 문장을 직접 사용하여 그것을 만들 수 있습니다 : var oajax = new ActiveXobject ( 'microsoft.xmlhttp');
2. 연결하고 보내십시오
2.1. Open () 함수의 세 가지 매개 변수 : 요청 방법, 요청 주소 및 비동기 적으로 요청 여부 (동기 요청이 거의없고 아직 사용되지 않았습니다);
2.2. GET 요청 방법은 URL 매개 변수를 통해 서버에 데이터를 제출하는 반면 Post는 데이터를 보내는 매개 변수로 서버에 데이터를 제출하는 것입니다.
2.3. 사후 요청에서 데이터를 보내기 전에 제출 된 양식의 내용 유형을 설정해야합니다.
2.4. 서버에 제출 된 매개 변수는 EncodeUricOmponent () 메소드로 인코딩되어야합니다. 실제로, 매개 변수 목록 "key = value"의 형태에서, 특수 문자가 포함되므로 키와 값을 모두 인코딩해야합니다. 요청할 때마다 "v = xx"문자열이 매개 변수 목록에 철자됩니다. 이것은 캐시를 거부하는 것이며 매번 서버에 직접 요청합니다.
Encodeuri () : 전체 URI를 인코딩하는 데 사용되며 콜론, 전방 슬래시, 물음표 및 파운드 표시와 같이 URI에 속하는 특수 문자를 인코딩하지 않습니다. 상응하는 디코드 함수 decodeuri ();
EncodeUricomponent () : URI의 일부를 인코딩하고 찾은 비표준 문자를 인코딩하는 데 사용됩니다. 상응하는 디코드 함수 decodeUricomponent ();
3. 받으십시오
3.1. 응답을 받으면 응답 데이터가 XHR 객체로 자동으로 채워집니다. 관련 속성은 다음과 같습니다
ResponseText : 문자열 유형의 응답에 의해 반환 된 본문 내용;
ResponseXML : 응답의 내용 유형이 "Text/XML"또는 "Application/XML"인 경우 해당 XML 데이터는이 속성에 저장되며 이는 XML에 해당하는 문서 유형입니다.
상태 : 응답 HTTP 상태 코드;
Statustext : HTTP 상태에 대한 설명;
3.2. XHR 객체의 ReadyState 속성은 요청/응답 프로세스의 현재 활성 단계를 나타냅니다. 이 속성의 가치는 다음과 같습니다
0- 연도화 된 경우, Open () 메소드는 아직 호출되지 않았습니다.
1- 스타트, Open () 메소드가 호출되고 send () 메소드가 호출되지 않습니다.
2- 센트, send () 메소드가 호출되었으며 응답이 접수되지 않았습니다.
3 번지, 응답 데이터의 일부가 접수되었습니다.
4- 완성 된 모든 응답 데이터가 접수되었습니다.
ReadyState 변경 사항이 변경되는 한 ReadyStateChange 이벤트가 호출됩니다 (실제로 논리적 부드러움에 대해서는 Send가 요청되기 때문에 ReadySmoothEnge를 보내고, SEST가 요청되기 때문에, 네트워크 커뮤니케이션이 수행되기 때문에, 시간이 걸리기 때문에, SERDITECHANGE가 수행되기 때문에, SERTOR COMMUNITION이 수행되기 때문에, Send 후에도 ReadyStateChange 이벤트 핸들러를 지정하는 것은 괜찮습니다.
3.3. ReadyStateChange 이벤트에서 먼저 응답 수신 여부를 결정한 다음 서버가 요청을 성공적으로 처리하는지 확인하십시오. xhr.status는 상태 코드입니다. 상태 코드는 2로 시작하고 모두 성공합니다. 304는 캐시에서 얻는 것을 의미합니다. 위의 코드는 요청이 요청 될 때마다 난수를 추가하므로 캐시의 값을 판단 할 필요가 없습니다.
4. Ajax 요청은 크로스 도메인이 될 수 없습니다!