当前位置:首页 >> 网络编程

jQuery进阶实践之利用最优雅的方式如何写ajax请求

前言

jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。

废话少说,直接进入正题,jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧。

首先需要一个配置文件

var api = {
 basePath: 'http://192.168.200.226:58080',
 pathList: [
  {
   name: 'agentHeartBeat',
   path:'/api/csta/agent/heartbeat/{{agentId}}',
   method:'post'
  },
  {
   name: 'setAgentState',
   path: '/api/csta/agent/state',
   method: 'post'
  },
  {
   name: 'getAgents',
   path: '/user/agent/{{query}}',
   method: 'get'
  }
 ]
}

然后需要一个方法,把配置文件生成接口

function WellApi(Config){
var headers = {};
var Api = function(){};
Api.pt = Api.prototype;
var util = {
 ajax: function(url, method, payload) {
  return $.ajax({
   url: url,
   type: method || "get",
   data: JSON.stringify(payload),
   headers: headers,
   dataType: "json",
   contentType: 'application/json; charset=UTF-8'
  });
 },
 /**
  * [render 模板渲染]
  * 主要用于将 /users/{{userId}} 和{userId: '89898'}转换成/users/89898,和mastache语法差不多,
  * 当然我们没必要为了这么小的一个功能来引入一个模板库
  * query字符串可以当做一个参数传递进来
  * 例如: /users/{{query}}和{query:'"color: #ff0000">试用一下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <script src="/UploadFiles/2021-04-02/jquery.min.js">

优点与扩展

[优点]:类似与promise的回调方式

[优点]:增加一个接口只是需要增加一个配置文件,很方便

[扩展]:当前的ajax 的contentType我只写了json,有兴趣可以扩展其他的数据类型

[缺点]:没有对函数参数进行校验

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。