JavaScript封装Ajax工具函数及jQuery中的ajax，xhr在IE的兼容
封装ajax工具函数
首先要思考：
1、为什么要封装它？提高开发效率
2、把一些不确定的情况考虑在其中
a. 请求方式
b. 请求地址
c. 是否异步
d. 发送参数
e. 成功处理
f. 失败处理
3、确定参数
a. Type--请求方式 get （get/post)
b. Url--请求地址 默认当前地址 字符串
c. Async--是否异步 true （true/false)
d. Data--发送的数据 {} 对象{name：xx}
e. Success--成功回调 function 函数 函数里面就是处理的成功业务
f. Error--失败回调 function 函数 函数里面就是处理失败的业务
/*===============ajax 封装 ===========*/ /*1.确定一个全局对象*/ window.$ = {}; /*2.给全局对象定义一个属性*/ $.ajax = function(options){ /*3.options对象传参 */ /*如果用户不传或者传的不是对象停止执行*/ if(!options || typeof options != 'object') return false; /*4.默认参数的处理*/ var type = options.type == 'post' ? 'post' : 'get'; var url = options.url || location.pathname; var async = options.async === false ? false : true; var data = options.data || {}; /* 对象形式的数据 需要转换成键值对的数据字符串 XHR对象需要 */ var data2str = ''; for(var key in data){ data2str += key+'='+data[key]+'&'; } /*需要去掉最后一个&*/ data2str = data2str && data2str.slice(0,-1); /*if(data2str){ data2str = data2str.slice(0,-1); }*/ /*请求发送之前*/ if(options.beforeSend){ var flag = options.beforeSend(); if(flag === false){ return false; } } /*5.ajax 编程*/ /*5.1 初始化对象*/ var xhr = new XMLHttpRequest(); /*5.2 设置请求行*/ xhr.open(type,type == 'get' ? (url+'?'+data2str) : url,async); /*5.3 设置请求头*/ if(type == 'post'){ xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); } /*5.4 设置请求主体 发送*/ xhr.send(type == 'get'?null:data2str); xhr.onreadystatechange = function(){ /*5.5 通讯完成*/ if(xhr.readyState == 4){ /*5.6 成功的*/ if(xhr.status == 200){ /*需要考虑问题 数据格式问题*/ /*1.怎么确定后台返回的数据格式？*/ /*2.后台有写接口的时候 规范 xml application/xml json application/json*/ var result = null; var contentType = xhr.getResponseHeader('Content-Type'); /*3.如果有xml 就是xml格式数据*/ if(contentType.indexOf('xml') > -1){ result = xhr.responseXML; } /*4.如果有json 就是json格式数据*/ else if(contentType.indexOf('json') > -1){ result = JSON.parse(xhr.responseText); } /*5.如果有标识 普通文本*/ else{ result = xhr.responseText; } /*调用成功回调函数 把数据传递过去*/ options.success && options.success(result); } /*5.7 失败的*/ else{ /*调用失败回调函数*/ options.error && options.error({status:xhr.status,statusText:xhr.statusText}); } } }; /* $.ajax({error:function(msg){}}); $.ajax({success:function(data){}}); * */ }; /*get*/ $.get = function(options){ options.type = 'get'; $.ajax(options); }; /*post*/ $.post = function(options){ options.type = 'post'; $.ajax(options); };
jQuery Ajax 操作函数
jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。
| 函数 | 描述 |
|---|---|
| jQuery.ajax() | 执行异步 HTTP (Ajax) 请求。 |
| .ajaxComplete() | 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
| .ajaxError() | 当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。 |
| .ajaxSend() | 在 Ajax 请求发送之前显示一条消息。 |
| jQuery.ajaxSetup() | 设置将来的 Ajax 请求的默认值。 |
| .ajaxStart() | 当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。 |
| .ajaxStop() | 当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
| .ajaxSuccess() | 当 Ajax 请求成功完成时显示一条消息。 |
| jQuery.get() | 使用 HTTP GET 请求从服务器加载数据。 |
| jQuery.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码数据。 |
| jQuery.getScript() | 使用 HTTP GET 请求从服务器加载 JavaScript 文件，然后执行该文件。 |
| .load() | 从服务器加载数据，然后把返回到 HTML 放入匹配元素。 |
| jQuery.param() | 创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。 |
| jQuery.post() | 使用 HTTP POST 请求从服务器加载数据。 |
| .serialize() | 将表单内容序列化为字符串。 |
| .serializeArray() | 序列化表单元素，返回 JSON 数据结构数据。 |
- jQuery为我们提供了更强大的Ajax封装
- $.ajax({}) 可配置方式发起Ajax请求
- $.get() 以GET方式发起Ajax请求
- $.post() 以POST方式发起Ajax请求
- $('form').serialize() 序列化表单（即格式化key=val&key=val）
- url 接口地址
- type 请求方式
- timeout 请求超时
- dataType 服务器返回格式
- data 发送请求数据
- beforeSend: function () {} 请求发起前调用
- success 成功响应后调用
- error 错误响应时调用
- complete 响应完成时调用（包括成功和失败）
$(function(){ $.ajax({ /*1.请求方式*/ type:'get', /*2.接口地址*/ url:'01 jquer1yAjax.php', /*3.传递数据*/ data:{ username:'xqq' }, /*4.限制返回数据类型 强制转换数据类型 如果转换不成功 会执行错误的回调函数*/ dataType:'json', /*5.请求之前的回调函数*/ beforeSend:function(){ console.log('beforeSend'); /*如果请求回调函数 返回的是 false 停止ajax发送*/ //return false; }, /*6.成功回调函数*/ success:function(data){ console.log(data); }, /*7.失败回调函数*/ error:function(){ console.log('error'); }, /*8.通讯完成回调函数*/ complete:function(){ console.log('complete'); } }); });
- XHR的IE兼容性
function XHR() { /*XMLHttpRequest 存在兼容问题*/ /*1.申明一个xhr*/ var xhr; /*2.运行出现错误 异常 */ /*3.捕获异常*/ try { /*在不支持这个对象的时候 出现异常*/ xhr = new XMLHttpRequest(); } /*4.处理异常*/ catch(e) { /*低版本IE浏览器 初始化xhr对象需要的不同参数*/ var IEXHRVers =["Msxml3.XMLHTTP","Msxml2.XMLHTTP","Microsoft.XMLHTTP"]; /*变量数组*/ for (var i=0;i<IEXHRVers.length;i++) { /*5.捕获异常*/ try { /*低版本IE初始化xhr对象的方式*/ xhr = new ActiveXObject(IEXHRVers[i]); } catch(e) { continue; } } } return xhr; }
