ajax簡單封裝詳細介紹

本文主要跟大家分享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 <p>相關推薦：<br></p><p><a href="http://www.php.cn/xiaochengxu-378600.html" target="_self">#微信小程式實作網路請求簡單封裝的程式碼案例</a></p><p><a href="http://www.php.cn/php-weizijiaocheng-311360.html" target="_self">#php簡單封裝了一些常用JS操作_PHP教學</a></p><p><a href="http://www.php.cn/php-notebook-114658.html" target="_self"></a></p><p class="comments-box-content"><br></p>############################### ##簡單的ajax封裝################

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