js ajax 组装
背景:当项目不想引入jq,但又想像jq那样便利的使用ajax。所以利用原生js 封装是个不错的选择。
/** * @todo ajax 请求接口数据 * @parmes options 请求配置,option类型是对象 * @parmes options.url 请求链接地址 * @parmes options.type 请求格式GET、POST,默认GET * @parmes options.data 请求数据,默认"" * @parmes options.dataType 响应数据格式,默认json * @parmes options.contentType 数据请求格式,默认application/x-www-form-urlencoded * @parmes options.timeout 设置超时时间,默认15s * @parmes options.async 是否异步,true异步、false同步。默认true * @parmes options.success 成功后回调函数 * @parmes options.error 失败后回调函数 */ var ajax = function(options){ options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"; options.timeout = options.timeout || 15000; options.async = options.async || true; var params = options.data || "" ; //创建 - 第一步 if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari var xhr = new XMLHttpRequest(); } else{// code for IE6, IE5 var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //接收 - 第三步 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { var status = xhr.status; if (status >= 200 && status < 300) { options.success && options.success(xhr.responseText, xhr.responseXML); } else { options.error && options.error(status); } } } //连接 和 发送 - 第二步 if (options.type == "GET") { xhr.open("GET", options.url, options.async); xhr.send(null); } else if (options.type == "POST") { xhr.open("POST", options.url, options.async); //设置表单提交时的内容类型 var contentType = options.contentType ? options.contentType : "application/x-www-form-urlencoded"; xhr.setRequestHeader("Content-Type", contentType); xhr.send(params); } //设置有效时间 setTimeout(function(){ if(xhr.readyState!=4){ xhr.abort(); } },options.timeout); };
基本使用实例:
ajax({ url:"http://server-name/login" type:'post',//HTTP请求类型 data:{ username:'username', password:'password' }, dataType:'json',//服务器返回json格式数据 timeout:10000,//超时时间设置为10秒; contentType:"application/json", //设置发送时数据格式 success:function(data){ //服务器返回响应,根据响应结果,分析是否登录成功; ... }, error:function(e){ //异常处理; console.log(e); } });