封装的ajax工具函数
2016-09-27 00:00
417 查看
/** * Created by liyinghao on 2016/9/22. */ /*封装ajax工具函数*/ /*请求方式get post 数据格式xml json*/ /*考虑确定有哪些不确定的参数 * 1.请求方式 type get post 没有传递参数的时候 get方式 * 2.接口地址 url 地址如果没有传递,默认是当前的地址 * 3.是否异步 async true false 默认是true异步 * 4.请求数据不确定 data {}对象的形式 默认为空 * 5.请求成功之后做的事情 success 回调函数 callback * 6. 请求失败回调函数 error * 7.请求发送前要做的事情 beforeSend * */ window.$ = { // ajax:function(){} }; /*定义一个ajax工具函数*/ /*options是一个对象var options = {}*/ $.ajax = function (options) { /*如果没有传递参数,就停止执行*/ if (!options || typeof options != 'object') return false; /*如果传递了参数*/ var type = options.type || 'get';//如果有就用用户传递的 // var url=options.url||window.location.href;//如果没有传递地址就使用当前路径(是一个绝对路径) var url = options.url || location.pathname;//如果没有传递地址就使用当前的路径(是一个相对路径) var async = options.async === false ? false : true;//只有传递进来的参数确实是false才是false var data = options.data || {};//向后台传递的参数 不能直接传递对象,需要转化为 /*需要把data数据转化为ajax传递数据的格式 name=xx&age=18 */ var dataStr=''; for (key in data) { dataStr +=key + '=' + data[key] + '&'; } dataStr = dataStr || dataStr.slice(0, -1);//把dataStr最后一个&去掉 /*ajax变成*/ /*初始化*/ var xhr = new XMLHttpRequest(); /*如果是get请求,采纳数应该拼接在url后面*/ xhr.open(type, type == 'get' ? url+'?' + dataStr : url, async); /*设置请求头*/ if (type == 'post') { xhr.setRequestHeader('Content-Type', 'application/x-www-urlencoded'); } /*设置请求内容*/ xhr.send(type = 'get' ? null : dataStr); /*相应部分*/ console.log(111); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { /*首先确定通讯完全完成*/ if (xhr.status == 200) { /*只有这种情况才是通讯成功*/ /*成功*/ /*确定后台想要返回什么数据类型*/ /*application/xml appliaction/json text/xml text/json text/css*/ var contentType = xhr.getResponseHeader('content-Type') var result = null;//接收返回的值 if (contentType.indexOf('xml') > -1) {//说明返回的contentType包含xml后台返回的数据类型为xml result = xhr.responseXML; } else if (contentType.indexOf('json') > -1) { result = xhr.responseText; result = result && JSON.parse(result);//转化为js对象 console.log(result ); } else { result = xhr.responseText; /*当做字符串不做任何处理*/ } /*执行成功回调函数*/ options.success && options.success(result); } else { /*失败*/ /*失败的时候提示信息*/ options.error && options.error({ status: xhr.status, statusText: xhr.statusText }); } } }; }; /*get*/ $.get = function (options) { options.type = 'get'; $.ajax(options); }; /*post*/ $.post = function (options) { options.type = 'post'; $.ajax(options); };
相关文章推荐
- 封装一个Ajax工具函数
- Ajax工具函数封装
- jquery中ajax封装原理/封装jquery的ajax工具函数
- 实用 Ajax 工具函数
- ajax 异步封装-函数 javascript原生
- Ajax学习笔记之Prototype的工具函数汇总
- 实用前端JS工具类(验证,AJAX请求封装,分页插件等)真实项目使用
- Ajax.js工具函数
- AJAX异步请求函数的封装及示例
- 利用JS面向对象+模块化封装集AJAX请求、基本数据校验、URL参数截取等功能于一身的通用工具模块
- ajax返回函数工具
- 原生Javascript封装的一个AJAX函数分享
- Javascript:来一个AJAX封装函数
- jQuery中Ajax工具函数使用2
- 自己做工具--用原生js封装一个AJAX插件
- 统一的Ajax提交封装,一劳永逸好工具(带跨域处理)
- 封装过的Ajax工具类库
- jQuery中Ajax工具函数使用1
- 工作中重新封装编写的一系列工具函数(c/c++)
- 原生JS如何运动ajax封装函数