（一）同步和异步
xhr.open()方法第三个参数要求传入的是一个 布尔值，其作用就是设置此次请求是否采用异步方式执行，默认为 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')
//输出结果：
//before ajax
//after ajax
//request done
如果采用同步方式执行，则代码会卡死在 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')
//输出结果：
//before ajax
//request done
//1558437144572
//after ajax
（二）XMLHttpRequest API
1.属性
-
readyStatexhr的状态 4 响应体（服务器返回的数据）接收完毕 -
status获取状态码 -
responseText获取响应体，文本格式 -
responseXML获取响应体，xml格式 -
onreadystatechange事件，当xhr.readyState属性发生改变触发 -
onload事件，响应接收完毕
2.方法
-
open(method, url, async)设置请求的方式，请求的路径， 同步/异步 -
send(requsetBody)发送请求(体) -
setRequestHeader(key, value)设置请求头 -
getResponseHeader(key)获取响应头
（三）响应数据格式
1.JSON
JSON的本质是字符串。
- JSON 中属性名称必须用双引号包裹
- JSON 中表述字符串（值）必须使用双引号
- JSON 中不能有单行或多行注释
- JSON 没有
undefined这个值 - 一个完整的JSON，不能有其他内容掺杂
数据类型：null，number，boolean，string，object，array
2.数据转换
JSON转JS：JS = JSON.parse(JSON)
JS转JSON：JSON = JSON.stringify(JS);
代码举栗：
// JS数据和JSON数据相互转换
// 先定义一些JS数据
var js_b = true;
var js_o = {name: 'zs', age: 20, sex: 'M'};
var js_a = ['red', 'green', 'blue'];
console.log(js_b);
console.log(js_o);
console.log(js_a);
// 1. JS数据转换成JSON格式
var json_b = JSON.stringify(js_b);
var json_o = JSON.stringify(js_o);
var json_a = JSON.stringify(js_a);
console.log(json_b);
console.log(json_o);
console.log(json_a);
// 2. 把JSON数据转换成JS数据
console.log(JSON.parse(json_b));
console.log(JSON.parse(json_o));
console.log(JSON.parse(json_a));
（四）模版引擎
数据结构简单的时候可以使用模版引擎。实际上就是一个API。
- artTemplate：https://aui.github.io/art-template/
使用步骤：
- 准备一个存放数据的盒子（不是必须的，使用body也可以）
- 引入template-web.js文件
- 定义模板（具体语法可以去官网查看），一定要指定script的id和type属性
- 调用template函数，为模板分配数据，template函数有两个参数一个返回值
1）参数1：模板的id
2）参数2：分配的数据，必须是一个JS对象的形式
3）一个返回值：是数据和模板标签组合好的结果 - 将 “拼接” 好的结果放到准备好的盒子中（不是必须的，console出来也可以看结果）
定义模板时的script标签一定好指定id和type
tempalte函数语法：var html = template(模板id, Object);
代码举栗：
<!-- 1. 定义一个模板，要指定script的id和type属性 -->
<script id="moban" type="text/html">
<h1>{{title}}</h1>
<ul>
<li>
<p>{{chenghu}}</p>
<p>{{liuyan}}</p>
</li>
</ul>
</script>
<script src="./assets/template-web.js"></script>
<script>
// 调用template函数
// 两个参数，一个返回值
// 参数1：模板的id
// 参数2：要显示的数据，必须是JS对象的形式
// 返回值：数据和模板拼接好的结果
var html = template('moban', {
title: '留言板123',
chenghu: '张三',
liuyan: 'hahahahahaha哈哈哈'
});
console.log(html);
document.body.innerHTML = html;
</script>
留言板案例
html代码：
<body>
<div class="area">
<img src="img/tip.png">
<input type="text" id="userName" placeholder="输入用户名...">
<span id="msg"> </span>
<textarea maxlength="200" placeholder="说点儿什么叭。。。"></textarea>
<p>
<span>字数：</span>
<span id="words">0</span>/
<span>200</span>
<button class="sub">发布</button>
</p>
</div>
<ul>
<!--
<li>
<div class='topDiv'>
<img src="" alt="">
<span>用户名</span>
<p>时间</p>
</div>
<div class='bottomDiv'>内容</div>
</li>
-->
</ul>
<div class="top">⬆️<br>回到顶部</div>
<script src="lib/jquery-1.12.4.js"></script>
<script src="js/index.js"></script>
<script id="model" type="text/html">
<li>
<div class='topDiv'>
<img src="img/03.png">
<span>{{name}}</span>
<p>发布于：{{time}}</p>
</div>
<div class='bottomDiv'>{{content}}</div>
</li>
</script>
<script src='js/template-web.js'></script>
</body>
index.js代码：
var userText = document.querySelector('textarea');
var name;
var content;
var isOk = 0;
userText.oninput = function () {
$('#words').text(this.value.length);
content = userText.value;
}
document.getElementById('userName').onblur = function () {
var xhr = new XMLHttpRequest();
name = this.value;
xhr.open('POST', '/checkUser');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('username=' + name);
xhr.onload = function () {
var result = this.responseText;
// console.log(result);
if (result === 'true') {
document.getElementById('msg').innerText = '啊呀这个名字被用过啦！';
$('#msg').css('color', 'red');
isOk = 0;
}
else if (result === 'false') {
document.getElementById('msg').innerText = 'congratulations! 这个名字可以用！';
$('#msg').css('color', 'green');
isOk = 1;
}
if (name === '') {
document.getElementById('msg').innerText = '让我知道我喜欢的你叫什么名字好嘛～';
$('#msg').css('color', 'gold');
}
}
}
function resetAll() {
document.getElementById('userName').value = '';
userText.value = '';
$('#words').text('0');
document.getElementById('msg').innerText = ' ';
name = '';
content = '';
}
// var oldLi = $('ul').children[0];
// var newLi = $('ul').children('li');
$('.sub').click(function () {
var xhrClick = new XMLHttpRequest();
var lisHtml = template('model', {
name: name,
time: new Date().toLocaleString(),
content: content,
});
if (name == '' || content == '') {
resetAll();
alert('难道你就这么不愿意留言说爱我吗！');
}
else {
if (isOk) {
xhrClick.open('POST', '/addMsg');
xhrClick.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhrClick.send('name' + name + '&content' + content);
xhrClick.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.responseText) {
$('ul').append(lisHtml);
// $('ul').insertBefore(newLi,oldLi);
}
}
}
}
else {
alert('换个名字试试叭！');
}
}
resetAll();
})
var liTop = $('ul').offset().top;
console.log(liTop);
$(window).scroll(function() {
if($(window).scrollTop() >= liTop) {
$('.top').css('display','block');
}
else {
$('.top').css('display','none');
}
})
$('.top').click(function() {
$('html,body').animate({scrollTop:0},'linear');
})
网友评论