关于Ajax
Ajax是对Asynchronous Javascript +XML的简写，它的诞生使得向服务器请求额外的数据而不用刷新页面。它的优缺点如下：
优点：
- 更新页面，页面无需刷新，用户的体验非常好。
- 使用异步方式与服务器通信，具有更加迅速的响应能力。
- 基于标准化的并被广泛支持的技术，不需要下载插件。
缺点：
- 浏览器历史记录的遗失： 在使用AJAX对页面进行改变后，由于并没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退。
- AJAX的安全问题： AJAX的出现就像建立起了一直通服务器的另一条通道，容易遭受到一些攻击。
Ajax实践
这里我使用server-mockd建立本地服务器用来做这次Ajax的实践server-mockd的使用我就不讲解了
例如有个文件夹test通过server-mockd在该文件夹建立本地服务器
文件夹有两个文件index.html 和router.js
index.html就是我们的前端部分利用Ajax发送请求
router.js则是我们模拟的后端用来接收请求并且返回数据
接下来看两个文件的源码（详细内容源码有注释）
index.html 代码如下
<div class="query-area">
<input type="text" name="username">
<button>查询</button>
</div>
<div class="detail-area">
<ul></ul>
</div>
<script>
var btn = document.querySelector('.query-area button')
var input = document.querySelector('.query-area input')
var detailCt = document.querySelector('.detail-area ul')
btn.addEventListener('click', function(){
//创建一个XMLHttpRequest对象（XMLHttpRequest对象用于在后台与服务器交换数据）
var xhr = new XMLHttpRequest()
//onreadystatechange事件，每当 readyState 属性改变时，就会调用该事件。
//readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
//0: 请求未初始化
//1: 服务器连接已建立
//2: 请求已接收
//3: 请求处理中
//4: 请求已完成，且响应已就绪
//下面这个事件就是个普通事件可以监听上面声明的xhr里面数据变化
//这里可以用onload但是onload只能捕捉到最后数据加载完成哪一步
xhr.onreadystatechange = function(){
//判断是否有获取到数据
//xhr.readyState == 4表示已经完成readyState第4步(4: 请求已完成，且响应已就绪)
//(xhr.status == '200' || xhr.status == '304')200表示数据是ok 304表示从缓存获取到了数据
if(xhr.readyState == 4 && (xhr.status == '200' || xhr.status == '304')){
//获取到数据后xhr里面就储存了需要的数据
var friends = JSON.parse(xhr.responseText)
//调用下面的render()函数得到组装好的html
var html = render(friends)
//把html塞进网页中
detailCt.innerHTML = html
}
}
//初始化一个请求.
//'get':请求类型
//'/friends?username=' + input.value:请求的url
//true:异步 false:同步
//发送请求readyState 属性改变；触发上面的xhr.onreadystatechange
xhr.open('get', '/friends?username=' + input.value, true)
//调用.send()请求发出给后端
xhr.send()
})
//该函数吧获取的数据组装成html
function render(friends){
var html = ''
for(var i = 0; i < friends.length; i++){
html += '<li>' + friends[i] + '</li>'
}
return html
}
</script>
router.js代码如下
/**
* 使用范例
*/
/**
* 发送GET请求,无参数
* GET /query
* 返回响应数据
*/
//前面的xhr.open('get', '/friends?username=' + input.value, true)发送请求,这里接收
//get：请求类型
//'/friends?username=' + input.value:请求的url
//req:请求参数
app.get('/friends', function(req, res) {
//req.query 可以获取请求参数
var username = req.query.username
var ret = ['nobody']
if(username == 'abc'){
ret = ['小明', '小刚']
}
res.send(ret) //res.send用于直接发送数据给前端
});
网友评论