封装函数，采用面向对象的形式封装，用函数包裹，防止空间浪费，函数附带转码功能
- 自调用函数（function( ){ }）( )；函数里面的变量只能在函数里面使用；
- 添加一个函数作用，使函数里面的东西不要污染到HTML的东西，（假如HTML中的文件，和JS文件中变量相同就会改变里面的数值，如果使用自调用函数，JS文件和HTML文件互不影响）
用对象传递参数：
obj：代表参数集合，里面有很多参数；
参数：
url：代表请求的地址参数
data：发送的数据（以对象的形式传递，防止传递参数书写太长出错）；
var data = {
"type": "send",
"sender": "loye",
"content": "你好"，
}
async: 是否为异步（true、false）;
success: 成功处理回调函数；
fail：失败处理函数；
封装ajax函数代码
// 自调用函数
(function(){
// 想要在外面调用ajax对象，需要将ajax的接口暴露出来，借助window对象
ajax = window.ajax = {};
// 在ajax对象中添加一个get方法
ajax.get = function(obj){
// 判断 obj.data 是否传递参数
if(obj.data == undefined){
// 如果没有传递，默认为空
obj.data = "";
}
// 判断 obj.async 是否传递参数
if(obj.async == undefined){
// 如果没有传递参数，默认有异步请求方式，为true
obj.async = true;
}
// 1. 创建对象
var xhr = new XMLHttpRequest();
// 定义一个变量， 保存 传递的访问地址
var url = obj.url;
// 向 url 后面加? 添加提交数据
url += "?";
// 添加提交的数据，translate 自定义函数，将对象 转换成拼接字符串
url += translate(obj.data);
// 2. 准备
xhr.open("GET",url,obj.async);
// 3. 发送
xhr.send();
// 4. 获取数据
// 判断判断 obj.async 是否是异步请求
if(obj.async == true){
// 状态改变函数
xhr.onreadystatechange = function(){
// 判断改变状态
if(xhr.readyState == 4){
// 判断状态码
if(xhr.status == 200){
// 获得返回数据
var str = xhr.responseText;
// 数据返回成功，执行成功回调函数
success && obj.success(str);
}
else{
// 数据返回失败，执行失败回调函数
fail && obj.fail();
}
}
}
}
else{ // 同步方式
if(xhr.status == 200){
// 获得返回数据
var str = xhr.responseText;
// 数据返回成功，执行成功回调函数
success && obj.success(str);
}
else{
// 数据返回失败，执行失败回调函数
fail && obj.fail();
}
}
}
// 添加一个POST请求的方式
ajax.post = function(obj){
// 判断 obj.data 是否传递参数
if(obj.data == undefined){
// 如果没有传递，默认为空
obj.data = "";
}
// 判断 obj.async 是否传递参数
if(obj.async == undefined){
// 如果没有传递参数，默认有异步请求方式，为true
obj.async = true;
}
// 1. 创建对象
var xhr = new XMLHttpRequest();
// 定义一个变量， 保存 传递的访问地址
var url = obj.url;
// 2. 准备
xhr.open("GET",url,obj.async);
// POST 请求和Web请求提交不同，需要使用XHR 来模仿表单提交
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 3. 发送
// translate 自定义函数，将对象 转换成拼接字符串
xhr.send(translate(obj.data));
// 4. 获取数据
// 判断判断 obj.async 是否是异步请求
if(obj.async == true){
// 状态改变函数
xhr.onreadystatechange = function(){
// 判断改变状态
if(xhr.readyState == 4){
// 判断状态码
if(xhr.status == 200){
// 获得返回数据
var str = xhr.responseText;
// 数据返回成功，执行成功回调函数
success && obj.success(str);
}
else{
// 数据返回失败，执行失败回调函数
fail && obj.fail();
}
}
}
}
else{ // 同步方式
if(xhr.status == 200){
// 获得返回数据
var str = xhr.responseText;
// 数据返回成功，执行成功回调函数
success && obj.success(str);
}
else{
// 数据返回失败，执行失败回调函数
fail && obj.fail();
}
}
}
// 自定义函数translate ，作用：将对象 转换成拼接字符串
function translate(obj){
// 定义一个空的字符串，用于拼接转换的字符串
var str = "";
// 遍历传递的obj（即obj.data）对象
for(var i in obj){
str += i; // 拼接 属性 i type
str += "="; // 拼接 = =
str += encodeURIComponent(obj[i]); // 拼接 属性值 obj[i] send
str += "&"; // 拼接 & &
}
// 截取字符串，从第 0 个字符 到 第 str.length-1 个 字符
var str = str.substr(0,str.length-1);
// 返回str的值
return str；
}
})();
【注1】 str += encodeURIComponent(obj[i]); 直接将编码的字符串拼接，后面不用再进行编码，改函数中附带编码效果，将编码结果传递给后台，可以自动识别，不需要在进行转码；
【注2】str.substr(num,length) 截取字符串:num 表示从下标为 num 的字符开始截取，length 表示所截取的字符串长度：
例： query& 截取结果为 query；query& 字符串的长度为 6, str.length-1 的结果就为5，表示从下标为0的字符开始，截取5个字符，所以结果为query；
网友评论