今天大概梳理總結了一下之前學習js中的 jsonp、ajax以及跨域的部分問題，
1、什么是跨域？
在前后端分離模式下，前后端域名不一致，這種時候就會發生跨域訪問的問題，跨域問題來源于js同源策略，即只有 協議+主機名+埠號(如存在)相同才允許相互訪問，
2、什么是同源策略？
同源策略 是由NetScape提出的一個著名的安全策略，所謂的同源，指的是協議，域名，埠相同，瀏覽器處于安全方面的考慮，只允許本域名下的介面互動，不同源的客戶端腳本，在沒有明確授權的情況下，不能讀寫對方的資源，
3、什么是jsonp？
上面說了跨域，因為js不可以直接跨域請求資料，但是可以直接跨域請求腳本，所以我們可以想出這樣一個方案：
把要請求的資料封裝成一個js陳述句，做一個方法的呼叫，
跨域請求js腳本可以得到此腳本，得到js腳本之后會立即執行，
把資料做為引數傳遞到方法中，就可以獲得資料，從而解決跨域問題，
這樣的一個方案就可以稱之為jsonp，
4、jsonp作業原理？
因為瀏覽器允許通過script標簽的src跨域請求，因此我們就可以在請求結果中添加一個回呼函式方法，然后在頁面中定義方法，這樣就可以順利獲取到跨域請求的資料，這就是其作業原理，
5、什么是ajax？
ajax：即Asynchronous JavaScript and XML，ajax主要是用于實作頁面和web服務器之間資料的異步傳輸的，
一個完整的ajax包括五個步驟：
（1）創建異步物件
（2）設定請求行（open）
（3）注冊事件
（4）發送請求（send）
（5）獲取相應，更新頁面
需要注意的是：jsonp和ajsx雖然在呼叫方式上相似，并且都是請求一個url進而把服務器回傳的資料進行處理，但兩者本質上并不相同，ajsx主要是通過XmlHttpRequest獲取頁面內容，而jsonp則是通過動態添加script呼叫js腳本，
以下附上自己寫的用ajax封裝get和post請求的方法代碼，相關注釋都已標識，
//-------------封裝
function ajax(option) {
//創建異步物件
var xhr = new XMLHttpRequest();
/**分別判斷是get還是post**/
//如果是get并且有資料
if (option.type == 'get' && option.data) {
option.url = option.url + '?' + option.data;
}
//設定請求行
xhr.open(option.type, option.url);
//設定請求頭(post有資料發送才需要設定請求頭)
//判斷是否有資料發送
if (option.type == 'post' && option.data) {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
}
//注冊回呼函式
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//接識訓傳的資料型別
var type = xhr.getResponseHeader('Content-Type');
/**設定接識訓傳的資料型別的三種處理方式**/
//json格式
if (type.indexOf('json') != -1) {
option.callback(JSON.parse(xhr.responseText));
}
//xml格式
else if (type.indexOf('xml') != -1) {
option.callback(xhr.responseXML);
}
//普通格式
else {
option.callback(xhr.responseText);
}
}
}
//發送請求主體
//判斷不同的請求型別
xhr.send(option.type == 'post' ? option.data : null);
}轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/332106.html
標籤：其他
下一篇：前端開發學習路線圖