问答
1.ajax 是什么？有什么作用？
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）,它是通过原生的XMLHttpRequest对象发出HTTP请求，数据通常会以JSON的格式来进行发送，得到服务器返回的数据后，再进行处理。
AJAX通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。它可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
2.前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock)
①需要注意的事情有：
约定好数据和接口
例如：
约定数据：需要传输的数据；
约定接口：接口名称，请求和响应的格式；
②MOCK数据的方法有：
使用server-mock或mock.js搭建模拟服务器，进行模拟测试；
使用XAMPP等工具，编写PHP文件来进行测试
3.点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
可使用状态锁的方式：
var lock=false; //设置初始值是false,解锁状态
btn.addEventListener('click',function(){
if(lock){ //先判断一次，这里是false不执行，true的话就return
return;
};
lock=true; //如果程序运行到这里的话，重复点击的话会return出去
ajax({
to do:function(){
.... //执行完某个动作后解锁
locked=false
}
})
});
代码
1.封装一个 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('出错了')
}
})
});
function ajax(opts){
//这里是创建ajax对象，获取ajax对象的后台响应文本
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){ //在ajax上绑定事件监听
if(xmlhttp.readyState==="4" && xmlhttp.status==="200"){
var json=JSON.parse(xmlhttp.responseText);
//把字符串形式的responseText转为JSON对象
opts.success(json);
}
if(xmlhttp.readyState==="4" && xmlhttp.status==="404"){ //ajax通信失败,报错
opts.error();
}
};
//这里是为了获得数据，然后把数据变成key=value的形式
var dataStr =" "; //声明一个空字符串dataStr
for(var key in opts.data){ //使用for in遍历opts.data对象，变为键值对形式
dataStr +=key + "=" + opts.data[key] + "&";//把opts.data对象中每一项的key 和对应的值提取出来拼装进字符串dataStr
};
dataStr=dataStr.substr(0,dataStr.length-1);
//这里是ajax对象两种数据传输类型
if(opts.type.toLowerCase()==="get"){ //如果是get类型，url后面加上数据
xmlhttp.open("GET",opts.url+"?"+dataStr,true); //连接服务器
xmlhttp.send(); //发送数据过去
};
if(opts.type.toLowerCase()==="post"){
xmlhttp.open("POST",opts.url,true);
xmlhttp.setRuquestHeader("Content-Type","application/x-www-form-urlencoded")
xmlhttp.send(dataStr); //如果是post类型，send里面发送数据，同时在发送前面加上ajax头部
};
}
2、实现如下加载更多的功能
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
body,ul,li{
margin:0px;
padding:0px;
}
li{
list-style: none;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
text-align: left;
}
li:hover{
cursor: pointer;
color: #fff;
background:green;
}
#btn{
height: 50px;
width: 100px;
color:#E27272;
text-align: center;
line-height: 50px;
border: 1px solid #E27272;
border-radius: 4px;
margin:20px auto;
}
#btn:hover{
cursor: pointer;
}
</style>
</head>
<body>
<ul id="content">
<li>内容1</li>
<li>内容2</li>
</ul>
<div id="btn">点我加载更多</div>
<script>
function ajax(opts){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var json = JSON.parse(xhr.responseText);
console.log(json);
opts.success(json);
}
if (xhr.readyState == 4 && xhr.status == 404) {
opts.error();
}
};
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"){
xhr.open(opts.type,opts.url+"?"+dataStr,true);
xhr.send();
}
if (opts.type.toLowerCase()=="post"){
xhr.open(opts.type,opts.url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(dataStr);
}
}
var btn=document.querySelector('#btn');
var lock=false;
btn.addEventListener('click',function(){
if(lock) {
return;
};
lock=true;
ajax({
type:'get',
url:'task24-2.php',
data:{
begin:document.querySelector('#content').children.length,
len:4
},
success:function(arr){
dealWith(arr);
lock=false;
},
error:function(){
onError();
}
})
});
function dealWith(arr){
for(var i=0;i<arr.length;i++){
var newLi=document.createElement('li');
newLi.innerHTML=arr[i];
document.querySelector('#content').appendChild(newLi)
}
}
function onError(){
console.log('出错了');
};
</script>
</body>
</html>
PHP代码
<?php
$start = $_GET['begin'];
$len = $_GET['len'];
$items = array();
for($i = 0; $i < $len; $i++){
array_push($items, '内容' . ($start+$i+1));
}
echo json_encode($items);
?>
3.实现注册表单验证功能
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
*{
box-sizing:border-box;
margin:0px;
padding: 0px;
}
h1{
margin-bottom: 20px;
}
#register{
/*border:1px solid;*/
margin:50px;
}
.regCt dt{
/*border: 1px solid;*/
float: left;
height: 25px;
line-height: 25px;
font-size: 14px;
width:90px;
}
.regCt dd{
margin-left: 90px;
}
.regCt input{
height: 25px;
line-height: 25px;
padding-left: 10px;
border-radius: 4px;
border: 1px solid #ccc;
}
.regCt .error{
border-color: red;
}
.regCt .intro{
/*border: 1px solid;*/
height: 10px;
margin-top: 15px;
margin-bottom: 15px;
font-size: 12px;
color: #aaa;
}
</style>
</head>
<body1>
<div id="register">
<h1>注册</h1>
<form id="regForm" action>
<dl class="regCt"> //注意这里最好是用dl标签
<dt>用户名:</dt>
<dd><input id="username" type="text" placeholder="用户名hunger已注册"></dd>
<dd class="intro intro_user">只能是字母、数值、下划线，3-10个字符</dd>
<dt>密码:</dt>
<dd><input id="psdStart" type="password"></dd>
<dd class="intro intro_psd1">大写字母、小写、数字、下划线最少两种，6-15个字符</dd>
<dt>再输一次:</dt>
<dd><input id="psdAgain" type="password" placeholder="再输入一次密码"></dd>
<dd class="intro intro_psd2"></dd>
<dd><button id="btn" type="button">注册</button></dd>
</dl>
</form>
</div>
<script>
var username=document.querySelector("#username"),
psdStart=document.querySelector("#psdStart"),
psdAgain=document.querySelector("#psdAgain"),
btn=document.querySelector("#btn"),
intro_user=document.querySelector(".intro_user"),
intro_psd1=document.querySelector(".intro_psd1"),
intro_psd2=document.querySelector(".intro_psd2");
username.addEventListener('change',function(){
testName() && testUnValid(); //用户名要满足格式正确，不能重复注册
});
psdStart.addEventListener('change',function(){
testPass1(); //密码1要满足格式正确，与密码2的输入相同
});
psdAgain.addEventListener('change',function(){
testPass2(); //同理
});
btn.addEventListener('click',function(){
//点击btn,执行函数时里面判断语句要用户名格式正确，两个密码格式也正确才会输出
if(testName() && testPass1() && testPass2()){
alert('registering....');
console.log('registering.....')
}
});
//检查用户名是否可用
//解释：输入的用户名后，服务器接受用户名，然后判断是否重复用户名，如果是重复的话给浏览器一个数据，如果不重复给另外一个数据。浏览器通过给的数据进行判断，执行动作给出对应的提示
function testUnValid(){
ajax({ //立即执行函数ajax，参数是对象
url:'task24-3.php', //发送给服务器的地址
type:'get', //使用get方式发送，也就是地址后面加上数据的key=value的形式
data:{ //发送的数据，值是对象
username:username.value,
},
success:function(ret){ //服务器发送数据成功，ret就代表responseText
if(ret=='1'){ //判断语句，如果后台发送的数据是1，证明用户名重复
addClass(username,'error'); //添加error样式，框变红
intro_user.innerText="用户名已经存在"; //框下面给出提示
}else{
removeClass(username,'error'); //否则证明用户名不重复
intro_user.innerText="用户名可用";
}
},
error:function(){ //这里是服务器发送数据失败
console.log('出错了');
}
});
}
// 检查用户名格式是否正确
function testName(){
if(!isValidUn(username.value)){
addClass(username,'error');
intro_user.innerText='用户名格式不正确';
return false;
}else{
removeClass(username,'error');
intro_user.innerText='用户名可用';
return true;
}
}
//检查密码框1的格式是否正确，同理
function testPass1(){
if(!isValidPass(psdStart.value)){
addClass(psdStart,'error');
intro_psd1.innerText='密码格式不正确';
return false;
}else{
removeClass(psdStart,'error');
intro_psd1.innerText='';
return true;
}
}
//检查密码框2的密码是否与密码框1的密码相等
function testPass2(){
if(psdAgain.value !== psdStart.value){ //这里是不相等，怎样提示
addClass(psdAgain,'error'); //添加error的样式，框变红
intro_psd2.innerText='两次密码输入不一样'; //框下面的提示
return false; //返回false，使btn事件中的判断语句调用
}else{
removeClass(psdAgain,'error'); //否则删除error的样式
intro_psd2.innerText=''; //框下面没有任何提示，表示值相等
return true; //返回true，同上
}
}
//这里检查用户名输入的是否满足要求
function isValidUn(str){
//合法的用户名, 3~10个字符，只能是字母，数字，下划线
if(/^[A-Za-z_0-9]{3,10}$/.test(str)){
return true; //使用正则的test判断，满足要求就返回true
}else{
return false;
}
}
//这里检查密码输入是不是满足要求
function isValidPass(str){
//合法的密码, 6-15个字符，至少包括大写，小写，下划线，数字两种
if(str.length < 6 || str.length >15){
return false;
}
//如果包含上述四种以外的字符，false
if(/[^A-Za-z_0-9]/.test(str)){
return false;
}
//如果全为大写、小写、下划线、数字, false
if (/(^[a-z]+$)|(^[A-Z]+$)|(^_+$)|(^\d+$)/g.test(str)) {
return false;
}
return true;
}
//添加删除class
function addClass(ele,cls){
ele.className +=' '+cls;
}
function removeClass(ele,cls){
ele.className=ele.className.replace(new RegExp('\\b'+cls+'\\b','g'),'');
}
function ajax(opts){
var xhr;
if (window.XMLHttpRequest) { //IE7+,chrome,Safari,Opera,Firefox
xhr = new XMLHttpRequest();
} else {
xhr = new AcitveXObject("Microsoft.XMLHTTP"); //IE5,IE6
}
// var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState===4 && xhr.status===200){
var json=JSON.parse(xhr.responseText);
opts.success(json);
}
if(xhr.readState===4 && xhr.status===404){
opts.error();
}
}
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'){
xhr.open(opts.type,opts.url + "?" + dataStr,true);
xhr.send();
}
if(opts.type.toLowerCase()==='post'){
xhr.open(opts.type,opts.url,true);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(dataStr);
}
}
</script>
</body>
</html>
PHP代码
<?php
$name = $_GET['username'];
if($name === 'hunger'){
$ret = 1;
}else{
$ret = 0;
}
echo json_encode($ret);
?>
网友评论