一.同步与异步
xhr.open() 方法第三个参数要求传入的是一个 bool 值，其作用就是设置此次请求是否采用异步方式执行，默认为 true，如果需要同步执行可以通过传递 false 实现：
异步
console.log('before ajax')
var xhr = new XMLHttpRequest()
// 默认第三个参数为 true 意味着采用异步方式执行
xhr.open('GET', '/time', true)
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 这里的代码最后执行
console.log('request done')
}
}
console.log('after ajax')
同步
如果采用同步方式执行，则代码会卡死在 xhr.send() 这一步：
console.log('before ajax')
var xhr = new XMLHttpRequest()
// 同步方式
xhr.open('GET', '/time', false)
// // 同步方式 执行需要 先注册事件再调用 send，否则 readystatechange 无法触发
// xhr.onreadystatechange = function () {
// if (this.readyState === 4) {
// // 会按代码执行顺序执行这行代码
// console.log('request done')
// }
// }
xhr.send(null)
// 因为 send 方法执行完成 响应已经下载完成
console.log(xhr.responseText)
console.log('after ajax')
兼容方案
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
// xhr 的成员相同
二.响应数据格式
JSON
注意：
1.JSON 中属性名称必须用双引号包裹
2.JSON 中表述字符串必须使用双引号
3.JSON 中不能有单行或多行注释
4.JSON 没有 undefined 这个值
5.一个完整的JSON，不能有其他内容掺杂
JSON 数据转换
JSON 格式转JS数据
JS = JSON.parse(JSON)
代码：var js_o = JSON.parse(json_o);
JS数据转JSON
JSON = JSON.stringify(JS);
代码：var json_a = JSON.stringify(js_a);
js数据转为 json数据等号前为json 使用stringify转
json数据转为js数据等号前为js 使用parse转
XML
XML: eXtension 标记语言
一种数据描述手段
淘汰原因：数据冗余太多
留言板案例
一.
<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>
