柚子快報邀請碼778899分享：前端 AJAX、

http://yzkb.51969.com/

文章目錄

AJAX1. AJAX簡介AJAX特點

2. XML簡介3. AJAX發(fā)送get請求4. post請求設置體參數(shù)5. 設置請求頭信息6. AJAX請求服務端響應json數(shù)據(jù)7. ie緩存問題8. 請求超時問題和網(wǎng)絡異常9. 取消請求10. 請求重復取消11. jQuery中的AJAX請求12. axios函數(shù)發(fā)送AJAX使用fetch函數(shù)發(fā)送AJAX請求

跨域1. 同源策略2. 如何解決跨域：2.1 JSONPJSONP 怎么工作的？JSONP的使用

2.2 jquery完成jsonp請求案例2.3 CORSCORS怎么工作的？CORS 的使用

AJAX

1. AJAX簡介

Ajax全稱為Asynchronous Javascript And XML，即異步JS和XML AJAX不是新的編程語言，而是一種將現(xiàn)有的標準組合在一起使用的新方式

通過Ajax可以在瀏覽器中向服務器發(fā)送異步請求，最大的優(yōu)勢：無刷新獲取數(shù)據(jù)，先展示頁面，需要時獲取數(shù)據(jù)

AJAX特點

優(yōu)點： 可以無刷新頁面與服務端進行通信 允許你根據(jù)用戶事件來更新部分頁面內容 缺點： 沒有瀏覽歷史，不能回退 存在跨域問題（同源） SEO不友好（爬蟲獲取不到信息）

2. XML簡介

XML：可擴展標記語言，被設計用來傳輸和存儲數(shù)據(jù) XML和HTML類似，不同點：HTML中都是預定義標簽，XML中沒有預定義標簽，全是自定義標簽，用來表示一些數(shù)據(jù) 現(xiàn)在已被JSON取代

3. AJAX發(fā)送get請求

發(fā)送請求

4. post請求設置體參數(shù)

在send中設置

xhr.open('POST','http://127.0.0.1:3000/server');

// 3.發(fā)送

xhr.send('a=100&b=200&c=300');

xhr.send('a:100&b:200&c:300');

5. 設置請求頭信息

在open后面設置 一般把身份校驗的信息放在這里傳遞給服務器，由服務器對參數(shù)提取，校驗用戶身份

xhr.open('POST','http://127.0.0.1:3000/server');

// 設置請求頭

xhr.setRequestHeader('','');

6. AJAX請求服務端響應json數(shù)據(jù)

// 設置響應體數(shù)據(jù)類型

xhr.responseType='json';

result.innerHTML= xhr.response.name;

7. ie緩存問題

IE瀏覽器會對ajax結果緩存，下一次發(fā)送請求時會直接走本地緩存返回的不是瀏覽器的最新數(shù)據(jù)

解決：獲取當前的時間戳

xhr.open('GET','http://127.0.0.1:3000/ie?t='+Date.now());

8. 請求超時問題和網(wǎng)絡異常

const xhr=new XMLHttpRequest();

// 請求超過兩秒就取消

xhr.timeout=2000;

// 超時回調

xhr.ontimeout=function(){

alert('網(wǎng)絡異常，請稍后再試');

};

// 網(wǎng)絡異常回調

xhr.onerror=function(){

alert('您的網(wǎng)絡似乎出了些問題，請稍后再試')

};

xhr.open('GET','http://127.0.0.1:3000/delay');

xhr.send();

9. 取消請求

調用abort方法

點擊發(fā)送請求

點擊取消

10. 請求重復取消

const btn=document.querySelector('button');

let x=null;

// 標識變量，判斷是否正在發(fā)送請求

let isSending=false;

btn.onclick=function(){

// 判斷

if(isSending) x.abort();//如果正在發(fā)送請求，取消上一次

x=new XMLHttpRequest();

isSending=true;

x.open('GET','http://127.0.0.1:3000/delay');

x.send();

x.onreadystatechange=function(){

if(x.readyState===4){

isSending=false;

}

}

}

11. jQuery中的AJAX請求

$.get(url, [data], [callback], [type])

url: 請求的URL地址

data: 請求攜帶的參數(shù)

callbac: 載入成功時回調函數(shù)

type：設置返回內容格式，xml、html、script、json、text、_default

GET

POST

通用型方法ajax

12. axios函數(shù)發(fā)送AJAX

axios是ajax的工具庫

GET

POST

ajax

點擊發(fā)送請求

app.all('/jquery-jsonp',(req,res)=>{

res.setHeader('Access-Control-Allow-Origin','*')

const data={

name:'尚硅谷',

city:['北京','上海','深圳'],

};

let str=JSON.stringify(data);

let cb=req.query.callback;// jquery內置一個處理json數(shù)據(jù)的函數(shù)，在服務端調用該函數(shù)就不用再特地寫出函數(shù)名

res.end(`${cb}(${str})`);

})

2.3 CORS

推薦閱讀： http://www.ruanyifeng.com/blog/2016/04/cors.html https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

CORS (Cross-Origin Resource Sharing), 跨域資源共享。CORS 是官方的跨域解決方案，它的特點是不需要在客戶端做任何特殊的操作，完全在服務器中進行處理，支持 get 和 post 等請求。跨域資源共享標準新增了一組 HTTP 首部字段（響應頭），允許服務器聲明哪些源站通過瀏覽器有權限訪問哪些資源

CORS怎么工作的？

CORS 是通過設置一個響應頭來告訴瀏覽器，該請求允許跨域，瀏覽器收到該響應以后就會對響應放行。

CORS 的使用

主要是服務端的設置：

rounter.get(“/testAJAX”,function(req, res){

})

柚子快報邀請碼778899分享：前端 AJAX、

http://yzkb.51969.com/

參考鏈接