JS中ajax和jsonp的综合封装

Ajax是前后端数据交互的重要手段

 

Ajax是由一串技术的集合:

 

    1.JavaScript，通过用户或其他与浏览器相关事件捕获交互行为

 

    2.XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求；

 

    3.服务器上的文件，以 XML、HTML 或 JSON 格式保存文本数据；

 

    4.其它 JavaScript，解释来自服务器的数据（比如 PHP 从 MySQL 获取的数据）并将其呈现到页面上。

 

ajax 包含众多特性，优势与不足也非常明显。优势主要以下几点：

 

    1.不需要插件支持（一般浏览器且默认开启 JavaScript 即可）；

 

    2.用户体验极佳（不刷新页面即可获取可更新的数据）；

 

    3.提升 Web 程序的性能（在传递数据方面做到按需发送，不必整体提交）；

 

    4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；

 

ajax 的不足由以下几点：

 

    1.不同版本的浏览器对 XMLHttpRequest 对象支持度不足(比如 IE5 之前)；

 

    2.前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）；

 

    3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；

JSONP：就是利用浏览器对html标签（如：a，img，link，script等）没有做跨域请求限制的情况，使用script加载跨域接口的url。

注:当本机请求服务器上数据的时候：会发生跨域；

地址类型:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&cb=liyang

function ajax(options){

　　var {type,url,success,error,data} = options;//解构模式接收传入的值

　　type = type || "get";//判断type请求类型,默认为get

　　data = data || {};//判断data数据是否为空,为空时设为空对象

　　var str = "";//用于地址的拼接

　　for(var i in data){//遍历data数据,并按照http地址形式进行拼接

　　　　str +=`${i}=${data[i]}&`;

　　}

　　if(type == "get" || type =="jsonp"){

　　　　var d = new Date();

　　　　url = url + "?" + str + "_init_" + d.getTime();//拼接完整地址,添加d.getTime()设置毫秒数,解决浏览器缓存问题

　　}

　　if(type == "jsonp"){//jsonp用于解决ajax不能跨域的问题

　　　　var script = document.createElement("script");

　　　　script.src = url;

　　　　document.body.appendChild(script);

　　　　window[data[data.column]] == function(res){

　　　　　　success && success(res);//成功时返回success(res),并将错误设为空

　　　　　　error = null;

　　　　};

　　　　setTimeout(function(res){//暂未添加

　　　　　　error && error(res);//同success

　　　　　　success = null;

　　　　},2000);

　　}else if(type == "get" || type == "post"){//当type类型为get或post时,构建ajax

　　　　var xhr = new XMLHttpRequest();//1

　　　　xhr.open(type,url,true);//2

　　　　if(xhr.onreadystatechange == 4 && xhr.status == 200){//3.ajax成功

　　　　　　success && success(xhr.responseText);

　　　　}else if(xhr.onreadystatechange == 4 && xhr.status != 200){//ajax失败

　　　　　　error && error(xhr.status);

　　　　}

　　　　//get和Post的ajax发送方法判断

　　　　if(type == "get"){

　　　　　　xhr.send();

　　　　}else if(type == "post"){

　　　　　　xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//type为post时在发送前添加

　　　　　　xhr.send(str);

　　　　}

　　}

}