Ajax 원리 및 코드 캡슐화 예제에 대한 자세한 설명-JS 튜토리얼-php.cn

Ajax 원리 및 코드 캡슐화 예제에 대한 자세한 설명

巴扎黑

풀어 주다： 2017-09-09 10:02:12

원래의

1210명이 탐색했습니다.

AJAX = 비동기 JavaScript 및 XML(asynchronous JavaScript and XML). 다음 기사에서는 Ajax 원리 및 코드 캡슐화에 대한 관련 정보를 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있으니 아래를 살펴보겠습니다.

머리말

사실 AJAX의 내부 구현은 크게 어렵지 않습니다. 주로 XMLHttpRequest라는 객체를 사용하는데, 이 객체는 기존 브라우저에서 지원됩니다.

전체 AJAX 구현의 기본이자 브라우저가 백그라운드에서 서버와 데이터를 교환하는 데 사용하는 개체라고 할 수 있습니다. 여기에는 AJAX와 부분 페이지 새로 고침 기술이 있습니다!

이 글은 주로 Ajax 원리와 코드 캡슐화에 대한 관련 내용을 소개하고 참고 및 학습을 위해 공유합니다. 아래에서는 자세히 설명하지 않겠습니다. 자세한 소개를 살펴보겠습니다.

샘플 코드

var xmlhttp;
if (window.XMLHttpRequest) {
 // code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp = new XMLHttpRequest();
} else {
 // code for IE6, IE5 
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
  // to do...
 }
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

로그인 후 복사

단계:

XMLHttpRequest 개체 생성을 위한 구문:

var = new XMLHttpRequest();

로그인 후 복사

Internet Explorer의 이전 버전(IE5 및 IE6)은 ActiveX 개체를 사용합니다.

var = new ActiveXObject("Microsoft.XMLHTTP");

로그인 후 복사

2, 연결하고 보냅니다.

2.1 open() 함수의 세 가지 매개변수: 요청 메소드, 요청 주소, 비동기 요청 여부

2.2 GET 요청 메소드는 URL 매개변수를 통해 데이터를 서버에 제출합니다. data as 전송 매개변수는 서버에 제출됩니다

2.3. POST 요청에서 데이터를 전송하기 전에 양식 제출의 내용 유형을 설정해야 합니다

2.3. encodeURIComponent() 메서드 인코딩. 실제로 매개변수 목록 key=value 형식에서는 키와 값에 특수 문자가 포함되므로 인코딩해야 합니다. 요청이 이루어질 때마다 v=xx라는 문자열이 매개변수 목록에 입력됩니다. 이는 캐싱을 거부하고 매번 서버에 직접 요청하는 것입니다. encodeURIComponent() 方法进行编码，实际上在参数列表key=value的形式中，key 和 value 都需要进行编码，因为会包含特殊字符。每次请求的时候都会在参数列表中拼入一个 v=xx 的字符串，这样是为了拒绝缓存，每次都直接请求到服务器上。

3、接收。

3.1、接收到响应后，响应的数据会自动填充XHR对象，相关属性如下

responseText：响应返回的主体内容，为字符串类型；

responseXML：如果响应的内容类型是 "text/xml" 或 "application/xml"，这个属性中将保存着相应的xml 数据，是 XML 对应的 document 类型；

status：响应的HTTP状态码；

statusText：HTTP状态的说明

3.2、XHR对象的readyState属性表示请求/响应过程的当前活动阶段，这个属性的值如下

0 --> 未初始化，尚未调用open()方法；

1 --> 启动，调用了open()方法，未调用send()方法；

2 --> 发送，已经调用了send()方法，未接收到响应；

3 --> 接收，已经接收到部分响应数据；

4 --> 完成，已经接收到全部响应数据；

