1. 發(fā)布網(wǎng)站
1. 項目：前端后端開發(fā)的項目代碼；
2. 域名：需要在萬網(wǎng)(被阿里云收購)上購買域名；每個域名像身份證號一樣，不會重復(fù)，一旦被注冊，就不能進(jìn)行再次購買；-->解析-->備案
- DNS 解析；讓當(dāng)前域名和服務(wù)器的IP地址進(jìn)行綁定；
3. 服務(wù)器:每個服務(wù)器都會有一個對應(yīng)的IP地址；會把項目部署到服務(wù)器上；
- 虛擬服務(wù)器；-->一般用于小型項目和小型公司的網(wǎng)站
4. ftp ： 可以把項目上傳到服務(wù)器；特定的端口下；
5. 【端口號】在服務(wù)器上分布這65535個小房間；一個服務(wù)器最多承載65535個項目；端口號的范圍 0-65535;
- 一般情況下，一個端口只配置一個項目；如果有兩個項目，就會出現(xiàn)端口的占用；一個端口只能監(jiān)聽一個項目
2. http協(xié)議
- http : 超文本傳輸協(xié)議；在客戶端和服務(wù)器之間不僅可以進(jìn)行文本的傳輸，還可以傳送圖片，視頻，音頻； 是瀏覽器和服務(wù)端之間的約定好的一種規(guī)范；
- https : 加密的傳輸協(xié)議； 更安全，在協(xié)議加了一層密碼，不容易被攻擊；像銀行，支付寶，政府等一般使用這類協(xié)議；
- http : 運行在客戶端和服務(wù)器之間的快遞小哥；可以把客戶端信息傳送給服務(wù)器；服務(wù)器可以整理好的數(shù)據(jù)通過http 再發(fā)送給客戶端；
3. 在瀏覽器中輸入一個url,都發(fā)生了什么?
1. http請求階段
- 瀏覽器首先會把url 發(fā)送給DNS服務(wù)器；解析出一個服務(wù)器的IP地址；
- DNS服務(wù)器會根據(jù)IP找到對應(yīng)的服務(wù)器，(服務(wù)器需要聯(lián)網(wǎng)）;
- 服務(wù)器接收到請求；客戶端和服務(wù)器已經(jīng)產(chǎn)生了鏈接；
2. http響應(yīng)階段
- 服務(wù)器接收到請求后，會根據(jù)你傳過來的地址，路徑等找到對應(yīng)的項目；
- 在服務(wù)器找到之后，服務(wù)器立即把一些響應(yīng)信息放在響應(yīng)頭，通過http發(fā)送給客戶端；同時進(jìn)行數(shù)據(jù)的整理；
- 把整理出來的數(shù)據(jù)，通過http發(fā)送給客戶端；直到客戶端數(shù)據(jù)接收完畢
3. 瀏覽器渲染階段
- 瀏覽器拿到從服務(wù)器傳輸過來的文件；
- 首先會遍歷HTML，形成DOM樹；
- 代碼從上到下解析，形成css樹；
- DOM樹和css樹，重新組合成render樹；
- 瀏覽器進(jìn)行描繪和渲染；
4. 框架和jquery的區(qū)別
- 框架：組件化開發(fā)、虛擬DOM；操作的不是真實的DOM；
- jquery ：操作的是真實的DOM，性能慢，比較低；
5. 三次握手；四次揮手
- 第一次握手： 客戶端發(fā)送SYN碼數(shù)據(jù)包發(fā)送給服務(wù)器，客戶端要求和服務(wù)器建立聯(lián)機；
- 第二次握手：服務(wù)端接收聯(lián)機請求，會發(fā)送ACK碼到客戶端，是要建立聯(lián)機嗎；
- 第三次握手：客戶端接收到服務(wù)端的ack碼，驗證是否正確，如果正確，則再次發(fā)送ack ,建立連接；
三次握手之后，客戶端和服務(wù)端聯(lián)機成功，可以發(fā)送數(shù)據(jù)
客戶端和服務(wù)端發(fā)送數(shù)據(jù)是雙向的；客戶端給服務(wù)端傳遞的是路徑，參數(shù)，隨機數(shù)；服務(wù)端給客戶端傳輸自己的資源，文件，數(shù)據(jù)；
- 第一次揮手，當(dāng)客戶端發(fā)送數(shù)據(jù)結(jié)束，需要發(fā)送fin告訴服務(wù)端，數(shù)據(jù)傳輸結(jié)束；
- 第二次揮手，當(dāng)服務(wù)端數(shù)據(jù)接收完畢,服務(wù)端返回給客戶端一個ACK碼，；客戶端接收到ack,就會把發(fā)送到服務(wù)端的通道進(jìn)行關(guān)閉；
- 第三次揮手，服務(wù)端數(shù)據(jù)傳輸結(jié)束之后，也會發(fā)送fin給客戶端；
- 第四次揮手，當(dāng)客戶端接收數(shù)據(jù)完畢之后，會發(fā)送給Ack給服務(wù)端，服務(wù)器可以安心關(guān)閉傳輸數(shù)據(jù)的通道；
6. uri、url、urn
- uri=url+urn
URI : 統(tǒng)一資源標(biāo)識符
URL ： 統(tǒng)一資源定位符
URN : 統(tǒng)一資源名稱
- 由什么組成？
http : 傳輸協(xié)議； 如果是http協(xié)議，網(wǎng)站可以進(jìn)行省略；
域名： image.baidu.com
端口號： 0--65535
路徑 ： 服務(wù)器的資源的文件的路徑；
? : 問號后面跟著的是參數(shù)；?tn=屬性值
? 后面常跟著一個隨機的數(shù)字； 為了防止瀏覽器的緩存，不同的隨機數(shù)，會重新進(jìn)行請求
7. 接口文檔
- 接口文檔：前后交互的文檔： 用來標(biāo)識請求的url,參數(shù)，返回的數(shù)據(jù)類型；
url:"";
type："get" "post";
參數(shù) ： username:""; password:"";
返回的數(shù)據(jù)類型： [{id:"",title:"",link:""},{},{}];
一般前端后端對項目一起進(jìn)行開發(fā)，但是前端需要一些假數(shù)據(jù)來測試一下，所以就有了模擬數(shù)據(jù)和假數(shù)據(jù)；
8. ajax的基礎(chǔ)
1. ajax : async javascript and xml;
xml:可擴(kuò)展的標(biāo)記語言；一般用于后臺來存儲數(shù)據(jù)的；
2. ajax的特點：只讓頁面的某個部分發(fā)生變化；
3. ajax的使用：
//ajax的使用
//1. 創(chuàng)建一個ajax實例
let xhr = new XMLHttpRequest();
//2. 打開一個路徑；請求數(shù)據(jù) xhr.open(get/post,url,false);
xhr.open("get",'aside1.json',true);//false 同步 true 異步；
//3. 監(jiān)聽: 當(dāng)前ajax實例的屬性readyState；當(dāng)readyState發(fā)生變化，觸發(fā)綁定的函數(shù)；
// 0 : 初始化一個ajax的實例，readyState默認(rèn)值是0；
// 1 : 當(dāng)open執(zhí)行完畢之后，readyState的值是1；
// 2 ： 客戶端已經(jīng)接收到服務(wù)器返回的響應(yīng)頭；
// 3 ： 客戶端開始接收數(shù)據(jù)，服務(wù)器在處理整理數(shù)據(jù)；
// 4 ： 客戶端已經(jīng)成功接收到所有的數(shù)據(jù)；
xhr.onreadystatechange = function () {// 當(dāng)readyState發(fā)生變化，就會觸發(fā)；
console.log(this);// 指向了ajax的實例；
console.log(xhr.readyState);// 2 3 4;
if(xhr.readyState===4&& /^2\d{2}/.test(xhr.status)){
// 說明瀏覽器已經(jīng)成功獲取到數(shù)據(jù)；
}
};
//4. 發(fā)送請求
xhr.send();
9. ajax的請求方式以及返回的狀態(tài)碼；
- ajax的請求方式；
1.
get：一般用于獲取服務(wù)器數(shù)據(jù)；
- get請求傳參數(shù)，需要把參數(shù)放在url問號的后面；
- 瀏覽器對url的長度的有要求，IE 2K；谷歌8K；如果多余的，自動截?。?/li>
- get請求安全性較低;(傳輸?shù)臄?shù)據(jù)會暴露在url的問號后面)；
- get 會有緩存；會在url 的后面拼接一個時間戳;（就是為了不走緩存）；
2.
post: 一般用于向服務(wù)器發(fā)送數(shù)據(jù)；
- post 請求把參數(shù)放在請求體中發(fā)送給服務(wù)器；
- 對于數(shù)據(jù)的大小沒有限制；
- post是比較安全；
- post 沒有緩存；
3.
put: 向服務(wù)器發(fā)送一些數(shù)據(jù);
4.
delete: 向服務(wù)器刪除數(shù)據(jù)5.
head: 只請求數(shù)據(jù)的響應(yīng)頭信息；
- 常用的狀態(tài)碼：
- 200 : 客戶端數(shù)據(jù)接收成功;
- 301 : 永久重定向；
- 302 ：臨時轉(zhuǎn)移，臨時重定向
- 304 : 讀取緩存；（瀏覽器緩存）
- 307 : 臨時轉(zhuǎn)移’；
- 401 : 沒有權(quán)限訪問該網(wǎng)站；
- 404 : 路徑錯誤；
- 500 : 服務(wù)器未知錯誤；
- 503 : 超負(fù)荷；訪問量大；
//1.
let xhr = new XMLHttpRequest();
xhr.open("get",'aside.json',true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
// 說明瀏覽器已經(jīng)成功獲取到數(shù)據(jù)；
console.log(xhr.responseText);
}
// xhr.status; 狀態(tài)碼；代表當(dāng)前請求的狀態(tài)；
// 當(dāng)創(chuàng)建好實例，status默認(rèn)狀態(tài)值是0；
// 當(dāng)請求結(jié)束之后，會根據(jù)當(dāng)前的請求狀態(tài)去改變這個屬性值；
// 常用的狀態(tài)碼
// 200 : 客戶端數(shù)據(jù)接收成功
// 301 : 永久重定向；
// 302 ：臨時轉(zhuǎn)移，臨時重定向
// 304 : 讀取緩存；（瀏覽器緩存）
// 307 : 臨時轉(zhuǎn)移
// 401 : 沒有權(quán)限訪問該網(wǎng)站；
// 404 : 路徑錯誤
// 500 : 服務(wù)器未知錯誤；
// 503 : 超負(fù)荷；訪問量大；
}
xhr.send();
10. ajax的同步異步
- js：單線程；每次執(zhí)行一個任務(wù)；
當(dāng)主任務(wù)隊列執(zhí)行完畢，再去把等待任務(wù)隊列的任務(wù)拿到主任務(wù)隊列來執(zhí)行；（微任務(wù)，宏任務(wù)；）
- 瀏覽器：多線程；可以同時進(jìn)行多個任務(wù)；
- 同步：瀏覽器必須把這個任務(wù)執(zhí)行完畢，才能繼續(xù)執(zhí)行下一個任務(wù)；
- 瀏覽器讓任務(wù)沒有執(zhí)行完，但是可以繼續(xù)執(zhí)行下一行代碼；
- 異步的有：定時器、 ajax 、promise的then 、事件行為綁定的方法、 回調(diào)函數(shù)、async await
let xhr = new XMLHttpRequest();
xhr.open("get",'aside.json',true);//同步
xhr.onreadystatechange = function () {
console.log(xhr.readyState);//如果是異步請求，會執(zhí)行三次，如果是同步請求會執(zhí)行一次；
if (xhr.readyState === 4 && /^2\d{2}/.test(xhr1.status)) {
console.log(xhr.responseText);
}
};
xhr1.send();
11. jQuery版ajax
$.ajax({
url:"aside.json",
type:"get",// 默認(rèn)是get請求
async:true,// 默認(rèn)是異步
data:{//向服務(wù)端發(fā)送的數(shù)據(jù)
username:"1833333",
password:"888888"
},
dataType:"json",// 默認(rèn)請求回來是json格式；
success:function (data) {
// 數(shù)據(jù)請求成功執(zhí)行這個回調(diào)
},
error:function(){
//數(shù)據(jù)請求不成功執(zhí)行這個回調(diào)
}
});
// url : 請求路徑
// type:請求方式
// dataType:返回的數(shù)據(jù)類型；
// async : true： 異步（默認(rèn)就是異步）;
// data: 屬性值是一個對象；里面含有了多個鍵值對；客戶端發(fā)送給服務(wù)器的參數(shù)；
// success:當(dāng)數(shù)據(jù)請求成功之后，調(diào)用success的回調(diào)函數(shù)；并且會把請求到的數(shù)據(jù)傳給這個回調(diào)函數(shù)；
// error： 當(dāng)請求失敗會執(zhí)行這個回調(diào)函數(shù)；
// cache:是否走緩存；true是走緩存，false，不走緩存；get;
1. Promise
- Promise：是瀏覽器新增的內(nèi)置API；為了處理異步操作；
- Promise：是一個同步的過程；Promise傳進(jìn)的回調(diào)函數(shù)會立即執(zhí)行；當(dāng)回調(diào)函數(shù)執(zhí)行完畢，才會執(zhí)行下面的任務(wù)；
- Promise執(zhí)行必須接收函數(shù)作為實參；
- Primise的三種狀態(tài)：pending fulfilled rejected；從pending到成功狀態(tài)、從pending到失敗狀態(tài)；如果當(dāng)前
promise狀態(tài)一旦發(fā)生改變，那當(dāng)前promise的狀態(tài)就會凝固，不會發(fā)生改變
// promise的特點
// promise 是一個內(nèi)置的類；不僅在window中存在，而且在node的global的全局對象下也存在；
// Promise 是es6新增的內(nèi)置API；在IE下是不兼容；但是上線時會把所有es6的語法轉(zhuǎn)換成es5;
/*for(var i=0;i<19;i++){
// 閉包
// 1.保護(hù)變量
// 2.儲存值
}*/
// 1.promise是同步的；傳進(jìn)一個回調(diào)函數(shù)；當(dāng)執(zhí)行promise時，會立即執(zhí)行這個回調(diào)函數(shù)；
// 2. promise 有三個狀態(tài)；
// pending 等待狀態(tài)
// fulfilled 成功態(tài)
// rejected 失敗態(tài)
// 一旦當(dāng)前狀態(tài)發(fā)生改變，當(dāng)前狀態(tài)凝固；resolve是從pending到fulfilled時觸發(fā)的；rejected是pending到rejected觸發(fā)；
// 3. resolve和reject傳參的問題；
// 4.如果在Promise的回調(diào)函數(shù)中，拋出異常；會觸發(fā)rejected中的所有函數(shù)；
// then :
// 1.在promise原型的then方法中，返回是一個實例；實現(xiàn)then的鏈?zhǔn)秸{(diào)用；
// 2. 下一個then中執(zhí)行fulfilled中方法，還是rejected 的方法；需要靠上一個then中返回的promise實例的狀態(tài)；
// 3. 如果then中方法返回一個promise實例，那么這個promise會控制下一個then中方法執(zhí)行；會把then默認(rèn)返回的promise覆蓋；
// 4. 如果then中沒有相應(yīng)的方法，那么會默認(rèn)進(jìn)行補全；
class Mypromise{
constructor(excutor){// constructor 接收到一個函數(shù)
// this --->實例；
// 當(dāng)resolve執(zhí)行時，會把當(dāng)前實例上的成功的池子中所有的方法執(zhí)行
// 給實例初始化兩個空數(shù)組；
// 初始化一個狀態(tài)，pending
this.state = "pending";
this.fulfilledEvent = [];
this.rejectedEvent = [];
this.value = undefined;
let resolve =result=>{
// 循環(huán)池子中方法，讓其挨個執(zhí)行；
// 定時器解決了then方法中函數(shù)的異步回調(diào)問題；
// 一旦當(dāng)前狀態(tài)凝固，不能再次調(diào)用resolve狀態(tài)；
if(this.state!=="pending")return;
this.state = "fulfilled";
this.value = result;
setTimeout(()=>{
this.fulfilledEvent.forEach(item=>{
if(typeof item==="function"){
item(this.value);
}
})
},0);
};
// 當(dāng)reject執(zhí)行時，會把實例上失敗的池子方法執(zhí)行；
let reject =(reason)=>{
if(this.state!=="pending")return;
this.state = "rejected";
this.value = reason;
let timer = setTimeout(()=>{
clearTimeout(timer);
this.rejectedEvent.forEach(item=>{
if(typeof item==="function"){
item(this.value);
}
});
},0)
};
// 處理promise中的異常；
try{
excutor(resolve,reject);
}catch (err){
console.log(err);
reject(err);
}
}
// then方法，把成功或失敗后的回調(diào)放進(jìn)相應(yīng)的池子中；
then(resolveFn,rejectFn){
// 如果then中，沒有傳遞相應(yīng)的方法，應(yīng)對其進(jìn)行補全；
if(resolveFn==undefined){
resolveFn = result =>{
return result;
}
}
if(rejectFn==undefined){
rejectFn = reason =>{
throw new Error('err');
//為了執(zhí)行下面的reject，在這個函數(shù)中拋出一個異常
}
}
return new Mypromise((resolve,reject)=>{// 、
//不能直接把函數(shù)放進(jìn)去，因為需要判斷當(dāng)前函數(shù)是否返回一個promise的實例；
this.fulfilledEvent.push(result=>{
// 通過函數(shù)的返回值，是否是一個promise的實例，執(zhí)行不同的方法；如果是promise實例，應(yīng)該
try{
let x = resolveFn(result);
x instanceof Mypromise?x.then(resolve,reject) : resolve(result);
}catch(err){
reject(err);
}
});
this.rejectedEvent.push(reason=>{
// 通過函數(shù)的返回值，是否是一個promise的實例，執(zhí)行不同的方法；如果是promise實例，應(yīng)該
try{
let x = rejectFn(reason);
x instanceof Mypromise?x.then(resolve,reject) : resolve(reason);
// 如果不是promise實例，執(zhí)行下一個then中resolve；
}catch(err){
reject(err)
}
});
})
}
}
new Mypromise((resolve,reject)=>{
console.log(1);
//throw new Error("你你");
reject();
}).then(function (data) {
console.log(2);
},function (data) {
//console.log(data);
console.log(3);
}).then(function () {
console.log(4);
},function(){
console.log(5);
});
console.log(6);
let p1 = new Promise(function (reslove,reject) {
// 當(dāng)Promise的回調(diào)函數(shù)中異步成功之后，執(zhí)行特定的函數(shù)；
// 當(dāng)前函數(shù)中，存放的是異步的操作任務(wù)；當(dāng)異步的操作任務(wù)成功之后，會調(diào)用then方法中的第一個函數(shù)；如果異步操作失敗，會默認(rèn)調(diào)用then的第二個函數(shù)；
// resolve: 當(dāng)異步操作成功，執(zhí)行的函數(shù);事件隊列；收集了then方法中傳進(jìn)來的第一個參數(shù)；
// reject : 當(dāng)異步操作失敗執(zhí)行的函數(shù)；事件隊列；收集了then方法中傳進(jìn)來的第二個參數(shù)；
// 如果then方法中沒有返回值，或者返回的不是一個promise的實例，那么下一個then中的函數(shù)會根據(jù)第一個異步的操作成功resolve執(zhí)行有關(guān)；如果then的成功的回調(diào)中，如果then的第一個函數(shù)返回一個promise的實例，那么下一個then的第一個參數(shù)會根據(jù)上一個then的返回promise中異步操作成功后，會進(jìn)行調(diào)用這個then的resolve；
setTimeout(function () {
reslove();
},1000);
console.log(1);
});
p1.then(function () {
console.log("下課");
return new Promise(function (resolve,reject) {//重新生成一個promise實例；下面的then會根據(jù)這的promise實例來執(zhí)行；
setTimeout(function () {
resolve();
},3000)
});
}).then(function () {
console.log(100);//他會根據(jù)上面那個promise實例里的那個定時器來執(zhí)行（所以會延時3秒之后再執(zhí)行）
},function () {
console.log(200);
});
2. Promise的應(yīng)用
1. promise：解決的是異步的回調(diào)地域；
- 如果有兩個請求，第二個請求需要在第一個請求成功之后，再進(jìn)行發(fā)送；
let p = new Promise(function (resolve,reject) {
$.ajax({
url:"aside.json",
dataType:"json",
success:function () {
resolve();
}
})
});
p.then(function () {
$.ajax({
url:"banner.json",
dataType:"json",
success:function () {
}
})
});
//把代碼封裝優(yōu)化如下
function queryFn(url) {//函數(shù)每執(zhí)行一次就會創(chuàng)建一個primise實例
return new Promise(function (resolve,reject) {
$.ajax({
url:url,
dataType:"json",
success:function () {
resolve();
}
});
});
}
queryFn("aside.json").then(function () {//如果不寫return，這個回調(diào)函數(shù)的返回值就是undefined；只有promise的實例才能調(diào)用then
return queryFn("banner.json");
}).then(function () {
queryFn("111.json")
});
// then : 可以只傳一個參數(shù)；那么這個參數(shù)是成功的回調(diào)；
3. Promise中的catch
let p1 = new Promise(function (resolve,reject) {
setTimeout(function () {
if(Math.random()>0.5){
resolve(12)
}else{
reject()
}
},1000)
});
// 一般情況下，then只放一個成功的回調(diào)函數(shù)，會把失敗的回調(diào)函數(shù)放進(jìn)catch的回調(diào)函數(shù)
p1.then(function (data) {
console.log(data);
return new Promise(function (resolve,reject) {
reject();
})
}).then(function () {
}).catch(function () {//把catch放到最后，只要有一個請求失敗，就會執(zhí)行catch；
console.log(13);
})
4. Promise.all和Promise.race
Promise.all
- Promise.all返回一個新的promise的實例；這個新的實例的狀態(tài)由數(shù)組中的promise實例來決定，當(dāng)數(shù)組中所有的promise都是成功態(tài)，新的promise就是成功態(tài)，如果有一個失敗，變成失敗態(tài)；
- 數(shù)組中的promise實例，會把成功的數(shù)據(jù)組成一個數(shù)組，傳給promise.all的then的參數(shù)；
Promise.race
- 數(shù)組中的實例誰先執(zhí)行，那么就會把誰的數(shù)據(jù)傳遞給then；
function queryFn(url) {
return new Promise(function (resolve,reject) {
$.ajax({
url:url,
dataType:"json",
success:function (data) {
resolve(data);
}
});
});
}
//1. promise.all
//當(dāng)數(shù)組中的所有實例都執(zhí)行成功，then才會執(zhí)行
Promise.all([queryFn('aside.json'),queryFn("banner.json")]).then(function (arr) {//傳參是數(shù)組形式的
console.log(arr);
}).catch(function (a) {
console.log(a);
});
//2. promise.race
//數(shù)組中的哪個實例請求的快，then輸出哪個
Promise.race([queryFn('aside.json'),queryFn("banner.json")]).then(function (arr) {
console.log(arr);
}).catch(function (a) {
console.log(a);
});
5. 異步的微任務(wù)（async）和宏任務(wù)
- 主任務(wù)隊列存儲的都是同步的任務(wù)；
- 等待任務(wù)隊列中存儲都是異步的任務(wù)；當(dāng)主任務(wù)隊列中的任務(wù)執(zhí)行完成之后，接下來會把異步任務(wù)隊列到達(dá)時間的任務(wù)拿出放到主任務(wù)隊列中進(jìn)行執(zhí)行；
在異步的任務(wù)隊列中分為
微任務(wù)和宏任務(wù)；當(dāng)同步的任務(wù)執(zhí)行完畢，先去等待的任務(wù)隊列把所有的微任務(wù)找出來，挨個執(zhí)行；當(dāng)微任務(wù)執(zhí)行完畢，再把所有的宏任務(wù)執(zhí)行；
微任務(wù)： Promise的then 、 async函數(shù)、 process.nextTick宏任務(wù)：setTimeout 、 setInterval ...async- .async這個函數(shù)默認(rèn)返回一個promise的實例；返回值可以調(diào)用then方法
- 在函數(shù)中await后面的代碼都是異步的；把后面的表達(dá)式變成一個微任務(wù)；
- async必須成對出現(xiàn)(和await一起出現(xiàn))
function fn() {
console.log(3);
};
async function sum() {
console.log(1);
await fn();
// await : 把后面的代碼變成了異步的任務(wù)；
console.log(2);
}
sum();
console.log(4);
//輸出 1 3 4 2
6. 跨預(yù)（jsonp）
- 跨預(yù)存在同源策略和非同源策略
同源：協(xié)議相同、域名相同、端口號相同
- ajax屬于同源策略，在不做任何處理的情況下，只能訪問自己服務(wù)器下的數(shù)據(jù)
- 瀏覽器屬于非同源策略，可以訪問任何服務(wù)器上的數(shù)據(jù)；
- script標(biāo)簽里的src屬性是非同源策略，發(fā)送的請求可以跨預(yù)拿到數(shù)據(jù)，
- JSONP是常見的一種跨域解決方式，實現(xiàn)非同源下的數(shù)據(jù)請求；
<script>
function fn(data){console.log(data)}//這里的data就會拿到跨預(yù)請求到的數(shù)據(jù)
</script>
<script src="http://matchweb.sports.qq.com/kbs/calendar?columnId=100000&callback=fn">//拼接一個callback屬性來接收返回的數(shù)據(jù)</script>
- jsonp的原理：
利用script標(biāo)簽的src屬性，src屬性是非同源策略，可以訪問不同服務(wù)器或端口下的數(shù)據(jù)；給這個src的路徑拼接一個callback的屬性，callback=fn;當(dāng)數(shù)據(jù)通過http傳輸給服務(wù)器；服務(wù)器會把數(shù)據(jù)放進(jìn)callback傳進(jìn)的函數(shù)的參數(shù)里；服務(wù)器把處理的數(shù)據(jù)和函數(shù)通過http傳給客戶端，當(dāng)客戶端接收到之后，讓fn進(jìn)行執(zhí)行；
fn(data);
