一、ajax基礎
- ajax概述
數(shù)據(jù)是存放在服務端的，無法通過已知的API獲取
我們希望對服務端發(fā)送請求并且接受服務端返回的響應，是否可以通過js向服務端發(fā)送請求，不再是“單機游戲”模式呢？
AJAX：使我們可以通過js直接獲取服務端最新的內容，而不必重新加載頁面，同時讓web更接近桌面應用的功能。比如 google搜索，輸入某個內容，會實時彈出相關內容，優(yōu)化了用戶體驗。
AJAX是瀏覽器提供的一套API，可以通過js調用，實現(xiàn)通過代碼控制請求和響應。
應用場景：按需獲取數(shù)據(jù)；對用戶數(shù)據(jù)檢驗；自動更新頁面內容；提升用戶體驗，無需刷新
-
ajax體驗
jq中的ajax方法：獲取指定接口的數(shù)據(jù)，在瀏覽器中查看：
$.ajax({
url: "https://jsonplaceholder.typicode.com/users",
type: "GET",
dataType: "json",
data: {"id": 1},
success: function (data) {
// 使用請求成功的數(shù)據(jù)
console.log(data);
}
})
3.原裝ajax
發(fā)送ajax請求的步驟，4步：相比于jq的ajax方法要復雜一些：
// 1.創(chuàng)建一個 XMLHttpRequest 類型的對象 --- 相當于打開了一個瀏覽器
var xhr = new XMLHttpRequest();
// 2.打開一個與網址之間的連接 --- 相當于在地址欄輸入網址，訪問json-placeholder這個服務器上的數(shù)據(jù)了
xhr.open("GET","https://jsonplaceholder.typicode.com/users");
// 3.通過連接發(fā)送一次請求 --- 相當于點擊回車或者超鏈接
xhr.send(null);
// 4.指定 xhr 狀態(tài)變化事件處理函數(shù) --- 相當于處理網頁呈現(xiàn)后的操作
xhr.onreadystatechange = function () {
// 通過判斷 xhr 的 readyState ，確定此次請求是否完成
if (this.readyState === 4) {
console.log(this.responseText)
}
}
4.XMLHttpRequest類型對象
AJAX API中的核心提供的是XMLHttpRequest類型對象，所有的ajax操作都需要用到這個對象
創(chuàng)建該對象的兼容寫法：
// 1.創(chuàng)建一個 XMLHttpRequest 類型的對象
var xhr = null;
// 兼容寫法
if (window.XMLHttpRequest) {
// 標準瀏覽器
xhr = new XMLHttpRequest();
} else {
// IE 6 瀏覽器
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
-
open（）方法開啟請求
第一種：GET 方法，獲取服務器數(shù)據(jù)，不上傳或修改數(shù)據(jù)：
xhr.open("GET","https://jsonplaceholder.typicode.com/users?id=1");第二種：POST方法，增加服務器數(shù)據(jù)，將本地json文件上傳至自己制作的服務器端口：
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); -
send（）方法發(fā)送請求GET方法和Post方法有差別，Get方法的數(shù)據(jù)體是直接在網址上修改
GET方法的send（），無參數(shù)或者參數(shù)為null：
xhr.send(null)POST方法的send（），需要先設置請求頭
xhr.setRequestHeader（）xhr.send("name=harry&age=19");send（）中的參數(shù)為數(shù)據(jù)體， Get方法的數(shù)據(jù)體在網址上修改參數(shù)則為字符串格式的 數(shù)據(jù) ，用于上傳到服務端的
-
響應狀態(tài)分析
send（）方法執(zhí)行之后有3個狀態(tài)，通過readyState 的值來反映：
headers received：
xhr.readyState==2loading:
xhr.readyState==3此時數(shù)據(jù)可能還未上傳完畢done：
xhr.readyState==4此時數(shù)據(jù)完全上傳完畢 -
同步和異步
同步： 一個人在同一時刻只能做一件事情，執(zhí)行一些需要時間的事情需要先等待
異步：可以同時做多件事情
xhr.open( ) 參數(shù)為boolern值，默認為 true，表示異步進行加載 ，不建議使用同步加載方式，為了讓其這個事件一定觸發(fā)，可以在發(fā)送請求send（）之前，先注冊readystatechange這個方法，保障同步異步都可以成功
-
響應數(shù)據(jù)格式
XML格式：一直數(shù)據(jù)描述手段，很老，現(xiàn)在不用，數(shù)據(jù)冗雜太多，不好進行操作
-
JSON格式 ，服務端采用JSON返回數(shù)據(jù)，客戶端按照JSON數(shù)據(jù)處理數(shù)據(jù)
json數(shù)據(jù)不需要存到變量中，可以新建 json文件，格式 是一個{ }，內部類似對象子面量的寫法，不過區(qū)別是屬性名必須加 “ ” ，不用；結尾
// 創(chuàng)建新的json文件中書寫`
`{`
`"name": "tom",`
`"age": 19,`
`"hobby": ["novel","sing"]`
`}
字符串里面內容是json數(shù)據(jù)也是可以的：var str = {"name": "tom","age": 80};
此時，JSON 對象的 parse 方法可以將 json 格式的字符串轉換成 對象格式：
var strObj = JSON.parse(str); console.log(strObj.name)
JSON對象中的方法 stringfy 把字面量方法創(chuàng)建的對象obj轉換為字符串：
console.log(JSON.stringify(obj));
服務端不管采用XML和JSON數(shù)據(jù) 本質上都是講數(shù)據(jù)返回客戶端
- json-server
平時我們自己也會寫一寫數(shù)據(jù)，通過Ajax獲取，所有需要再本地搭建一個臨時服務器
json-server可以使用它快速搭建一個Web服務器
網址：
搭建步驟：1.安裝 2.定制自己的db-json文件 3.再將這個數(shù)據(jù)庫部署到我們的服務器上 （打開 vscode 的終端功能，在第一行書寫json-server 然后 --watch db-json）4.最后可以根據(jù)服務器分配給我們的接口進行訪問了 我們新建的服務器就是類似 json-placeholder這種的
- json文件書寫方法
"users": [
{
"id": 1,
"name": "tom",
"age": 19,
"class": 1
},
{
"id": 2,
"name": "jerry",
"age": 18,
"class": 2
},
{
"id": 3,
"name": "lucy",
"age": 19,
"class": 1
},
{
"name": "lily",
"age": "19",
"class": "2",
"id": 4
},
{
"name": "lulu",
"age": 18,
"class": 2,
"id": 5
},
{
"name": "harry",
"age": 18,
"class": 1,
"id": 6
},
{
"name": "john",
"age": "19",
"class": "2",
"id": 7
}
],
"posts": [
{
"id": 1,
"userId": 1,
"title": "javascript",
"content": "js 是一門非常好學語言"
},
{
"id": 2,
"userId": 1,
"title": "jquery",
"content": "jq 是一門非常好學語言"
},
{
"id": 3,
"userId": 2,
"title": "html",
"content": "html 是一門非常好學語言"
},
{
"id": 4,
"userId": 3,
"title": "css",
"content": "css 是一門非常好學語言"
}
],
"comments": [
{
"id": 1,
"postId": 1,
"content": "good"
},
{
"id": 2,
"postId": 3,
"content": "better"
},
{
"id": 3,
"postId": 4,
"content": "best"
}
]
}
書寫完成后，打開vscode的終端，輸入 json-server ，和--watch自己的文件名dbs-json，打開其中一個分配的接口如uesr，點擊進入，可以通過/ 的方法查找不同的屬性，如 / 1 可以篩選id為1的user即 tom 的各個屬性，也可以繼續(xù)添加/posts，可以查找 userid為1的post
13.原生AJAX 方法
GET方法，獲取服務器數(shù)據(jù)：參數(shù)傳遞都是通過url地址中的 ？來傳遞的，無需設置請求頭，無需設置響應體，或者傳null或者可以直接不傳
xhr.send(null);
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText);
}
}
POST方法，更改增加服務器數(shù)據(jù)：需要設置請求頭（setRequestHeader）中的Contrent-Type ，傳遞的數(shù)據(jù)也就是請求體，寫在send（）方法的參數(shù)上，send參數(shù)是字符串格式的
xhr.open("POST","http://localhost:3000/users");
然后設置請求頭（setRequestHeader）
send（）中請求體的幾種情況：不同的請求體，其請求頭的寫法有不同
第一種簡單版：增加的屬性之間 用 & 符號連接
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("name=lily&age=19&class=2");
第二種：json格式 ，用模板字符串，可以換行，請求頭也變了
xhr.setRequestHeader("Content-Type","application/json");
xhr.send(`{
"name": "lulu",
"age": 18,
"class": 2
}`);
//第三種：請求頭和第二種一樣的，都是json格式，運用json.stingfly 把對象字面量格式轉換為json格式的字符串，不用模板字符串
xhr.setRequestHeader("Content-Type","application/json");
xhr.send(JSON.stringify({
"name": "harry",
"age": 18,
"class": 1
}));
//設置完成后，可以檢驗是否完成：
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText);
}
}</pre>
14.處理響應數(shù)據(jù)渲染
15.封裝AJAX庫
可以多次操作ajax，就不用一邊一邊去書寫了
必須的幾個參數(shù)：
- 參數(shù)1：{string} method 請求方法
- 參數(shù)2：{string} url 請求地址
- 參數(shù)3：{Object} params 請求參數(shù)
- 參數(shù)4：{function} done 請求完成后執(zhí)行的回調函數(shù)
16.一個完整的AJAX封裝函數(shù)如下：
// 統(tǒng)一將方法中的字母轉大寫，便于后面判斷
method = method.toUpperCase();
// 書寫 IE 6 的兼容
var xhr = window.XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject("Microsoft.XMLHTTP");
// 將對象格式的參數(shù)轉為 urlencoded的格式
var pairs = [];
for (var k in params) {
pairs.push(k + "=" + params[k]);
}
var str = pairs.join("&");
// 判斷是否是 get 方法，需要更改 url 的值
if (method === "GET") {
url += "?" + str;
}
// 創(chuàng)建打開一個連接
xhr.open(method, url);
var data = null;
// 如果是 post 方法，需要設置請求頭，還有請求體
if (method === "POST") {
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
data = str;
}
xhr.send(data);
// 執(zhí)行回調函數(shù)
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return;
// 執(zhí)行外部傳進來的回調函數(shù)即可
// 需要用到響應體
done(JSON.parse(this.responseText));
}
}
// 調用函數(shù)
ajax("GET", "http://localhost:3000/users",{"id": 1},function (data) {
console.log(data);
});
ajax("POST", "http://localhost:3000/users",{"name": "john","age": 19,"class": 2},function (data) {
console.log(data);
});
二、ajax常用庫
-
jq中的 ajax，更加方便，可以參考 w3c 的 jq 參考手冊
$.ajax({ 內容如下 ，包含多種屬性} ) 其參數(shù)是一個 配置 的對象，對象中包含多種屬性，如：
url 服務端口 ；
type 請求方法，默認為 "get" ；
dataType: "json" (如果數(shù)據(jù)是json格式的話)
data:傳遞到服務端的數(shù)據(jù)，如果是GET方法就通過URL傳遞，如果POST就通過請求體傳遞
timeout：請求超時時間
四個回調的方法：
beforeSend:請求發(fā)起時 觸發(fā)
success：請求成功時候觸發(fā)，比較常用，因為都會希望請求成功
error：請求失敗觸發(fā)
complete：請求完成后觸發(fā)（不管是否成功）
回調函數(shù)：查詢請求的狀態(tài)如何
console.log("before send");`
`},` //會先于后面輸出
`success: function (data) {`
`console.log(data); //成功后會將data轉換為對象格式輸出在控制臺
`},`
`error: function (xhr) {`
`console.log(xhr);`
`}, //如果請求的地址不對，則會顯示404，請求的data{} 為錯誤的話，只會返回空對象，不會返回錯誤
`complete: function (xhr) {`
`console.log(xhr);`
`}`
`});`
2.$.get() 方法
傳統(tǒng)的$.ajax( )實現(xiàn):
$.ajax({
url: "http://localhost:3000/comments",
type: "get",
dataType: "json",
data: {"id": 2},
success: function (data) {
console.log(data);
}
})
.get(“url” ,data{ } ,回調函數(shù) ) ，如果需要另外的參數(shù)，可以參考w3c文檔：
$.get("http://localhost:3000/comments", {"id": 1}, function (data) {
console.log(data);
})
3.$.post( )方法
傳統(tǒng)的$.ajax( )實現(xiàn):傳入新的數(shù)據(jù) data: {"postId": 2, "content": "bad"},
$.ajax({
url: "http://localhost:3000/comments",
type: "post",
dataType: "json",
data: {"postId": 2, "content": "bad"},
success: function (data) {
console.log(data);
}
})
$.post("http://localhost:3000/comments", {"postId": 3, "content": "bad"},function (data) {
console.log(data);
})
4.其他類型請求
put請求，只能由$.ajax()方法實現(xiàn)，功能是可以 更改數(shù)據(jù)，和post有些類似：
$.ajax({
url: "http://localhost:3000/comments/4",
type: "put",
dataType: "json",
data: {"content": "good", "postId": 2},
success: function (data) {
console.log(data)
}
})
// delete 請求，刪除數(shù)據(jù)，沒有data這一屬性，直接在url上選擇要刪除的數(shù)據(jù)
$.ajax({
url: "http://localhost:3000/comments/5",
type: "delete",
success: function (data) {
? console.log(data)
}
})
jQery其他的方法，也可以在jQery參考手冊進行自學，如：
// ajaxSetup() 方法，設置默認的參數(shù)
$.ajaxSetup({
url: "http://localhost:3000/users",
type: "post"
})
之后所有的ajax請求，url和type都不需要書寫了，已經通過$.ajaxSetup() 方法設置好了
5.Axios介紹：是目前應用最為廣泛的ajax庫
中文官網：axios-js.com 支持promise，后續(xù)會學到promise
Axios庫：直接用sript標簽引用
體會 get 請求
axios.get("http://localhost:3000/posts")
.then(function (response) {
? console.log(response.data)
})
.catch(function (error) {
? console.log(error)
})</pre>
6.Axios API
axios方法：配置項如下：
axios({
url: "/comments",
method: "post",
//基礎url，多個端口的公共部分，是完整url地址的前綴，此時url只用寫完整url
的后面部分
baseURL: "http://localhost:3000",
//請求頭一般默認是"application/json"
headers: {
? "Content-Type": "application/json"
},
timeout: 1000,
//傳入json格式數(shù)據(jù)
data: {
? "postId": 3,
? "content": "better"
}
//params :即將與請求一起發(fā)送的url參數(shù)，當方法類型為get 和 delete時，直接在url地址上進行獲取或者刪除的時候，可以設置這個參數(shù)
//以json格式返回，會轉換為對象格式
}).then(function (res) {
console.log(res.data)
}).catch(function (error) {
console.log(error)
})
7.axios方法的全局默認值
在axios方法之前進行配置：
axios.defaults.baseURL = "http://localhost:3000"; 配置baseurl的默認值
8.axios方法的參數(shù)，不用設置配置項，直接把url設置為第一個參數(shù)：
axios("http://localhost:3000/posts", {
params: {
? id: 1
}
})
//不用設置回調函數(shù)，then方法設置成功后的效果，參數(shù)res 是返回的響應體response
.then(function (res) {
console.log(res.data)
})
.catch(function (error) {
console.log(error)
})
攔截器
快速請求方法 get 和post delete put 增刪改查
//直接在url上修改，也可以設置params
axios.get("http://localhost:3000/users?id=2")
.then(function (res) {
? console.log(res.data)
})
//設置params
axios.get("http://localhost:3000/users",{
params: {
id: 3
}
})
// post 請求 ，添加數(shù)據(jù),數(shù)據(jù)直接作為了參數(shù)，不用寫成 date：{}格式了
axios.post("http://localhost:3000/users",{
"name": "nancy",
"age": 19,
"class": 2
})
.then(function (res) {
console.log(res.data)
})</pre>
11.onload / onprogress
xhr. onload 事件，只在 請求完成時觸發(fā)，相當于readyState=4的階段
xhr.onprogress 事件 ，只在請求時觸發(fā)，相當于readyState=3的階段
事件對象有兩個屬性：loaded 和 total
xhr.onprogress = function (e) {
console.log("progress",this.readyState)
// 在周期性請求過程中，接收到的數(shù)據(jù)的個數(shù)
console.log(e.loaded);
// 接收數(shù)據(jù)的總個數(shù)
console.log(e.total);
}
xhr.send(null);
12.response屬性和responseType
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:3000/posts");
//設置響應體的數(shù)據(jù)類型為json，就不用像之前那樣用json.stringfy("responseText")把字符串轉換為對象了
xhr.responseType = "json";
xhr.onload = function () {
console.log(this.response);
}
xhr.send(null);
三、跨域和模板引擎
-
JSONP原理
是一種借助script標簽發(fā)送跨域請求的技巧，原理是在script 標簽請求服務端的一個地址
返回一段帶有某個全局函數(shù)調用的Javascript腳本
-
jq中的jsonp
$.ajax() ,使用時將dateType設置為sonp 即可
$.ajax({
? url: "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web",
? type: "GET",
? dataType: "jsonp",
? jsonp: "cb", //這條屬性可以設置回調函數(shù)的參數(shù)名稱（必須與后臺接口的回調函數(shù)參數(shù)名保持一致）
? jsonpCallback: "abc", //jQ 自動分配的回調函數(shù)的名稱進行重命名
? data: {"wd": "ajax"},//wd 表示文字，是百度的一種要求格式，“ajax”是輸入的搜索內容
? success: function (data) {
? console.log(data)
? }
})
目的：點擊按鈕，獲取 輸入“ajax”文字后，控制臺返回的與之有關的提示語，如 ajax的跨域，ajax的同步異步等信息
什么是cors跨域：客戶端不需要做出變化，只需要服務端在被請求的時候添加一個Acess-Control-Allow-Origin的響應頭
Acess-Control-Allow-Origin的值 ：* 便是允許任意源訪問
http://foo.coom 允許指定的源訪問
3.模板引擎的作用
減少字符串拼接 ； 在模板里解析json，然后跟html內容拼接，性能也更好，可以不用進行字符串的拼接
如騰訊的 art-Template，模板引擎
常用語法 <% 與 %>符號包裹起來的語句為模板的邏輯表達式，如for循環(huán)的書寫格式
、 <% for (var i = 0 ; i < 5 ; i++) { %>
<div>這是一個模板中的 div<%= i %></div>
<!-- name 是參數(shù)二這一對象的屬性名，可以作為變量 -->
<div>這是一個模板中的 div<%= name %></div>
<% } %>
將模板內的內容添加到 box 里面:
// template() 方法可以調用模板內容
// 參數(shù)1： 調用的模板的id
// 參數(shù)2：是一個對象型的數(shù)據(jù)，數(shù)據(jù)會傳給模板，對象中的每個屬性的屬性名在模板中可以直接當變量名使用
$(".box").html(template("tem", {name: "tom"}));
四、Git操作
1.git是分布式代碼管理
git安裝和初始化 官網 https://www.git-scm.com
git配置：用戶信息配置 輸入： $git config --golbal user.name " 自己的名字"
用戶郵箱信息配置 ： $git config --global user.emal " 自己的郵箱地址"
2.工作區(qū)：自己寫html css js 工作文件的地方，文件傳到暫存區(qū)暫存
暫存區(qū)： 在內存暫時存儲
版本庫： 覺得暫存區(qū)的內容沒有問題，可以存到版本庫，真正存放本地內容的地方
3.初始化
托管文件夾：創(chuàng)建一個空白文件夾，右鍵打開 git bash ，輸入自己的命令：
輸入 $git init 回車后就初始化成功了
4.提交到本地倉庫
第一步：把文件提交到暫存區(qū)：
git add./ 文件的url 提交某個文件
git add ./ 提交所有文件
第二步：git commit -m “提交的注釋信息” 提交到版本庫， 每次修改文件之后再次提交都需要這兩部
狀態(tài)查看 ：git status查看你上次提交之后是否對文件發(fā)生過修改
如果自己改了文件，沒有再次書寫 git add .，書寫 git status可以進行查看
5.提交日志
git log --oneline 可以直接查看自己添加的注釋信息
6.回退版本
git reset Head~ i 回退到上i個版本，會保留歷史記錄
git reset --hard Head~i 強制退回到上i個版本，刪除后續(xù)的歷史記錄，盡量不用
git reflog
7.分支 合并 和沖突處理 （git的精髓所在）
執(zhí)行 git init的時候，默認git 會為自己創(chuàng)建一個master 分支
master 分支是我們存儲的主分支 ，我們需要創(chuàng)建臨時分支，后期測試
沒有問題，才能將測試分支合并到主分支，工作時每個人會有臨時分支進行分配
實際工作時是不允許在主分支直接修改的
創(chuàng)建分支命令 ：
git branch （分支名） 如 git branch dev 添加了一個dev的分支
git checkout(分支名) 如 ：git checkout dev 切換到dev這一個分支，也可以切換到主分支
將沒有問題的臨時分支 如 dev 合并到主分支：
首先先切換到主分支 git checkout master
然后合并git merge dev
沖突和如何解決沖突
如果這時修改了文件，相當于主分支修改了，然后提交，切換到dev分支，在dev分支 再
次修改文件，提交，這個時候就有了沖突，需要再工作區(qū)進行手動更改，選擇哪條分支由領導再次
決定，也可以選擇兩條都保留，沖突解決后，只是工作區(qū)有了更改，需要再次提交add 和commit
Github :
就是把版本庫的本地文件傳到Github進行托管
自己先注冊， 首先點擊右上角 + 號，新建一個倉庫，然后獲取自己倉庫的鏈接url
git clone origin 可以直接從遠端倉庫克隆島本地；
連接遠端倉庫 git remote add origin + 倉庫的url
git push origin master 推送到指定的master分支
在第一次推送時會提示你輸入賬號密碼，然后根據(jù)提示操作即可
刷新自己的遠端倉庫，可以看到已經傳輸成功的文件
如果想要推送 dev 分支
先切換到 dev 分支，還是使用push 命令
推送完成后：
使用 git pull origin master 、可以將選段倉庫的內容下拉到本地，每次push值前，記得
進行一次pull
克?。盒陆ㄒ粋€文件，右鍵打開 git bash ，先初始化
連接遠端倉庫：git remote add origin + 倉庫的url
克?。?code>git clone +倉庫的url
在本地倉庫存在的情況下，可以將遠端倉庫的內容下拉到本地：
git pull origin master這樣可以將本地倉庫和遠端倉庫最新分支版本進行合并
VScode 可視化操作
左側第三個圖標 ，點擊+號把指定的文件傳到暫存區(qū)，點擊上方的√ 傳到 版本庫，可以在下方的文本框輸入 注釋 下方的云端 小圖標，可以直接幫助我們進行push 和 pull 的操作
在三個點，可以有更多操作 ，如克隆 創(chuàng)建分支 更改分支等功能
