任务24 ajax
2016-11-23 本文已影响0人
GarenWang
1.ajax 是什么？有什么作用？
- AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种用于创建快速动态网页的技术。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面；AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求，核心对象XMLHTTPRequest），通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。
2.前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
- 需要注意的事情
- 前后端充分了解项目的需求
- 前后端沟通设计接口，约定好数据格式 以及前端需要传递什么样的参数，还有传递的方式，
- 共同制定接口说明，出一个文档
- 前后端独立开发，前端向Mock Server发送请求，获取模拟的数据进行开发和测试
- 前后端都完成后，前后端连接调试（前端修改配置向Real Server而不是Mock Server发送请求）。
- mock数据
- 使用XAMPP等工具，搭建本地php服务器用，编写php脚本提供临时数据；
- 使用mock.js生成模拟数据，拦截AJAX请求，并且返回模拟的数据进行测试；
- 使用node server-mock，解决后端模板的渲染和AJAX接口的处理来模拟数据
3.点击按钮，使用 AJAX获取数据，如何在数据到来之前防止重复点击?
-
setTimeout + clearTimeout连续的点击会把上一次点击清除掉，也就是ajax请求会在最后一次点击后发出去
-
disable 按扭
-
用一个变量锁定啊。用户一点击，flag变成false，再点也不发送请求，ajax成功以后flag设为true
var lock= false; //设置锁变量； document.querySelector('.btn').addEventListener('click',function(){ if(lock){ //如果有锁存在，则不执行AJAX return; } lock= true; //上锁 ajax({ url:'', type:''; data:{}, success:function(ret){ lock= false; //解锁 }, error:function(){ } }); });
代码题
1.封装一个 ajax 函数，能通过如下方式调用
//封装ajax
function ajax(opts){
//创建 XMLHttpRequest 对象
var xhr=new XMLHttpRequest();
//当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//将服务器返回的文本xhr.responseText转换为JSON格式字符串
var str=JSON.parse(xhr.responseText);
//使用succss方法
opts.succss(str);
}
if (xhr.status==404&&xhr.readyState==4) {
//若请求失败，调用error方法
opts.error();
}
}
//创建发送到服务器的数据
var dataStr="";
for(var key in opts.data){
dataStr+=key+"="+opts.data[key]+"&";
}
dataStr= dataStr.substr(0,dataStr.length-1);
dataStr+='&='+new Date().getTime();
//判断请求方式get or post
if(opts.type.toLowerCase()=="get"){
xhr.open("GET",opts.url+"?"+dataStr,true)
xhr.send();
}
if(opts.type.toLowerCase()=="post"){
xhr.open("POST",opts.url,true)
//为了使post请求与提交web表单相同，将 Content-Type 头部信息设置为 application/x-www-form-urlencoded来模仿表单提交功能（post必须的)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send(dataStr);
}
}
//ajax 对象 调用前面的函数
document.getElementById('btn').addEventListener("click",function(){
ajax({
url:'phpajax.php',//后端接口地址
type:"get", // 类型， post 或者 get,
data:{
username: 'xiaoming',
password: 'abcd1234'
},
succss:function(ret){
console.log(ret) // {status: 0}
},
error:function(){
console.log("对不起，出错了")
}
})
})
2.代码2-html
后端-php代码
<?php
$start=$_GET['start'];
$add=$_GET['len'];
$li=array();
for($i=0;$i<$add;$i++){
$li[$i]='内容'.($start+$i+1);
};
echo json_encode($li);
?>
3.代码3
后端-php代码
<?php
$name=$_GET['username'];
if($name=="hunger"){
echo 0;
}else{
echo 1;
}
?>
