ajax实战
2017-09-22 本文已影响0人
marmot_ning
ajax实战
ajax 是什么？有什么作用？
-
ajax 是什么
AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
ajax不是新的编程语言，而是一种使用现有标准的新方法。ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。 -
作用
ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面。
ajax的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。
ajax前景非常乐观，可以提高系统性能，优化用户界面。AJAX现有直接框架AjaxPro，可以引入AjaxPro.2.dll文件，可以直接在前台页面JS调用后台页面的方法。但此框架与FORM验证有冲突。另微软也引入了AJAX组建，需要添加AjaxControlToolkit.dll文件，可以在控件列表中出现相关控件。 -
优点和缺点
优点：- 最大的一点是页面无刷新，用户的体验非常好。
- 使用异步方式与服务器通信，具有更加迅速的响应能力。。
- 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
- 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
- ajax可使因特网应用程序更小、更快，更友好。
缺点：
- ajax不支持浏览器back按钮。
- 安全问题 AJAX暴露了与服务器交互的细节。
- 对搜索引擎的支持比较弱。
- 破坏了程序的异常机制。
- 不容易调试。
前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据
- 前后端开发联调需要注意
- 约定好请求方法
- 约定接口实现使用哪种方式:get/post
- 约定request参数的name,类型(格式)
- 约定response的类型(格式)格式: 字符串/数组/对象...
- 如何 mock 数据
- mock数据指的是在后端开发没有完成时，前端可以通过mock方法搭建本地服务器，模拟后台数据来实现数据交互的效果
- 可安装xampp在本地搭建(php等)服务器，也可以安装server-mock，这样不需要特地去写一个后台的处理页面文件来访问数据
点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
- 令用户的点击变得无效，请求未处理完成之前，拒绝再次请求，而请求到了并处理完之后，恢复到可请求状态。
var pageIndex = 0
//请求未处理完成之前防止重复点击
var isDataArrive = true
btn.addEventListener("click",function(e){
e.preventDefault()
if(!isDataArrive){
return;
}
实现加载更多的功能，效果范例426，后端在本地使用server-mock来模拟数据
index代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加载更多</title>
<style>
*{
margin: 0;
padding: 0;
}
#ct li{
list-style:none;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
cursor:pointer;
}
#ct li:hover{
background-color: green;
}
#load-more{
display: block;
margin: 10px auto;
text-align: center;
cursor: pointer;
}
/*#load-more img{
width: 40px;
height: 40px;
}*/
.btn{
display: inline-block;
height: 40px;
line-height: 40px;
width: 80px;
border: 1px solid #da6969;
border-radius: 3px;
text-align: center;
text-decoration: none;
color: #E27272;
}
.btn:hover{
background: #3aca46;
color: #fff;
}
</style>
</head>
<body>
<ul id ="ct">
</ul>
<!-- <a href="javascript:void(0)"></a> undefined不跳转-->
<a href="#" id="load-more" class= "btn">加载更多</a>
</body>
<script>
//获取a链接
var btn = document.querySelector("#load-more")
var ct = document.querySelector("#ct")
var pageIndex = 0
//网速特别慢的时候,在数据到来之前防止重复点击?
var isDataArrive = true
btn.addEventListener("click",function(e){
e.preventDefault()
if(!isDataArrive){
return;
}
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 304) {
var result = JSON.parse(xhr.responseText)
var fragment = document.createDocumentFragment()
for (var i = 0; i < result.length; i++) {
var node = document.createElement("li")
node.innerText = result[i]
fragment.appendChild(node)
}
//插入li
ct.appendChild(fragment)
//数字每次变化5
pageIndex += 5
}else{
alert("出错啦")
}
isDataArrive = true
}
}
xhr.open("get","/loadMore?index="+pageIndex+"&length=5",true)
xhr.send()
isDataArrive = false
})
</script>
</html>
模拟后端代码
//服务端 router.js
app.get('/loadMore', function(req, res) {
var curIdx = req.query.index
var len = req.query.length
var data = []
for(var i = 0; i < len; i++) {
data.push('新闻' + (parseInt(curIdx) + i))
}
res.send(data);
});
