AJAX入門以及get和post請求
阿新 • • 發佈：2022-03-08
優點:
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,安裝好後並且執行node server.js(當然還是很可能不成功,建議去看尚XX的視訊,細節太多了說不完)<!DOCTYPE html> <html lang="en">
html:
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> #result { width: 200px; height: 100px; border: solid 1px aqua; } </style> </head>
<body> <button>點擊發送請求</button> <div id="result"></div> <script> 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換成你想的)
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.1Host: kkxx.com
name1=value1&name2=value2 get: 可以快取，不夠安全， 請求有長度限制，可以前進後退，只應用於取回資料。資料型別只允許ASCII 字元。 post：不可快取，安全，請求長度沒有限制。對資料型別也沒有限制