AJAX
2017-05-08 本文已影响0人
湖衣
AJAX是微软发明
用js发一个请求啊
ajax是不刷新页面请求的唯一方法
get在req.query里面
post在req.body里面
浏览器发出请求：
1.地址栏输入网址url
2.link css
3.img src = xxx
4.script = xxx
5.form表单也可以发请求（当用户点击提交时）
面试
onreadystatuchange
statu === 4 才是完成
readystatu
题目1： ajax 是什么？有什么作用？
AJAX = 异步 JavaScript 和 XML。描述了一种将新的现有技术一起使用的“新”方法， 包括: HTML或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 最重要的是 XMLHttpRequest 对象。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
前后端开发联调需要注意的事情：
- 约定数据：需要传输的数据以及数据类型；
- 约定接口：接口名称，请求和响应的格式，请求的参数名称，响应的数据格式；
- 根据这些约定整理成接口文档。
后端接口完成前如何 mock 数据：
- 可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
- 可以搭建php本地服务器用，php写脚本提供临时数据；
- 也可使用Mock.js，它能拦截ajax请求并根据请求中的内容来随机生成符合你要求的假数据，模拟后端环境让你完成对页面和接口的测试。
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
添加一个状态锁，在触发ajax前先上锁，之后用户再怎么点击都不会触发ajax，直到ajax代码执行完才会触发。
var btn = document.querySelector('.btn');
var lock = false;
btn.addEventListener('click',function(e){
e.preventDefault();
if(lock){
return;
}else{
lock = true;
ajax({
...
},
success: function(){
...
lock = false;
},
error: function(){
...
lock = false;
}
});
}
})
题目4：封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据
function ajax(opts){
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200 || xhr.status === 304){
var results = JSON.parse(xhr.responseText)
opts.success('results')
}else{
opts.error()
}
}
}
var query = '?'
for (key in opts.data){
query += key + '=' + opts.data[key] + '&'
}
query = query.substr(0, query.length-1)
xhr.open(opts.type, opts.url+query, true)
xhr.send()
}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: '/login', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出错了')
}
})
});
题目5：实现加载更多的功能，效果范例149，后端在本地使用server-mock来模拟数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
ul,li{
margin: 0;
padding: 0;
}
#ct li{
list-style: none;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
cursor: pointer;
}
#load-more{
display: block;
margin: 10px auto;
}
.btn{
display: inline-block;
text-decoration: none;
color: #E27272;
border: 1px solid #E27272;
border-radius: 3px;
text-align: center;
height: 40px;
width: 80px;
line-height: 40px;
}
.hover{
background: green;
color: #fff;
}
</style>
</head>
<body>
<ul id='ct'>
<li>内容1</li>
<li>内容2</li>
</ul>
<a href="#" class='btn' id='load-more'>加载更多</a>
<script>
var ct = document.querySelector('#ct');
var loadMoreBtn = document.querySelector('#load-more');
ct.addEventListener('mouseover',function(e){
if(e.target.tagName.toLowerCase() === 'li'){
e.target.classList.add('hover');
}
});
ct.addEventListener('mouseout',function(e){
if(e.target.tagName.toLowerCase() === 'li'){
e.target.classList.remove('hover');
}
});
var lock = false;
var count = 3;
loadMoreBtn.addEventListener('click',function(e){
e.preventDefault();
if(lock){
return;
}else{
lock = true;
ajax({
url: 'loading...',
type: 'get',
data: {
start: count,
length: 6
},
success: function(json){
if(json.status === 1){
append(json.data);
count += 6;
}else{
console.log('失败');
}
lock = false;
},
error: function(){
alert('出现错误');
lock = false;
}
});
}
});
function append(arr){
for(var i=0; i<arr.length; i++){
var li = document.createElement('li');
li.innerHTML = '内容'+arr[i];
ct.appendChild(li);
}
}
function ajax(opts){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200 || xhr.status === 304){
var results = JSON.parse(xhr.responseText);
opts.success(json);
}else{
opts.error();
}
}
};
var query = '';
for (var key in opts.data){
query += key + '=' + opts.data[key] + '&';
}
query = query.substr(0, query.length-1);
xhr.open(opts.type, opts.url+query, true);
xhr.send();
}
</script>
</body>
</html>
直播课：
关键概念
服务器
网站
