登录  /  注册
首页 > web前端 > js教程 > 正文

jQuery中用最优雅的方式写ajax请求

小云云
发布: 2017-12-05 09:22:06
原创
1487人浏览过

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。本文我们就和大家分享如何用最优雅的方式写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:'?name=jisika&sex=1'}
     * @Author   Wdd
     * @DateTime 2017-03-13T19:42:58+0800
     * @param    {[type]} tpl [description]
     * @param    {[type]} data [description]
     * @return   {[type]} [description]
     */
    render: function(tpl, data){
        var re = /{{([^}]+)?}}/g;
        var match = '';

        while(match = re.exec(tpl)){
            tpl = tpl.replace(match[0],data[match[1]]);
        }

        return tpl;
    }
};

/**
 * [setHeader 暴露设置头部信息的方法]
 * 有些方法需要特定的头部信息,例如登录之后才能获取sesssionId,然后访问所有的接口时,必须携带sessionId
 * 才可以访问
 * @Author   Wdd
 * @DateTime 2017-03-13T10:34:03+0800
 * @param    {[type]} headers [description]
 */
Api.pt.setHeader = function(headers){
    headers = headers;
};

/**
 * [fire 发送ajax请求,this会绑定到每个接口上]
 * @Author   Wdd
 * @DateTime 2017-03-13T19:42:13+0800
 * @param    {[type]} pathParm [description]
 * @param    {[type]} payload [description]
 * @return   {[type]} [description]
 */
function fire(pathParm, payload){
    var url = util.render(this.path, pathParm);
    return util.ajax(url, this.method, payload);
}


/**
 * [for 遍历所有接口]
 * @Author   Wdd
 * @DateTime 2017-03-13T19:49:33+0800
 * @param    {[type]} var i [description]
 * @return   {[type]} [description]
 */
for(var i=0; i <p> </p><h2>试用一下</h2><pre class="brush:php;toolbar:false">nbsp;html&gt;


    <meta>
    <title></title>
    <script></script>
    <script></script>
    <script></script><script>
    var saas = WellApi(api);

    saas.agentHeartBeat.fire({agentId: &#39;5001@1011.cc&#39;})
    .done(function(res){
        console.log(&#39;心跳成功&#39;);
    })
    .fail(function(res){
        console.log(&#39;心跳失败&#39;);
    });
</script>
登录后复制

 

优点与扩展

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

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

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

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

以上内容就是如何用最优雅的方式写ajax请求的方法。希望能帮助到大家。

相关推荐:

php处理ajax请求与ajax跨域

javascript实现ajax请求步骤用法实例详解

如何实现jquery中ajax请求的用法详解

以上就是jQuery中用最优雅的方式写ajax请求的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号