只要 readyState 的值变化，就会调用 readystatechange 事件，(其实为了逻辑上通顺，可以把readystatechange放到send之后，因为send时请求服务器，会进行网络通信，需要时间，在send之后指定readystatechange事件处理程序也是可以的，我一般都是这样用，但为了规范和跨浏览器兼容性，还是在open之前进行指定吧)。

3.3、在readystatechange事件中，先判断响应是否接收完成，然后判断服务器是否成功处理请求，xhr.status

3.받습니다. 3.1 응답을 받은 후 응답 데이터는 자동으로 "text/xml" 또는 "application/xml"을 채웁니다. 이 속성은 XML에 해당하는 문서 유형인 해당 xml 데이터를 저장합니다.

status: 응답 HTTP 상태 코드

🎜statusText: HTTP 상태 설명 🎜🎜3.2 🎜🎜1 --> 호출되었지만 send() 메서드가 호출되지 않았습니다. 🎜🎜🎜2 --> Send, send() 메서드가 호출되었으나 응답이 수신되지 않았습니다. 🎜🎜🎜3 --> 수신, 응답 데이터의 일부가 수신됨 🎜🎜🎜4 --> 완료, 모든 응답 데이터가 수신됨 ;🎜🎜🎜readyState 값이 변경되는 한, (실제로 논리적인 원활함을 위해 send 이후에 Readystatechange를 배치할 수 있습니다. 왜냐하면 전송할 때 서버에 요청하면 네트워크 통신이 발생하고 시간이 걸리기 때문입니다. 전송 후에 Readystatechange를 지정하십시오. 이벤트 핸들러도 가능합니다. 저는 주로 사용합니다. 하지만 표준화와 브라우저 간 호환성을 위해 열기 전에 지정하는 것이 좋습니다. 🎜🎜3.3.readystatechange 이벤트에서는 먼저 응답이 수신되었는지 확인한 다음 서버가 요청을 성공적으로 처리했는지 확인합니다. xhr.status는 2로 시작하는 상태 코드입니다. , 304는 캐시에서 가져오기를 의미합니다. 위 코드는 각 요청에 임의의 숫자를 추가하므로 캐시에서 값을 가져오지 않으므로 이 상태를 판단할 필요가 없습니다. 🎜🎜🎜🎜🎜캡슐화 Ajax 방법: 🎜🎜🎜🎜🎜🎜

 ajax({  
  url: "./test.php",
  type: "POST",      
  data: { name: "abc", age: 18 },   
  dataType: "json",  
  success: function (response, xml) {   
   // 执行成功回调  
  },  
  fail: function (status) {   
   // 执行失败回调  
  }
 });
  
  function ajax(options) { 
   options = options || {}; 
   options.type = (options.type || "GET").toUpperCase();  
   options.dataType = options.dataType || "json";  
   var params = formatParams(options.data);    
   
   // 创建对象  
   if (window.XMLHttpRequest) {   
    var xhr = new XMLHttpRequest(); 
   } else {   
    var xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);  
   } 
   
   //接收 - 第三步
   xhr.onreadystatechange = function () {   
    if (xhr.readyState == 4) {    
     var status = xhr.status;    
     if (status >= 200 && status < 300) {     
      options.success && options.success(xhr.responseText,xhr.responseXML);    
     } else {     
      options.fail && options.fail(status);    
     }   
    }
   }  
    
   //连接 和 发送 - 第二步 
   if (options.type == "GET") {   
    xhr.open("GET", options.url + "?" + params, true);   
    xhr.send(null);  
   } else if (options.type == "POST") {   
    xhr.open("POST", options.url, true);   
    //设置表单提交时的内容类型   
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(params);  
   }  
   
   //格式化参数 
   function formatParams(data) { 
    var arr = [];  
    for (var name in data) {   
     arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); 
    }  
    arr.push(("v=" + Math.random()).replace(".",""));  
    return arr.join("&"); 
   }

로그인 후 복사

위 내용은 Ajax 원리 및 코드 캡슐화 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!