ajax与jsonp中的几个封装函数
Posted funseey
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax与jsonp中的几个封装函数相关的知识，希望对你有一定的参考价值。
首先是ajax里的get
在页面上添加几个标签用作测试
<body> <input type="text" id="user"> <input type="text" id="pass"> <input type="button" id="btn"> </body>
js部分：
var ouser = document.getElementById("user") var opass = document.getElementById("pass") var obtn = document.getElementById("btn") obtn.onclick = function() var url = "http://localhost/ajax/data/data.php"; ajaxGet(url,function(res) console.log(res) , user:ouser.value, pass:opass.value ); function ajaxGet(url,cb,data) // 1.处理data的默认值 data = data || ; // "url?user=admin&pass=123" // 2.解析要发送的数据 var str = ""; for(var i in data) str += `$i=$data[i]&`; // 3.处理时间戳 var d = new Date(); // 4.拼接url，实现数据的发送和时间戳的拼接 url = url + "?" + str + "__qft="+d.getTime(); // console.log(url) // 5.ajax的正式开启，请求，接收 var xhr = new XMLHttpRequest(); xhr.open("GET",url,true); xhr.onreadystatechange = function() if(xhr.readyState == 4 && xhr.status == 200) cb(xhr.responseText); xhr.send();
因为浏览器会优先拿出缓存中的数据，这样我们就不能实现无刷新加载新数据了。所以，拼接时间戳是为了浏览器每次请求的地址都不相同，以此来欺骗浏览器。
然后是post的封装
document.onclick = function() var url = "http://localhost/ajax/data/data.php"; ajaxPost(url,function(res) console.log(res) , user:"admin", pass:"123123" ) function ajaxPost(url,cb,data) data = data || ; var str = ""; for(var i in data) str += `$i=$data[i]&`; // "user=admin&pass=123&" // post发送的数据，不在url身上 var xhr = new XMLHttpRequest(); // 1.修改ajax的执行方式为post xhr.open("post",url,true); xhr.onreadystatechange = function() if(xhr.readyState == 4 && xhr.status == 200) cb(xhr.responseText) // 2.设置发送数据的格式为表单数据 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // 3.将原来在url身上拼接的数据，交给send发送 xhr.send(str);
GET+POST的封装如下：
document.onclick = function() ajax( // type:"get", //发送方式，可选，默认get url:"http://localhost/1908/ajax/data/data.php", //要请求的地址，必选 success:function(res) //请求成功之后的函数，必选 console.log(res) , // data: //要发送的数据，可选，默认不发 // user:"admin", // pass:13123121123 // , // error:function(res) //请求失败之后的函数，可选，默认不处理 // console.log(res) // , // timeout:10 //请求超时的时间，可选，默认2000 ) function ajax(options) // 1.处理默认参数 var type,url,success,error,data,timeout = options; type = type || "get"; data = data || ; timeout = timeout || 2000; // 2.解析要发送的数据 var str = ""; for(var i in data) str += `$i=$data[i]&`; // 3.根据方式，决定是否处理url if(type == "get") var d = new Date(); url = url + "?" + str + "__qft=" + d.getTime(); // 4.开启ajax var xhr = new XMLHttpRequest(); // 注意：open中的方式 xhr.open(type,url,true); xhr.onreadystatechange = function() if(xhr.readyState == 4 && xhr.status == 200) // 5.执行成功之前，先判断是否传入 success && success(xhr.responseText); // 成功之后，不应有失败 error = null; else if(xhr.readyState == 4 && xhr.status != 200) // 6.执行失败之前，先判断是否传入 error && error(xhr.status); // 失败之后，不应有成功 success = null; // 且失败不应多次执行 error = null; // 7.如果请求超时，执行失败 setTimeout(() => error && error("timeout"); // 失败之后，不应有成功 success = null; , timeout); // 8.最后根据type的方式，决定send的发送内容和格式 if(type == "post") xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.send(str) else xhr.send()
封装jsonp：
document.onclick = function() var url = "http://127.0.0.1/jsonp/data/jsonp.php" jsonp(url,function(res) console.log(res) , user:"root" ) function jsonp(url,cb,data) data = data || ; var str = ""; for(var i in data) str += `$i=$data[i]&`; var script = document.createElement("script"); script.src = url + "?" + str; document.body.appendChild(script); window.fn = function(res) console.log(res)
放在博客上主要也是方便自己以后好找。看过的人觉得有点用就好
以上是关于ajax与jsonp中的几个封装函数的主要内容，如果未能解决你的问题，请参考以下文章
ajax背景ajax对象ajax状态ajax与httpajax请求数据接口同步与异步ajax请求XML数据封装ajax函数artTemplate简介同源策略和跨域请求JSONP