ajax和jsonp請求 -- 封裝
阿新 • • 發佈：2018-12-10
ajax:
function ajax(opt) { //求情路徑 var url; if(opt.url){ url = opt.url; }else{ console.log('請輸入請求路徑'); } //請求型別 var type = opt.type || 'GET'; //回撥函式 var callback = opt.callback || function (msg) { }; //請求資料 var data = opt.data || []; //拼接求情資料 var str = ''; for(var k in data){ str += k + '=' + data[k] + '&'; } str = str.slice(0,str.length-1); console.log(str); // 1.建立物件 var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼 xmlhttp = new XMLHttpRequest(); } else { // IE6, IE5 瀏覽器執行程式碼 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } // 2.傳送請求 // get請求和post請求 if(type == 'GET'){ //有請求資料時 if(data.length > 0){ var nowUrl = url + '?' + str; xmlhttp.open(type,url,true); xmlhttp.send(); }else{ xmlhttp.open(type,url,true); xmlhttp.send(); } }else{ //有請求資料時 if(data.length > 0){ xmlhttp.open(type,url,true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send(str); }else{ xmlhttp.open(type,url,true); xmlhttp.send(); } } // 3.伺服器響應 xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { callback(xmlhttp.responseText); } } }
使用方法：
ajax({
type:'POST',
data:{
name:'zhangsan',
age:20
},
url:'zz.text',
callback:function(opt){
console.log(opt)
}
})jsonp:
jsonp簡單版：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSONP 例項</title> <style> .jsonp{ display: inline-block; padding: 5px 10px; background-color: aqua; border-radius: 6px; cursor: pointer; } </style> </head> <body> <span class="jsonp">jsonp</span> <div id="divCustomers"></div> <script type="text/javascript"> function jsonp1(result) { console.log(result); } function beginJsonp(req) { var script = document.createElement('script'); var url = req.url + '?jsonpCallback=' + req.callback; script.src = url; document.querySelector('head').appendChild(script); document.querySelector('head').removeChild(script); } document.querySelector('.jsonp').onclick = function () { beginJsonp({ url:'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg', callback:'jsonp1' }); }; </script> </body> </html>
本質就是建立一個script標籤，src地址為請求地址，(原理就是利用script可以跨域訪問，想知道的人可以百度)
jsonp加強版：
(function (globalObj) { function jsonp(opt) { var head = document.querySelector('head'); var url = opt.url || ''; // 拼接data，如果有的話 var data = opt.data || {}; //如果data有內容 var dataStr = ''; if(commonFun.isEmptyObj(data)){ for(var k in data){ dataStr += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&'; } //去掉自最後一個& dataStr = dataStr.slice(0,str.length - 1); } //全域性臨時jsonpCallback,呼叫回填函式 var callback = opt.callback || function (transaction) { }; globalObj.jsonpCallback = function (res) { callback(res); delete globalObj.jsonpCallback; }; // globalObj.jsonpCallback = callback || function (transaction) { }; // 最終的url拼接 url += '?' + dataStr + 'jsonpCallback=jsonpCallback'; //生成script var script = document.createElement('script'); script.src = url; head.appendChild(script); head.removeChild(script); } globalObj.jsonp = jsonp; })(window)
使用時呼叫下面方法
jsonp({
url:'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
data:{
g_tk:5381,
uin:0,
format:'json'
},
callback:function (res) {
console.log(res)
}
});jsonp中，script最後帶的函式只是一個函式名，那個函式一定要是全域性函式，全域性函式多了不好，所以這裡定義了一個臨時的jsonpCallback函式，在臨時函式裡呼叫callback函式，之後在去掉這個全域性臨時函式，不會造成汙染。
jsonp智慧get請求，一般不用，直接後端寫好，前端直接用ajax就可以了。 cors這個東西可以看看