Ajax发送网络请求封装
GET请求的封装
主要处理:
(1)创建请求对象(兼容性处理)
(2)设置请求路径和请求方法
01 处理参数(把对象中的键值对转换为数组后连接)
02 处理GET请求缓存(增加随机因子参数)
03 处理中文转码问题(EncodeURI)
(3)发送请求
(4)监听请求状态(请求状态==4判断响应码)
(5)处理请求成功和失败的回调
示例代码
function get(url,obj,successCallBack,errorCallBack) { //01 创建请求对象 var xmlHttp; if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); }else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } //02 设置请求路径 //0201 处理参数(把对象中的键值对进行转换) var arrM = []; for(var key in obj) { arrM.push(key+"="+obj[key]); } //0202 处理GET请求在IE浏览器中的缓存问题 arrM.push("tn="+ Math.random());; var objRes = arrM.join("&"); url = url + "?" + encodeURI(objRes); //0203 设置请求方法和路径 xmlHttp.open("get",url,true); //03 发送请求 xmlHttp.send(); //04 监听请求状态 xmlHttp.onreadystatechange = function () { if(xmlHttp.readyState == 4) { //05 处理服务器返回的数据 if(xmlHttp.status >=200 && xmlHttp.status<300 || xmlHttp.status == 304){ //..成功之后的处理 successCallBack(xmlHttp.responseText); }else { //...失败之后的处理 errorCallBack(xmlHttp.status); } } } }
POST请求的封装
主要处理:
(1)创建请求对象(兼容性处理)
(2)设置请求路径和请求方法(post)
01 处理参数(把对象中的键值对转换为数组后连接)
02 处理GET请求缓存(增加随机因子参数)
(3)设置请求路径(xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");)
(4)发送请求并设置参数
(5)监听请求状态(请求状态==4判断响应码)
(6)处理请求成功和失败的回调
示例代码
function post(url,obj,successCallBack,errorCallBack) { //01 创建请求对象 var xmlHttp; if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); }else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } //02 设置请求路径 //0201 处理参数(把对象中的键值对进行转换) var arrM = []; for(var key in obj) { arrM.push(key+"="+obj[key]); } //0202 处理GET请求在IE浏览器中的缓存问题 arrM.push("tn="+ Math.random()); var objRes = arrM.join("&"); //url = url + "?" + encodeURI(objRes); //0203 设置请求方法和路径 xmlHttp.open("post",url,true); //+) 设置请求头 xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //03 发送请求 xmlHttp.send(objRes); //04 监听请求状态 xmlHttp.onreadystatechange = function () { if(xmlHttp.readyState == 4) { //05 处理服务器返回的数据 if(xmlHttp.status >=200 && xmlHttp.status<300 || xmlHttp.status == 304){ //..成功之后的处理 successCallBack(xmlHttp.responseText); }else { //...失败之后的处理 errorCallBack(xmlHttp.status); } } } }
兼容GET和POST请求
说明:
(1)把get请求和post请求使用一个函数来封装,通过传递参数来区分
(2)如果某些选项不传递那么则采用默认的处理方式
(3)使用option对象来管理所有的参数
function ajaxTest(option) { //00 设置默认的请求参数: option.type = option.type || "get"; option.obj = option.obj || {}; option.successCallBack = option.successCallBack || function () { console.log("成功"); } option.errorCallBack = option.errorCallBack || function () { console.log("失败"); } //01 创建请求对象 var xmlHttp; if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); }else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } //02 设置请求路径 //0201 处理参数(把对象中的键值对进行转换) var arrM = []; for(var key in option.obj) { arrM.push(key+"="+option.obj[key]); } //0202 处理GET请求在IE浏览器中的缓存问题 arrM.push("tn="+ Math.random()); var objRes = arrM.join("&"); //0203 设置请求方法和路径 if(option.type == "get") { option.url = option.url + "?" + encodeURI(objRes); } xmlHttp.open(option.type,option.url,true); if(option.type == "post") { //+) 设置请求头 xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //03 发送请求 xmlHttp.send(objRes); } xmlHttp.send(); //04 监听请求状态 xmlHttp.onreadystatechange = function () { if(xmlHttp.readyState == 4) { //05 处理服务器返回的数据 if(xmlHttp.status >=200 && xmlHttp.status<300 || xmlHttp.status == 304){ //..成功之后的处理 option.successCallBack(xmlHttp.responseText); }else { //...失败之后的处理 option.errorCallBack(xmlHttp.status); } } } }