问题
1. ajax 是什么？有什么作用？
Ajax是Asynchronous JavaScript and XML的缩写，这一技术能够向服务器请求额外的数据而无需卸载整个页面
AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求）从服务器获取数据，即脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了
2. 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock)
前后端应注意接口及数据格式的一致性
如何mock数据：
- 约定接口、传入参数，回传参数数据格式
- 使用server-mock进行mock数据
3. 点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
*利用状态锁
var isLocked=false;btn.addEventListener("click",function(){
if(isLocked==true){ //使用状态所状态判断
return; }
isLocked=true; //ajax之前先上锁
ajax({ ... })})
function success(){
...
isLocked=false;//解锁
}
function error(){
...
isLocked=false;//解锁
}
*当连续进行多个请求，并且请求的url地址相同时。放弃前面的所有请求，只执行最后一次请求。
*当连续进行多个请求，并且请求的url地址相同时。放弃后面的所有请求，只执行第一次请求。
代码
1. 封装一个 ajax 函数，能通过如下方式调用
<input id="type" type="text"/>
<button id="btn">提交</button>
<script>
var btn = document.querySelector("#btn");
var xhr = new XMLHttpRequest();
function ajax(opts){
xhr.onreadystatechange=function(){
if(xhr.status == 200 && xhr.readyState == 4){
var json = JSON.parse(xhr.responseText);
opts.success(ret);
}
if(xhr.status = 404){
opts.error（）;
}
}
var str = "";
for(var key in opts.data){
str += key + "=" + opts.data[key] + "$"
}
str = str.substr(0,str.length-1);
if(opts.type.toLowerCase()=="get"){
xhr.open(opts.type,opts.url + "?" + str,true);
send();
}
if(opts.type.toLowerCase()="post"){
xhr.open(opts.type,url,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
send(str);
}
}
btn.addEventListener('click', function(){
ajax({
url: 'task24-1.php', //接口地址
type: document.querSelector('#type').value; // 类型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出错了....');
}
})
});
</script>
2. 实现如下加载更多的功能。```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<link href="" rel="stylesheet">
<style>
ul{
list-style: none;
}
li{
width: 100%;
height: 40px;
line-height: 40px;
border: 1px solid ;
margin: 10px 10px 10px 10px;
}
.button{
margin: 10px auto;
color: red;
width: 100px;
text-align: center;
border-radius: 10px;
border: 1px solid red;
}
li:hover{
cursor: pointer;
background: green;
}
div:hover{
cursor: pointer;
}
</style>
</head>
<body>
<ul id='ct'>
<li class="content">内容1</li>
<li class="content">内容2</li>
</ul>
<div class="button">加载更多</div>
<script>
/*
* url: getmore
* 入参: {start:2, len: 4}
* 回参:
{
status: 0 // 0表示正常,1表示出错
data: [2,3,4,5]
}
* */
var content = document.getElementsByClassName('content');
var button = document.querySelector('.button');
var body = document.body;
var isLocked = false;
function ajax(opts) {
var xhr = new XMLHttpRequest();
var str = '';
for (var key in opts.data) {
str += key + '=' + opts.data[key] + '$'
}
str = str.substr(0, str.length - 1);
xhr.open(opts.type, opts.url, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if(xhr.readyState == 1){
isLocked = true;
}
if (xhr.status == 200 && xhr.readyState == 4) {
var strRT = ret.data;
opts.success(strRT);
isLocked = false;
}
if (xhr.status = 404) {
opts.error();
isLocked = false;
}
}
}
button.addEventListener('click', function(){
if(isLocked){
return;
}
ajax({
url: '/getmore',
type: 'post',
data: {
number: content.length,
len: 4
},
success: function(strRT){
success(strRT);
},
error: function(){
console.log('出错了....');
}
})
send(str)
})
function success(strRT){
for(var i=0;i<strRT.length;i++){
strRT[i] += 1;
var newDiv = '<div class="content">内容' + strRT[i] + '</div>';
body.insertBefore(button,newDiv)
}
}
</script>
</body>
</html>
#####3. 实现注册表单验证功能效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<link href="" rel="stylesheet">
<style>
.TS{
font-size: 12px;
color: #ccc;
}
dl,dt,dd{
margin-left: 20px;
padding: 0;
}
</style>
</head>
<body>
<div>
<p>注册</p>
<dl class='ct'>
<dt>用户名</dt>
<dd><input id='ipt name' type='text' name='name' placeholder='hunger已经被注册过了'></dd>
<dd><p class='name TS'>只能是字母、数字、下划线，3-10个字符</p></dd>
<dt>密码</dt>
<dd><input id='ipt pw1' type='password' name='pw1' placeholder='请输入密码'></dd>
<dd><p class='pw1 TS'>大写字母、小写、数字、下划线最少两种，6-15个字符</p></dd>
<dt>再输一次</dt>
<dd><input id='ipt pw2' type='password' name='pw2' placeholder='再输一次密码'></dd>
<dd><p class='pw2 TS'></p></dd>
<dd><button id='btn'>注册</button></dd>
</dl>
</div>
<script>
/*
* 接口: /checkform
* 入参:{
name: hunger
pw1: ***** //密码
}
*回参:{
status: 0 // 0表示正常,1表示出错
isName: 0 // 0表示可用,1表示用户名已经存在
}
* */
var ct = document.querySelector('.ct'),
ipt = document.querySelectorAll('input'),
TS = document.querySelectorAll('.TS'),
btn = document.querySelector('#btn'),
nm = document.querySelectorAll('input')[0],
pw1 = ipt[1],
pw2 = ipt[2],
nmTS = TS[0];
pw1TS = TS[1],
pw2TS = TS[2],
isLockd = false;
function ajax(opts){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.status == 1){
isLocked = true;
}
if(xhr.status == 200 && xhr.readyState == 4){
var json = JASON.parse(xhr.responseText);
opts.success(ret);
isLocked = false;
}
if(xhr.status = 404){
opts.error();
isLocked = false;
}
}
var str = '';
for(var key in opts.data){
str += key + "=" + opts.data[key] + '$'
}
str = str.substr(0,str.length-1);
if(opts.type.toLowerCase()=="get"){
xhr.open(opts.type,opts.url + "?" + str,true);
send();
}
if(opts.type.toLowerCase()=="post"){
xhr.open(opts.type,opts.url,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
btn.addEventListener("click",function(){
send(str);})
}
}
ct.addEventListener('click',function(){
checkName();
checkPw();
})
btn.addEventListener('click', function(e){
e.stopPropagation();
if(isLocked){
return;
}
ajax({
url: '/checkform',
type: 'post',
data: {
name: nm.value,
password: pw1.value,
},
success: function(){
success(ret);
},
error: function(){
console.log('出错了....');
}
})
});
function checkName(){
if(isLocked){
return;
}
ajax({
url: 'checkform',
type: 'post',
data: {
name: m.value,
},
success: function(){
if(ret.nameTset==1) {
nmTS.innerText = '用户名已被注册';
}
},
error: function(){
console.log('木有检测到用户名....');
}
})
if(/\w{3,9}/g.test(nm.value)==false ){
nmTS.innerText='用户名非法';
return;
}else
nmTS.innerText='用户名可用';
return;
}
function checkPw(){
if( !/^\w{6,15}$/.test(pw1.value)){
pw1TS.innerText='密码格式不正确';
}else{
pw1TS.innerText='密码格式正确';
}
if(pw1.value!=pw2.value){
pw2TS.innerText='两次输入不一致';
}else{
pw2TS.innerText='密码一致';
}
}
function success(ret){
alert('注册成功');
}
</script>
</body>
</html>```
本文版权归本人（帘外修竹）所有，转载须说明来源