首先是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) } }
放在博客上主要也是方便自己以后好找。看过的人觉得有点用就好
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。