直接擼代碼javascript
封裝方法:html
function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"; var params = formatParams(options.data); //建立 - 非IE6 - 第一步 if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { //IE6及其如下版本瀏覽器 var xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //鏈接 和 發送 - 第二步 if (options.type == "GET") { xhr.open("GET", options.url + "?" + params, true); xhr.send(null); } else if (options.type == "POST") { xhr.open("POST", options.url, true); //設置表單提交時的內容類型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(params); } //接收 - 第三步 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status >= 200 && xhr.status < 300) { options.success && options.success(xhr.responseText, xhr.responseXML); } else { options.error && options.error(xhr.status); } } } } //格式化參數 function formatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); } arr.push(("v=" + Math.random()).replace(".", "")); console.log(arr); return arr.join("&"); }
請求實例:java
ajax({ url: "http://www.xxx.com/app/index", //請求地址 type: "get", //請求方式 data: { page: "page" }, //請求參數 dataType: "json", success: function (response, xml) { // 此處放成功後執行的代碼 console.log(JSON.parse(response)) }, error: function (status) { // 此處放失敗後執行的代碼 } });
JSONPajax
JSONP的核心是動態添加script標籤來調用服務器提供的js腳本json
function jsonp(options) { options = options || {}; if (!options.url || !options.callback) { throw new Error("參數不合法"); } //建立 script 標籤並加入到頁面中 var callbackName = ('jsonp_' + Math.random()).replace(".", ""); var oHead = document.getElementsByTagName('head')[0]; options.data[options.callback] = callbackName; var params = formatParams(options.data); var oS = document.createElement('script'); oHead.appendChild(oS); //建立jsonp回調函數 window[callbackName] = function (json) { oHead.removeChild(oS); clearTimeout(oS.timer); window[callbackName] = null; options.success && options.success(json); }; //發送請求 oS.src = options.url + '?' + params; //超時處理 if (options.time) { oS.timer = setTimeout(function () { window[callbackName] = null; oHead.removeChild(oS); options.fail && options.fail({ message: "超時" }); }, time); } }; //格式化參數 function formatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[i])); } return arr.join('&'); }
ajax與jsonp本質上不是一個東西,ajax的核心是經過XMLHttpRequest對象來獲取非本頁的內容,而jsonp則是經過動態建立script標籤來獲取服務器端的js腳本。跨域
ajax與jsonp的本質區別不在因而否跨域,ajax經過服務器端代理(瀏覽器請求同源服務器,再由後者請求外部服務)也同樣能夠實現跨域,jsonp自己也能夠獲取同源的數據。瀏覽器
同源策略服務器
javascript只能訪問與包含他的文檔在同一頁面下的內容。app
即主機名、協議、端口相同。dom
//下表給出了相對http://store.company.com/dir/page.html同源檢測的示例: //URL 結果 緣由 http://store.company.com/dir2/other.html 成功 http://store.company.com/dir/inner/another.html 成功 https://store.company.com/secure.html 失敗 協議不一樣 http://store.company.com:81/dir/etc.html 失敗 端口不一樣 http://news.company.com/dir/other.html 失敗 主機名不一樣