AJAX概念
-
AJAX 是什么发笔？
Asynchronous JavaScript and XML（異步JavaScript和XML)
-
作用
- 不重新加載整個(gè)頁面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容竿痰。
- 節(jié)省用戶操作，時(shí)間，提高用戶體驗(yàn)叹誉，減少數(shù)據(jù)請求傳輸獲取數(shù)據(jù)
-
過程：
初始化 – >發(fā)送請求 –> 服務(wù)器收到請求 –> 服務(wù)器處理 –> 返回結(jié)果
表單
- 表單form
- action 提交到哪里
- method 提交方式
- Get方式
- Get通過url地址傳輸
- 有數(shù)據(jù)量限制强霎，每個(gè)瀏覽器都不同
- 不安全
- Post方式
- Post通過瀏覽器內(nèi)部傳輸
- 數(shù)據(jù)量理論上無限
- 相對比較安全
- enctype : 提交的數(shù)據(jù)格式忿项，默認(rèn)application/x-www-form-urlencoded
- 提交方式必須與后臺的接收方式一致。
異常處理
try {}catch{}用于異常處理城舞，當(dāng)try語句里的內(nèi)容執(zhí)行出現(xiàn)
錯(cuò)誤的時(shí)候轩触，就會執(zhí)行catch里的語句。 catch里能使用
<figure class="highlight plain" style="background: rgb(246, 248, 250); margin: 8px -15px; padding: 15px; border-style: solid; border-color: rgb(221, 221, 221); border-width: 1px 0px; overflow: auto; color: rgb(36, 41, 46); line-height: 22.4px; font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
|
<pre style="margin: 0px; padding: 0px 20px 0px 0px; border: none; outline: 0px; font-weight: inherit; font-style: inherit; font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace; font-size: 0.85em; vertical-align: baseline; background: rgb(246, 248, 250); overflow: auto; color: rgb(102, 102, 102); line-height: 22.4px; text-align: right;">
1
2
3
4
5
</pre>
|
<pre style="margin: 0px; padding: 0px; border: none; outline: 0px; font-weight: inherit; font-style: inherit; font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace; font-size: 1em; vertical-align: baseline; background: rgb(246, 248, 250); overflow: auto; color: rgb(36, 41, 46); line-height: 22.4px;">
//err.message捕獲出錯(cuò)的原因家夺。
try{//此處是可能產(chǎn)生例外的語句
}catch(err){
//此處是負(fù)責(zé)例外的處理白語句
}
</pre>
|
</figure>
finally里是始終會執(zhí)行的語句
<figure class="highlight plain" style="background: rgb(246, 248, 250); margin: 8px -15px; padding: 15px; border-style: solid; border-color: rgb(221, 221, 221); border-width: 1px 0px; overflow: auto; color: rgb(36, 41, 46); line-height: 22.4px; font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
|
<pre style="margin: 0px; padding: 0px 20px 0px 0px; border: none; outline: 0px; font-weight: inherit; font-style: inherit; font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace; font-size: 0.85em; vertical-align: baseline; background: rgb(246, 248, 250); overflow: auto; color: rgb(102, 102, 102); line-height: 22.4px; text-align: right;">
1
2
3
4
5
6
7
</pre>
|
<pre style="margin: 0px; padding: 0px; border: none; outline: 0px; font-weight: inherit; font-style: inherit; font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace; font-size: 1em; vertical-align: baseline; background: rgb(246, 248, 250); overflow: auto; color: rgb(36, 41, 46); line-height: 22.4px;">
Try{
//此處是可能產(chǎn)生例外的語句
} catch (err) {
//此處是負(fù)責(zé)例外處理的語句
}finally{
//此處是出口語句脱柱，當(dāng)try，catch的
}
</pre>
|
</figure>
AJAX的方法
- Open方法 open(method,url,async)
- 三個(gè)參數(shù)的含義
1拉馋、提交方式 Form-method
2榨为、提交地址 Form-action
3、異步（同步）
- 三個(gè)參數(shù)的含義
- Send方法
發(fā)送數(shù)據(jù)請求煌茴，相當(dāng)于Form的submit - AJAX請求狀態(tài)監(jiān)控
- onreadystatechange事件
- readyState屬性：請求狀態(tài)
0 （初始化）還沒有調(diào)用open()方法
1（載入）已調(diào)用send()方法随闺，正在發(fā)送請求
2（載入完成）send()方法完成，已收到全部響應(yīng)內(nèi)容
3（解析）正在解析響應(yīng)內(nèi)容
4（完成）響應(yīng)內(nèi)容解析完成蔓腐，可以在客戶端調(diào)用了 - status屬性：服務(wù)器(請求資源)的狀態(tài)
AJAX返回?cái)?shù)據(jù)的處理
- 返回的內(nèi)容
- responseText：返回以文本形式存放的內(nèi)容
- responseXML：返回XML形式的內(nèi)容
- 返回?cái)?shù)據(jù)的處理
- 數(shù)據(jù)類型：XML矩乐、 HTML、 JSON
- Eval解析JSON的時(shí)候需要注意的地方
- JSON.parse() : 字符串解析成對象
