1，ajax 是什么？有什么作用？
- ajax全称为Asynchronous JavaScript and XML，可以实现在不重新加载整个页面的情况下，对网页的某一部分进行更新(异步)。
- ajax在 浏览器与web服务器之间使用异步数据传输（HTTP请求）从服务器获取数据。
这里的异步指的是脱离当前浏览器页面的请求、加载等单独执行，这就意味着可以在不重新加载整个网页的情况下，通过JavaScript发送请求，接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用ajax最直观的感受就是向服务器获取新数据不需要刷新页面等待了。
2，前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock) 知识点视频-如何 mock 数据
前后端联调是一种 真实业务数据和 本地mock数据之间来回切换以达到前后端分离架构下的不同开发速度时数据交换的一种方式方法。
需要注意的事情有：
约定前后端联调的时间。
约定双方需要传输的数据和接口，在接口文档中确定好参数的名称、格式等。
约定请求和响应的格式和内容。
什么是mock数据：就是html发送一个ajax的请求。这个请求到哪里去，然后后端如何去响应这个请求。
后端去获取数据，并且定义接口；
前端编写页面，并且和后端进行交互。mock数据的方法有：
使用server-mock或mock.js （http://mockjs.com/ ）搭建模拟服务器，进行模拟测试（优点是不需要熟练掌握后台PHP语言，采用熟悉的js语法）；
步骤：安装node.js，呼出cmd命令
选取一个文件夹，使用npm install -g server -mock进行全局安装
输入mock start可以启动一个web 服务器，他的根目录就是你选取的文件夹，启动完成之后，web服务器就可以展示了浏览器输入localhost:8080就是你选取的文件夹
使用mock init会自动的在文件夹下生成3个文件
当html使用url对接口进行请求，会被router.js里相同的接口接受
比如：
app.get("/loadMore",function(req,res){
//接受名为loadMore的php的参数
res.send({status:0,//向html发出正确的回参
msg:"hello 饥人谷"//回参中的值
})
})
- 使用XAMPP等工具，编写PHP文件来进行测试。
3，点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
方法一：使用button的disabled属性，配合setTimeout 0，使在数据到来之前按钮都不能被点击
el.addEventListener("click",function(){
this.disabled=true; ajax();
setTimeout(this.disabled=false,0);
});
方法二：可设置标记变量flag，初始时设置flag为true.在用户点击提交按钮后，判断flag是否为true，如果是则发送ajax请求，并把flag设置为false。 等服务端给出响应后再把flag设置为true;
var ready = true;
$('.add-more').on('click', function(){
...
if(!ready){
return;
}
ready = false;
$.ajax({
...
complete: function(){
ready = true;
}
});
});
- 代码题：
一，封装一个 ajax 函数，能通过如下方式调用
function ajax(opts){
// todo ...
}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: 'getData.php', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出错了')
}
})
});
- 未封装的普通ajax代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- 需求是：在输入框输入用户名，点击按钮，打包请求后发给后台，后台响应对应的姓名和年龄 -->
<input type="text" name="username" id="username" placeholder="请输入用户名">
<button class="btn">提交</button>
<dl id="ct">
</dl>
<script>
document.querySelector('.btn').addEventListener('click',function(){
var xmlhttp = new XMLHttpRequest();
username = document.querySelector('#username').value;
var url = 'renwu1.php' + '?username='+username;
// GET方式:
xmlhttp.open('GET',url,true);
xmlhttp.send();
//POST方式：
// xmlhttp.open('POST','renwu1.php',true);
// xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
// xmlhttp.send("username="+username);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var userInfo = JSON.parse(xmlhttp.responseText);
dealWith(userInfo);
}
}
});
function dealWith(userInfo){
var str = '<dt>性别：</dt>';
str += '<dd>'+ userInfo.sex +'</dd>';
str += '<dt>年龄：</dt>';
str += '<dd>'+userInfo.age +'</dd>';
document.querySelector('#ct').innerHTML = str;
}
</script>
</body>
</html>
-
PHP代码：
<?php // $username = $_GET['username']; $username = $_POST['username']; if($username === 'har'){ $ret = array('sex'=>'男','age'=>'23'); }else if($username === 'marry'){ $ret = array('sex'=>'女','age'=>'22'); }else{ $ret = array('sex'=>'女','age'=>'27'); } echo json_encode($ret); //输出标准json格式 ?> 封装
function ajax(opts){
var xmlhttp = new XMLHttpRequest();
var dataStr = '';
for(var key in opts.data){
dataStr += key + '=' + opts.data[key]+'&'
}
dataStr = dataStr.substr(0,dataStr.length-1)
if(opts.type.toLowerCase()==='post'){
xmlhttp.open(opts.type,opts.url,true);
xmlhttp.setRequestHeader('content-type','application/x-www-form-urlencoded');
xmlhttp.send(dataStr);
}
if(opts.type.toLowerCase()==='get'){
xmlhttp.open(opts.type,opts.url+'?'+ dataStr,true);
xmlhttp.send();
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200 ){
var json = JSON.parse(xmlhttp.responseText);
opts.success(json);
}
if(xmlhttp.readyState == 4 && xmlhttp.status == 404 ){
opts.error();
}
};
}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: 'renwu1.php', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
username: document.querySelector('#username').value;
password: document.querySelector('#password');
},
success: function(jsonData){
dealWith(jsonData); // {status: 0}
},
error: function(){
console.log('出错了')
}
})
});
function dealWith(userInfo){
var str = '<dt>性别：</dt>';
str += '<dd>'+ userInfo.sex +'</dd>';
str += '<dt>年龄：</dt>';
str += '<dd>'+userInfo.age +'</dd>';
document.querySelector('#ct').innerHTML = str;
};
二，封装一个 ajax 函数，能通过如下方式调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务二</title>
<style media="screen">
div,a{
margin:0;
padding:0;
}
.ct li{
border:1px solid #ccc;
height: 50px;
line-height:50px;
padding-left: 10px;
margin: 10px 0;
list-style:none;
}
.ct{
padding-left: 0px;
}
.btn{
border: 1px solid red;
text-align: center;
display: inline-block;
height: 30px;
width: 80px;
line-height: 30px;
cursor: pointer;
position:absolute;
left:50%;
margin-top: 30px;
margin-left: -40px;
border-radius: 5px;
}
.btn:active{
background-color: pink;
color: #222;
}
</style>
</head>
<body>
<ul class="ct">
<li>内容1</li>
<li>内容2</li>
</ul>
<a class="btn">加载更多</a>
<script type="text/javascript">
function ajax(opts){
var xml = new XMLHttpRequest();
var datastr = '';
for(var key in opts.data){
datastr += key + '=' + opts.data[key] + '&'
}
datastr=datastr.substr(0,datastr.length-1);
if(opts.type.toLowerCase()=='get'){
xml.open(opts.type,opts.url+'?'+datastr,true);
xml.send();
}
if(opts.type.toLowerCase()=='post'){
xml.open(opts.type,opts.url,true);
xml.send(datastr);
xml.setRequestHeader('content-type','application/x-www-form-urlencoded');
}
xml.onreadystatechange = function(){
if(xml.readyState==4 && xml.status == 200){
var json = JSON.parse(xml.responseText);
opts.success(json);
}
if(xml.readyState==4 && xml.status ==404){
opts.error();
}
}
}
var cur = 3;
document.querySelector('.btn').addEventListener('click', function(){
ajax({
url: 'renwu2.php', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
start:cur,
len: 6
},
success: function(json){
if(json.status==1){
append(json.data);
cur += 6;
}else{
console.log('失败啦')
} // {status: 0}
},
error: function(){
console.log('出错了')
}
})
});
function append(arr){
for(var i=0; i<arr.length; i++){
var li = document.createElement('li');
li.innerHTML = arr[i];
document.querySelector('.ct').appendChild(li);
}
}
</script>
</body>
</html>
PHP端：
<?php
$start = $_GET['start'];
$len = $_GET['len'];
$items = array();
for($i=0;$i<$len;$i++){
array_push($items,'内容'.($start+$i));
}
$ret = array('status'=>1,'data'=>$items);
sleep(1);
echo json_encode($ret);
?>