我的前端工具集（六）Ajax封装token liuyuhang原创，未经允许禁止转载 在单点登陆中，或登陆验证后，不应该每次都验证用户名和密码，也不应该将用户名密码存入cookie中（虽然很多都这么做） token作为一种验证策略，实现起来比较简单，也可以找一些单点登陆的框架，或者token解决方案。 本文工具使用REST风格，将ajax经过简单封装，使得所有使用此封装后的ajax都默认进行token验证。 1、封装的ajax代码 /*** 封装ajax代码*/var loc...
/*** ITCAST WEB* Created by lsy on 2016/5/24.*//** 1. 请求的类型 type get post* 2. 请求地址 url* 3. 是异步的还是同步的 async false true* 4. 请求内容的格式 contentType* 5. 传输的数据 data json对象** 6.响应成功处理函数 success function* 7.响应失败的处理函数 error function** 这些都是动态参数 参数对象 o...
最近在完成公司项目，技术栈为vue2.0+vux+vuex+webpack+echarts...另外还有vue-router及vue-loader(webpack下loader插件 可以把.vue文件 输出成组件).考虑将ajax封装，目的有两个：1、页面内写法简单，格式和国网平台格式一致，后期无需再更改代码2、复用性3、域名，端口等信息可以实现统一管理。首先，先在components模块内定义自己的ajax，此处使用install方法，目的是可以在main.js中使用vue.use()方法将其注入vue实例中，具体代...
在前端异步获取数据时候每次都是使用 ajax；为了通用性更好，然而封装通用的 ajax 是一个一劳永逸的办法。 本次基于 jQuery 封装实现； 第一步： 引入 jQuery：<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script>第二步：实现代码：// 该封装基于 jQueryvar sendAjax = function(method, url, data, successfn, errorfn) {$.ajax({type: method,url: url,data: data,success: function(d){succ...
虽然jquery的较新的api已经很好用了， 但是在实际工作还是有做二次封装的必要，好处有：1，二次封装后的API更加简洁，更符合个人的使用习惯；2，可以对ajax操作做一些统一处理，比如追加随机数或其它参数。同时在工作中，我们还会发现，有一些ajax请求的数据，对实时性要求不高，即使我们把第一次请求到的这些数据缓存起来，然后当相同请求再次发起时直接拿之前缓存的数据返回也不会对相关功能有影响，通过这种手工的缓存控制，减少...
虽然jquery的较新的api已经很好用了， 但是在实际工作还是有做二次封装的必要，好处有：1，二次封装后的API更加简洁，更符合个人的使用习惯；2，可以对ajax操作做一些统一处理，比如追加随机数或其它参数。同时在工作中，我们还会发现，有一些ajax请求的数据，对实时性要求不高，即使我们把第一次请求到的这些数据缓存起来，然后当相同请求再次发起时直接拿之前缓存的数据返回也不会对相关功能有影响，通过这种手工的缓存控制，减少...
function ajax(opt) {opt = opt || {}; // 对实参处理var xmlhttp, method, url, async, dataType, data;method = opt.method || GET; // 默认method为GETmethod = trim(method).toUpperCase(); //转换成大写并去除空格url = opt.url //请求地址url = trim(url);async = opt.async || true; ...
Ajax的小封装对ajax的get请求的小封装 function Ajax() { var xhr =null; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHttp"); } this.get=function(url,success,fail){ //get请求 xhr.open("GET", "1.jsp",true); xhr.onreadystatechange=function(){ if(xhr.readyState==4) { alert(xhr.status); if(xhr.status==200) { var txt = xhr...
本文主要和大家分享ajax简单封装详细介绍，希望能版助到大家。ajax一般分为简单的四部：创建ajax对象（这里兼容ie的话要做一下处理）连接，即请求对象的open方法（get和post还有点不同，get参数要放在url后面，post要设置请求头）发送，即请求对象的send函数（post参数则放在send里面）接收，在onreadystatechange（存储函数或函数名，每当readyState属性改变时，就会调用该函数。）函数里面处理。还可以加上超时这些onreadystatec...
大家都知道二次封装jquery，Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML，下面这篇文章主要给大家介绍了关于二次封装jquery ajax办法示例，文中通过示例代码介绍的非常详细，需要的朋友们下面来一起看看吧，希望能帮助到大家。AJax所涉及到得技术： 1.使用CSS和XHTML来表示。 2. 使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。(核心) 4.使用javas...
实例如下： <?php class DBDA {public $host="localhost";public $uid = "root";public $pwd = "123";public $dbname = "mydb";//成员方法public function Query($sql,$type=1){$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);$r = $db->query($sql);if($type==1){return $r->fetch_all();}else{return $r;}}//返回字符串的方法public function StrQuery($sql,$type=1){$db = new MySQLi($this->host,$this->...
本篇文章给大家带来的内容是关于jquery ajax方法封装及api文件设计的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。封装 jquery ajax 文件/*** 封装 jquery ajax * 例如:* ajaxRequest.ajax.triggerService(* apiCommand, [命令数据] )* .then(successCallback, failureCallback);* );*/ var JSON2 = require(LibsDir/json2); var URL = ../AjaxHandler.aspx?r=;// 用来记录每次请求的唯一标识 va...
本篇文章给大家带来的内容是关于jquery ajax 方法封装的介绍（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。简要说明前面我写了一篇《jquery ajax 方法封装及 api 文件设计》文档，主要用来说明我们在项目中通常会对 jquery 的 ajax 方法进行进一步的封装处理，便于我们在业务代码中使用。从那篇文档中我们可以了解到如何封装ajax方法、如何设计 API 文件，以及如何在业务代码中调用 API 接口。这篇文...
本篇文章给大家带来的内容是关于Vue封装ajax的代码示例详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。HTML文件：<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><button @click="getInfo">点击获取信息</button><span>{{ msg }}</span></div><script src="vue.js"></script><script src="vue-ajax.js"></script><script>var vm=new Vue({el: "...
本篇文章给大家带来的内容是关于promise如何封装ajax？promise封装ajax的实现方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。首先贴代码var ajaxOptions = {url: url,method: GET,async: true,data: null,dataType: text, }function ajax(protoOptions) {var options = {};for(var i in ajaxOptions){options[i] = protoOptions[i] || ajaxOptions[i];}return new Promise(function(resolve, reject){var x...