JavaScript學習筆記028-ajax0get0post0跨域請求

Ajax · 發表 2018-10-09 12:13:46

摘要： Author：Mr.柳上原付出不亞於任何的努力願我們所有的努力，都不會被生活辜負不忘初心，方得始終面試的時候問了點簡單的es6知識然後跟我說公司開發用的是react 回家啃了幾天的react ...

Author：Mr.柳上原

付出不亞於任何的努力
願我們所有的努力，都不會被生活辜負
不忘初心，方得始終

面試的時候問了點簡單的es6知識

然後跟我說公司開發用的是react

回家啃了幾天的react

正式上班的時候

用的是react-native

對於只學了vue和小程式框架的我來說

這種大起大落的感覺真是超級刺激

不知道自己能不能夠在公司站穩腳跟

函數語言程式設計和麵向物件程式設計

不同的兩個模式

挑戰一下自己吧

<!DOCTYPE html> <!-- 文件型別：標準html文件 -->

<html lang='en'> <!-- html根標籤 翻譯文字：英文 -->

<head> <!-- 網頁頭部 -->

<meat charset='UTF-8'/> <!-- 網頁字元編碼 -->

<meat name='Keywords' content='關鍵詞1,關鍵詞2'/>

<meat name='Description' content='網站說明'/>

<meat name='Author' content='作者'/>

<title>前端59期學員作業</title> <!-- 網頁標題 -->

<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外鏈樣式表 -->

<style type='text/css'> /*內部樣式表*/

</style>

</head>

<body> <!-- 網頁主幹：視覺化區域 -->

<script>
/*
ajax：
與後臺進行資料互動
非同步的JavaScript 和 XML
ajax通過http協議請求資料
無重新整理頁面進行資料載入

http1.0三種請求方法：
GET
POST
HEAD
http1.1:
DELETE
PUT
與後臺互動時，約定俗成的請求規範
增 POST
刪 DELETE
改 PUT
查 GET

xhr.readyState狀態碼：
0 請求未初始化
1 連線到伺服器
2 請求以被接收到
3 正在處理請求
4 請求處理完成，並響應
xhr.status（伺服器）http狀態碼：
100~ 訊息
200~ 成功
300~ 重定向
400~ 請求錯誤
500~ 伺服器錯誤
*/
// 生成ajax物件
const xhr = new XMLHttpRequest();
// 通過open方法，設定跟後臺互動的一些行為
xhr.open("GET", "http://www.xxx.cn", true); // 第一個引數為請求方式，第二個引數是url地址，第三個引數是布林值，設定是否使用非同步請求
// 按照上面設定好的方式傳送資料
xhr.send();
// 監聽資料傳送，結束行為
xhr.onload = () => {
// 判斷自身狀態碼，4代表成功
if (xhr.readyState === 4){ // xhr.readyState是xhr自身的狀態碼
// 判斷http狀態碼，2開頭的和304代表成功
if (200 <= xhr.status && xhr.status < 300 || xhr.status === 304) {
// 請求成功，拿到後臺發來的資料
xhr.responseText;
}
}
}
// 兩種方法類似，onload監聽資料傳送，onreadystatechange監聽資料傳送狀態發生變化的過程
// xhr.onreadystatechange = () => {}

/*
get：
get方式的資料傳送
查詢字串以鍵值對的方式，在get請求中的url地址中傳送
以？開頭，鍵與值之間=連線，不同鍵值對之間&連線
輸入url地址後，瀏覽器預設get方式傳送請求
*/
// 中文會被轉換成URI編碼
encodeURI("風嶼"); // 中文轉URI
decodeURI(""); // URI轉中文
// get傳送資料
user: "fengyu",
password: 123
xhr.open("GET", "http://www.xxx.cn?user=fengyu&password=123", true);

/*
post：
post方式的資料傳送
post傳送資料必須設定請求頭資訊，資料作為send的引數傳送
*/
// post傳送資料
xhr.open("POST", "http://www.xxx.cn?user=fengyu&password=123", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // post請求頭
xhr.send("user=fengyu&password=123");

/*
跨域：
預設不能進行跨域請求
請求會被瀏覽器阻止

域：
環境
不同的url地址是不同的域
相同地址下不同的埠是不同的域
實現跨域：
JSONP通過script的src
CORS在後臺程式裡設定對應的域進行訪問
代理通過信任的伺服器進行代理請求
*/

</script>

</body>

</html>

JavaScript學習筆記028-ajax0get0post0跨域請求

您可能也會喜歡…