jQuery Ajax全局调用封装实例代码详解

在前端开发中，Ajax作为异步通信技术已经得到了广泛的应用。而通过jQuery库封装的Ajax则在开发中变得更加方便，让我们更加容易地处理数据请求和响应。本文将会详细介绍如何将jQuery的Ajax进行全局封装调用，以及如何实现Ajax的参数传递和数据处理。

前置知识

在进行本文讲解前，需要了解一些JavaScript编程的基础知识、一定的jQuery框架和Ajax异步技术的知识。

实现步骤

1. 在网站上引入jQuery库

除非使用了CDN，否则必须在网站上引入jQuery库。

<!-- 引入jQuery库 -->
<script src="//cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>

2. 定义全局Ajax请求

我们可以定义一个全局的Ajax请求，以便在我们网站上需要调用Ajax时进行使用。这可以通过使用jQuery.ajaxSetup()方法来实现。

// 定义全局Ajax请求
$.ajaxSetup({
  type: "POST",
  dataType: "json",
  timeout: 10000,
  cache: false,
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    alert('请求出错了，请稍后再试！');
  }
});

代码中，我们为Ajax请求定义了以下参数：

• type - 请求的类型，默认为POST
• dataType - 预期的响应数据类型，默认为json
• timeout - 超时时间：设置请求超时时间（毫秒）
• cache - 是否启用缓存，默认为false
• error - 全局错误处理，无论在哪个请求出错，都会消失错误信息

3. 封装Ajax请求

定义完全局请求之后，我们可以封装一个Ajax请求来运行，在此之上可以调用我们定义的全局Ajax参数。以下是使用jQuery.ajax()方法封装的示例：

function ajaxRequest(url, postData, callback) {
  $.ajax({
    url: url,
    data: postData,
    success: function(res) {
      callback(res);
    }
  });
}

在这个示例中，我们的Ajax请求被url、postData和callback参数所定义。当url变量和postData变量被设置，就会执行一次Ajax请求。当请求成功时，将会回调callback函数，并将响应的数据作为参数传递给它。

4. 调用封装的Ajax请求

现在，我们封装的Ajax请求已经可以被成功调用了。为了演示，我们将使用一个示例方法来进行调用：

function doSomething() {
  // 使用之前定义的Ajax请求进行调用
  ajaxRequest('http://example.com', {name: 'John', age: 25}, function(res) {
    // ...请求成功后的处理
  });
}

在这个示例中，doSomething方法将执行一个Ajax请求。ajaxRequest方法的第一个参数指定了url，而第二个参数则指定了POST数据。这里我们传递了JSON对象{name: 'John', age: 25}作为POST数据。当请求成功时，会执行回调函数，并将返回的数据作为参数传递给回调函数。

5. 完整代码

以下是一个完整的代码示例，将全局Ajax请求和封装的Ajax请求结合在了一起：

// 定义全局Ajax请求
$.ajaxSetup({
  type: "POST",
  dataType: "json",
  timeout: 10000,
  cache: false,
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    alert('请求出错了，请稍后再试！');
  }
});

// 封装Ajax请求，传递URL、POST数据和回调函数，返回响应数据
function ajaxRequest(url, postData, callback) {
  $.ajax({
    url: url,
    data: postData,
    success: function(res) {
      callback(res);
    }
  });
}

// 调用封装的Ajax请求
function doSomething() {
  ajaxRequest('http://example.com', {name: 'John', age: 25}, function(res) {
    // ...请求成功后的处理
  });
}

示例说明

下面我们通过两个示例来详细演示全局Ajax请求的封装和使用。

示例一 - 用户登录

首先，我们假设一个场景：在网站的登录界面上，我们需要通过Ajax请求来验证用户的输入用户名和密码，请求返回成功后，才能让用户进行进一步的操作。我们可以将这个Ajax请求进行全局的封装，以便在登录页面和其他页面上都可以使用。以下是一个简单的代码示例：

$(document).ready(function() {
  // 封装Ajax请求
  function ajaxRequest(url, postData, callback) {
    $.ajax({
      url: url,
      data: postData,
      type: "POST",
      dataType: "json",
      cache: false,
      timeout: 10000,
      success: function(res) {
        if (res.code === 0) {
          callback(res);
        } else {
          alert('登录失败：' + res.msg);
        }
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert('请求出错了，请稍后再试！');
      }
    });
  }

  // 用户登录
  function userLogin() {
    var userName = $('#user_name').val();
    var userPwd = $('#user_pwd').val();

    ajaxRequest('/api/user/login', {name: userName, pwd: userPwd}, function(res) {
      // 登录成功后的逻辑
    });
  }

  // 在登录按钮上添加click事件
  $('#login_btn').click(function() {
    userLogin();
  });
});

在这个示例中，我们使用了jQuery.ajaxSetup()方法定义了全局Ajax请求的参数，然后定义了一个名为ajaxRequest的方法，用于封装Ajax请求。在用户登录按钮上，我们添加了一个click事件，并调用了userLogin方法来执行我们定义的Ajax请求。当请求成功时，我们将会执行回调函数，并处理返回的数据。当请求失败时，我们会弹出一个警告框来提示用户。

示例二 - 获取商品列表

现在，我们将看到如何在网站的商品列表页面上使用全局Ajax请求。我们编写了一个函数来显示商品列表，若商品列表数据不存在则发出我们封装好的Ajax请求来调用。以下是示例代码：

// 定义全局Ajax请求
$.ajaxSetup({
  type: "POST",
  dataType: "json",
  timeout: 10000,
  cache: false,
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    alert('请求出错了，请稍后再试！');
  }
});

// 封装Ajax请求
function ajaxRequest(url, postData, callback) {
  $.ajax({
    url: url,
    data: postData,
    success: function(res) {
      callback(res);
    }
  });
}

// 显示商品列表
function showProductList() {
  var productListData = $('#product-list-data');
  if (productListData.length === 0) {
    // 商品列表数据未加载，则进行Ajax请求
    ajaxRequest('/api/product/list', {}, function(res) {
      if (res.code === 0) {
        for (var i = 0; i < res.data.length; i++) {
          // ... 处理商品数据
        }
      }
    });
  }
}

// 执行函数
showProductList();

在这个示例中，我们定义了一个名为showProductList的方法来显示商品列表。当商品列表的数据不存在时，就执行我们定义的Ajax请求，并处理返回的数据。我们的Ajax请求被ajaxRequest方法封装，当请求成功时，我们会执行回调函数来处理商品数据。