标签：success get data JS xhr ajax jsonp type
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); }}
}
标签：success,get,data,JS,xhr,ajax,jsonp,type 来源： https://www.cnblogs.com/nongfusanquan/p/11412556.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。