一.同步與異步
xhr.open() 方法第三個參數(shù)要求傳入的是一個 bool 值，其作用就是設(shè)置此次請求是否采用異步方式執(zhí)行，默認為 true，如果需要同步執(zhí)行可以通過傳遞 false 實現(xiàn)：
異步
console.log('before ajax')
var xhr = new XMLHttpRequest()
// 默認第三個參數(shù)為 true 意味著采用異步方式執(zhí)行
xhr.open('GET', '/time', true)
xhr.send(null)
xhr.onreadystatechange = function () {
? if (this.readyState === 4) {
? ? // 這里的代碼最后執(zhí)行
? ? console.log('request done')
? }
}
console.log('after ajax')
同步
如果采用同步方式執(zhí)行，則代碼會卡死在 xhr.send() 這一步：
console.log('before ajax')
var xhr = new XMLHttpRequest()
// 同步方式
xhr.open('GET', '/time', false)
// // 同步方式 執(zhí)行需要 先注冊事件再調(diào)用 send，否則 readystatechange 無法觸發(fā)
// xhr.onreadystatechange = function () {
//? if (this.readyState === 4) {
//? ? // 會按代碼執(zhí)行順序執(zhí)行這行代碼
//? ? console.log('request done')
//? }
// }
xhr.send(null)
// 因為 send 方法執(zhí)行完成 響應(yīng)已經(jīng)下載完成
console.log(xhr.responseText)
console.log('after ajax')
兼容方案
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
// xhr 的成員相同
二.響應(yīng)數(shù)據(jù)格式
JSON
注意：
1.JSON 中屬性名稱必須用雙引號包裹
2.JSON 中表述字符串必須使用雙引號
3.JSON 中不能有單行或多行注釋
4.JSON 沒有 undefined 這個值
5.一個完整的JSON，不能有其他內(nèi)容摻雜
JSON 數(shù)據(jù)轉(zhuǎn)換
????JSON 格式轉(zhuǎn)JS數(shù)據(jù)
????????JS = JSON.parse(JSON)
? ? ? ? 代碼：var js_o = JSON.parse(json_o);
????JS數(shù)據(jù)轉(zhuǎn)JSON
????????JSON = JSON.stringify(JS);
? ? ? ? ?代碼：var json_a = JSON.stringify(js_a);
????????js數(shù)據(jù)轉(zhuǎn)為?json數(shù)據(jù)等號前為json?使用stringify轉(zhuǎn)
????????json數(shù)據(jù)轉(zhuǎn)為js數(shù)據(jù)等號前為js?使用parse轉(zhuǎn)
XML
XML: eXtension 標記語言
一種數(shù)據(jù)描述手段
淘汰原因：數(shù)據(jù)冗余太多
留言板案例
一.
<div class="container">
? ? ? ? <h1 class="display-1">留言板</h1>
? ? ? ? <hr>
? ? ? ? <ul id="messages" class="list-unstyled">
? ? ? ? ? ? <!-- 這里放留言列表 -->
? ? ? ? </ul>
? ? ? ? <hr>
? ? ? ? <form>
? ? ? ? ? ? <div class="form-group">
? ? ? ? ? ? ? ? <label for="txt_name">稱呼：</label>
? ? ? ? ? ? ? ? <input class="form-control" id="txt_name" type="text">
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="form-group">
? ? ? ? ? ? ? ? <label for="txt_content">留言：</label>
? ? ? ? ? ? ? ? <textarea class="form-control" id="txt_content" cols="80" rows="10"></textarea>
? ? ? ? ? ? </div>
? ? ? ? ? ? <button type="button" id="btn_send" class="btn btn-primary">提交</button>
? ? ? ? </form>
二.
<script src="assets/template-web.js"></script>
? ? <script>
? ? ? ? var xhr = new XMLHttpRequest();
? ? ? ? xhr.open('GET','/getMsg');
? ? ? ? xhr.send();
? ? ? ? xhr.onload? = function(){
? ? ? ? ? ? var result = this.responseText;;
? ? ? ? ? ? var data = JSON.parse(result);
? ? ? ? ? ? var str = '';
? ? ? ? ? ? for(var i in data){
? ? ? ? ? ? ? ? str +=`<li class="media">
? ? ? ? ? ? ? ? ? ? ? ? <img class="mr-3" src="./assets/avatar.png" alt="張三">
? ? ? ? ? ? ? ? ? ? ? ? <div class="media-body">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <h4>${data[i].name}</h4>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>${data[i].content}</p>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? </li>`
? ? ? ? ? ? }
? ? ? ? ? ? document.getElementById('messages').innerHTML = str;
? ? ? ? }
? ? </script>
三.
<script>
? ? ? ? document.getElementById('btn_send').onclick = function (e) {
? ? ? ? ? ? var chenghu = document.getElementById('txt_name');
? ? ? ? ? ? var liuyan = document.getElementById('txt_content');
? ? ? ? ? ? xhr.open('POST', '/addMsg');
? ? ? ? ? ? xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
? ? ? ? ? ? xhr.send('name=' + chenghu.value + '&content=' + liuyan.value);
? ? ? ? ? ? xhr.onload = function () {
? ? ? ? ? ? ? ? if (this.responseText === 'true') {
? ? ? ? ? ? ? ? ? ? loadData();
? ? ? ? ? ? ? ? ? ? chenghu.value = '';
? ? ? ? ? ? ? ? ? ? liuyan.value = '';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
