Ajax 간단한 캡슐화 상세 소개

이 기사에서는 주로 Ajax 단순 캡슐화에 대한 자세한 소개를 공유합니다. 모든 사람에게 도움이 되기를 바랍니다.

ajax는 일반적으로 네 가지 간단한 부분으로 나뉩니다.

1. ajax 개체 만들기(IE와 호환되는 경우 일부 처리가 필요함)

2. Connection, 즉 요청 개체의 공개 방법 (get과 post는 조금 다릅니다. get 매개변수는 url 뒤에 넣어야 합니다. post는 요청 헤더를 설정해야 합니다.)

3. Send, 즉 요청 객체의 전송 기능(post 매개변수는 send에 배치)

4. Receive, onreadystatechange(저장 함수 또는 함수 이름, ReadyState 속성이 변경될 때마다 이 함수가 호출됩니다.) 함수입니다.

또한

onreadystatechange 분석

1. 에 시간 제한을 추가할 수 있습니다. 먼저 ReadyState의 상태를 확인해야 합니다(4가지 상태가 있음)

   1: 0, 요청이 초기화되지 않음

   2: 1 , 서버 연결이 설정되었습니다. ;

   3: 2. 요청이 수신되었습니다.

   4: 3. 요청이 처리 중입니다.

   ⑤: 4. 요청이 완료되었으며 응답이 준비되었습니다

2. readyState가 4일 때 상태를 다시 판단해야 합니다. 상태

3. 요청이 성공하면 상태 상태는 200~302이고, 304(캐시)가 있습니다

'use strict';

var $ = {};
$.ajax = ajax;

function ajax(options) {

  // 解析参数
  options = options || {};
  if (!options.url) return;
  options.type = options.type || 'get';
  options.timeout = options.timeout || 0;

  // 1 创建ajax
  if (window.XMLHttpRequest) {

    // 高级浏览器和ie7以上
    var xhr = new XMLHttpRequest();
  } else {

    //ie6,7,8
    var xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
  }

  // 2 连接
  var str = jsonToUrl(options.data);
  if (options.type === 'get') {
    xhr.open('get', `${options.url}?${str}`, true);

    // 3 发送
    xhr.send();
  } else {
    xhr.open('post', options.url, true);

    // 请求头
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    // 3 发送
    xhr.send();
  }

  // 接收
  xhr.onreadystatechange = function() {

    // 完成
    if (xhr.readyState === 4) {

      // 清除定时器
      clearTimeout(timer);

      if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {

        // 成功
        options.success && options.success(xhr.responseText);
      } else {
        options.error && options.error( xhr.status );
      }
    }
  };

  
  // 超时
  if (options.timeout) {
    var timer = setTimeout(function(){ 
            alert("超时了");
            xhr.abort(); // 终止
        },options.timeout);
  }
}


// json转url
function jsonToUrl(json) {
  var arr = [];
  json.t = Math.random();
  for(var name in json) {
    arr.push(name + '=' + encodeURIComponent(json[name]));
  }
  return arr.join('&');
}

관련 권장사항:

WeChat 애플릿은 네트워크 요청의 간단한 캡슐화를 위한 코드 케이스를 구현합니다.

php 일부 일반적인 JS 작업의 간단한 캡슐화_PHP 튜토리얼

간단한 Ajax 캡슐화

위 내용은 Ajax 간단한 캡슐화 상세 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!