AJAX入門以及get和post請求

優點:

1在不刷新的情況下,與服務端進行通信; **突出優勢**

2允許根據用戶事件來更新部分頁面

缺點:

1沒有瀏覽歷史不能回退;

2存在跨域問題(同源),即從a.com向b.com 發送請求是不可以的

3.SEO不友好 (Search Engine Optimization) 搜索引擎優化

同源: 協議,端口號,域名,必須完全相同

違背同源策略就是跨域.

跨域解決方案:

1JSONP (只支持get請求)

利用script標簽來實現跨域, link img iframe 等

2.CORS(官方推出) 完全在服務端處理

請求報文和響應報文的格式: 行頭空行體

Access-Control-Allow-Origin 響應頭指定了該響應的資源是否被允許與給定的origin共享。

語法:

 Access-Control-Allow-Origin: *  //允許所有資源都可以訪問您的資源
 Access-Control-Allow-Origin: <origin>

如需允許特定域名如(https://developer.mozilla.org)訪問您的資源，您可以設置：

Access-Control-Allow-Origin: https://developer.mozilla.org


案例1: get()方法 

在啟動前:(已經安裝了node.js,它包括了npm)

需要用npm安裝express,即在終端中執行命令：npm install express 。
安裝好后并且執行node server.js(當然還是很可能不成功,建議去看尚XX的視頻,細節太多了說不完)
html:

<!DOCTYPE html>

<head>

<style>

#result {

width: 200px;

height: 100px;

border: solid 1px aqua;

}

</style>

</head>

<body>

<button>點擊發送請求</button>

var result = document.querySelector('#result')

var btn = document.querySelector('button')

btn.onclick = function () {

//創建對象

const xhr = new XMLHttpRequest();

//初始化

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

//發送

xhr.send();

//

//readystate是 xhr對象中的屬性,表示狀態:

// 0被初始化 1open調用完畢 2send方法調用完畢 3服務端返回的部分的結果 4服務端返回的所有結果

//change 可以觸發4次

xhr.onreadystatechange = function () {

//判斷 (服務端返回了所有的結果)

if (xhr.readyState === 4) {

//判斷響應狀態碼 200 404 401 500 302(一直沒法請求,在重新讀緩存)

//2XX 都是成功,具體的200-300都是成功

if (xhr.status >= 200 && xhr.status < 300) {

//處理結果行頭空行體

//1.響應行

console.log(xhr.status); //狀態碼

console.log(xhr.statusText);//狀態字符串

console.log(xhr.getAllResponseHeaders());//所有響應頭

console.log(xhr.response); //響應體

//設置 reslut的文本

result.innerHTML = xhr.response; //點擊即可出現 hello GET

} else {

}

</script>

</body>

</html>

server.js:(文件名最好是這個,不然要去調代碼,把server換成你想的)

//1.引入express

const express = require('express');

//2. 創建應用對象

const app = express();

//3.創建路由規則

app.get('/server', (request, response) => {

//設置響應頭為了設置允許跨域

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

//設置響應體

response.send('hello GET ');

});

//4.監聽端口啟動服務

app.listen(8000, () => {

console.log('服務已經啟動, 8000 端口監聽中....')

})

get和post請求的對比：

get——從指定的資源請求數據；

post——向指定的資源提交要被處理的數據。

查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的：

/test/demo_form.php?name1=value1&name2=value2

查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的：

POST /test/demo_form.php HTTP/1.1
Host: kkxx.com
name1=value1&name2=value2

get: 可以緩存，不夠安全，請求有長度限制，可以前進后退，只應用于取回數據。數據類型只允許ASCII 字符。

post：不可緩存，安全，請求長度沒有限制。對數據類型也沒有限制

posted @ 2022-03-08 13:06 我的貓在哪里閱讀(100) 評論(0) 收藏舉報

刷新頁面返回頂部

我的貓在哪里

AJAX入門以及get和post請求

公告