柚子快報邀請碼778899分享：AJAX學(xué)習(xí)筆記上（學(xué)習(xí)自用）

http://yzkb.51969.com/

AJAX

原生AJAX

1.1AJAX簡介

AJAX全程為Asynchronous JavaScript And XML，就是異步的JS和XML。通過AJAX可以在瀏覽器中向服務(wù)器發(fā)送異步請求，最大的優(yōu)勢：無刷新獲取數(shù)據(jù)。AJAX不是新的編程語言，而是一種將現(xiàn)有的標(biāo)準(zhǔn)組合在一起使用的新方式。

1.2XML簡介

XML可擴(kuò)展標(biāo)記語言。 XML被設(shè)計(jì)用來傳輸和存儲數(shù)據(jù)。 XML和HTML類似，不同的是HTML中都是預(yù)定義標(biāo)簽，而XML中沒有預(yù)定義標(biāo)簽，全都是自定義標(biāo)簽，用來標(biāo)傲世一些數(shù)據(jù)。

John

18

現(xiàn)在已經(jīng)被JSON取代了。

{"name":"John","age":18}

1.3AJAX的特點(diǎn)

1.3.1AJAX的優(yōu)點(diǎn)

1）可以無需刷新頁面而與服務(wù)端進(jìn)行通信 2）允許你根據(jù)用戶事件來更新部分頁面內(nèi)容

1.3.2AJAX的缺點(diǎn)

1）沒有瀏覽歷史，不能回退 2）存在跨域問題（同源） 3）SEO不友好（網(wǎng)頁內(nèi)容無法爬蟲）

1.4HTTP

HTTP（hypertext transport protocol)協(xié)議【超文本傳輸協(xié)議】，協(xié)議詳細(xì)規(guī)定了瀏覽器和萬維網(wǎng)服務(wù)器之間互相通信的規(guī)則。

1.4.1請求報文

重點(diǎn)是格式和參數(shù)

行 GET /s?ie=utf-8 HTTP/1.1

頭 Host: atguigu.com

Cookie: name=guigu

Content-type: application/x-www-form-urlencoded

user-Agent: chrome 83

空行

體 username=admin&password=admin

1.4.2響應(yīng)報文

行 HTTP/1.1 200 OK

頭 Content-Type: text/html;charset=utf-8

Content-length: 2048

Content-encoding: gzip

空行

體

HHHHello

注：

發(fā)送GET請求：在頁面檢查里面打開網(wǎng)絡(luò)，刷新頁面，發(fā)出請求、接收響應(yīng)，打開最上面的請求，Header中有Response Headers和Request Headers，還有Query String Parameters。Query String Parameters中是對請求的url中的內(nèi)容做的解析結(jié)果，Request Headers中是請求行和請求頭的位置，Response Headers是響應(yīng)行和響應(yīng)頭，點(diǎn)擊Response是響應(yīng)體。

發(fā)送POST請求：Headers中的Query String Parameters，會變成其他的。

xhr是XMLHttpRequest的首字母，在網(wǎng)頁檢查的網(wǎng)絡(luò)中的XHR是對AJAX請求的篩選。

AJAX發(fā)送GET請求在url中攜帶參數(shù)，先用問號分割，然后直接寫，用&連接

http:127.0.0.1:8080/server?a=100&b=200&c=300

AJAX發(fā)送GET請求在xhr.send()中攜帶參數(shù)

//3.發(fā)送

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

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

xhr.send('1231212313');

AJAX發(fā)送GET請求

點(diǎn)擊發(fā)送請求

AJAX發(fā)送POST請求

對應(yīng)的后端server.js

const express=require('express')

//創(chuàng)建應(yīng)用對象

const app=express()

//創(chuàng)建路由規(guī)則

//req是對請求報文的封裝

//res是對響應(yīng)報文的封裝

app.get('/server',(req,res)=>{

//設(shè)置響應(yīng)頭,設(shè)置允許跨域

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

//設(shè)置響應(yīng)體

res.send('ok');

})

app.post('/server',(req,res)=>{

//設(shè)置響應(yīng)頭,設(shè)置允許跨域

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

//設(shè)置響應(yīng)體

res.send('okkkk');

})

//監(jiān)聽端口啟動服務(wù)

app.listen(8000,()=>{

console.log("服務(wù)已經(jīng)啟動，8000端口啟動中。。。")

})

自定義請求頭

//自定義請求頭，需要在后端設(shè)置好，否則會報錯

xhr.setRequestHeader('name','hhhhhh')

對應(yīng)的后端設(shè)置

//可以接收任意類型的請求

app.all('/server',(req,res)=>{

//設(shè)置響應(yīng)頭,設(shè)置允許跨域

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

//響應(yīng)體

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

//設(shè)置響應(yīng)體

res.send('okkkk');

})

首先res.setHeader(‘Access-Control-Allow-Headers’,‘*’);設(shè)置接收所有響應(yīng)頭，接著app.all，表示接收任意類型的請求，因?yàn)闀骰豲ptions類型的請求，無法得到回應(yīng)，所以改成all接收。

服務(wù)端響應(yīng)JSON數(shù)據(jù)

app.all('/json-server',(req,res)=>{

//設(shè)置響應(yīng)頭,設(shè)置允許跨域

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

//響應(yīng)頭

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

//響應(yīng)一個數(shù)據(jù)

const data={

name:'hoshi'

};

//對對象進(jìn)行字符串轉(zhuǎn)換

let str=JSON.stringify(data);

//設(shè)置響應(yīng)體

res.send(str)

})

響應(yīng)體中只能是字符串或buffer，所以要轉(zhuǎn)換類型。 客戶端接收到的是字符串，可以轉(zhuǎn)換為JSON對象，有兩種方式，一種是自動轉(zhuǎn)換，一種是手動轉(zhuǎn)換。 手動轉(zhuǎn)換：

const data=JSON.parse(xhr.response)

result.innerHTML=data.name;

自動轉(zhuǎn)換：

//設(shè)置響應(yīng)體數(shù)的類型

xhr.responseType='json';

result.innerHTML=xhr.response.name;

柚子快報邀請碼778899分享：AJAX學(xué)習(xí)筆記上（學(xué)習(xí)自用）

http://yzkb.51969.com/

精彩鏈接