## :-: 原生 Ajax請求
```
// Ajax
function Ajax(url, type, data, callback) {
var xhr = null;
// 兼容IE瀏覽器、
if (window.XMLHttpRequest) {
// 主流瀏覽器方法、Google Opera
xhr = new XMLHttpRequest();
} else {
// IE方法
xhr = new ActiveXObject('Microsoft.XMLHttp')
}
// 給xhr綁定狀態事件、onreadystatechange
xhr.onreadystatechange = function() {
// 請求過程中的進度 1 2 3 4 (4為完成)
console.log(xhr.readyState);
if (xhr.readyState == 4) {
// 返回的狀態嗎 200 302 404 503
if (xhr.status == 200) {
console.log(xhr.responseText);
typeof callback === 'function' && callback(xhr.responseText);
}
}
}
// 判斷請求類型
if (type == 'POST') {
// 當post類型時需要在 .send 中傳遞數據、
xhr.send(data);
// 設置請求協議頭、(默認類型)
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// 1.請求類型 2.url true 是否異步加載、
xhr.open(type, url, true);
} else {
// 1.請求類型 2.url true 是否異步加載、
xhr.open(type, url + '?' + data, true);
}
}
// 回調函數、
function callback(data) {
console.log(data);
}
```
## :-: 筆記
```
1. ajax XMLHTTPRequest
2. 網絡的基礎知識
(1) 同源策略 (協議 , 域名 , 端口號三者均相同 ---》 同源)
瀏覽器提出的 瀏覽器再判斷同源的時候是在數據返回的時候判斷的
Access-Control-Allow-Origin: * ===> CORS跨域
(2) 請求方式 GET POST HEAD PUT DELETE
(3) 狀態碼 2xx ===> 服務器成功返回數據 3xx 重定向
4xx 客戶端錯誤 400 查看請求參數 大小寫 數據格式等
5xx 服務器錯誤 找服務器端工作人員
(4) HTTP 和 HTTPS 區別 ---》 安全性 RSA
(5) 跨域
客戶端與服務器端的跨域
1. JSONP 原理 : src屬性不受同源策略的限制 適合所有瀏覽器的 大多使用get請求方式 jquery提出
搜索功能經常用到jsonp
2. document.domain 基礎域名相同
3. 服務器代理中轉 ===》 最常見的方式 公司里面最常用
4. CORS 跨域 服務器端設置響應頭 w3c新標準里面出現的 IE10之前不兼容
------------------
6. iframe ---》 頁面與頁面之間的
父頁面請求子頁面的方式: window.name 需要中間層
子頁面請求父頁面的方式: location.hash
postMessage ====> h5新增的
第一個參數 是傳遞的數據 第二個參數是往哪個頁面傳遞數據 哪個頁面的域
```
> ## :-: [HTTP 狀態消息 - 狀態碼](http://www.w3school.com.cn/tags/html_ref_httpmessages.asp)
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request