首頁 > 後端開發 > php教程 > ajax簡單封裝詳細介紹

ajax簡單封裝詳細介紹

小云云
發布: 2023-03-19 18:02:02
原創
1585 人瀏覽過

本文主要跟大家分享ajax簡單封裝詳細介紹,希望能版助到大家。

ajax一般分為簡單的四部:

  1. 建立ajax物件(這裡相容ie的話要做一下處理)

  2. 連接,也就是請求物件的open方法(get和post還有點不同,get參數要放在url後面,post要設定請求頭)

  3. 發送,也就是請求物件的send函數(post參數則放在send裡面)

  4. 接收,在onreadystatechange(儲存函數或函數名,每當readyState屬性改變時,就會呼叫函數。)函數裡面處理。

還可以加上超時這些

onreadystatechange分析

  1. 要先判斷readyState的狀態(有四個狀態)

    ①: 0,請求未初始化;

    ②: 1,伺服器連線已建立;

    ③: 2,請求已接收;

    ④ : 3,請求處理中;

    ⑤: 4,請求已完成,且回應已就緒

  2. 當readyState等於4時,你又要判斷status的狀態

  3. 請求成功時status狀態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('&');
}
登入後複製

相關推薦:

#微信小程式實作網路請求簡單封裝的程式碼案例

#php簡單封裝了一些常用JS操作_PHP教學


############################### ##簡單的ajax封裝################

以上是ajax簡單封裝詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板