ajax与jsonp中的几个封装函数
发布时间:2020-12-16 02:44:22 所属栏目:百科 来源:网络整理
导读:首先是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
首先是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,{ user:"admin",pass:"123123" }) } function ajaxPost(url,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",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,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,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,{ user:"root" }) } function jsonp(url,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) } } ? ? ? 放在博客上主要也是方便自己以后好找。看过的人觉得有点用就好 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |