一、问答
（一）、ajax 是什么？有什么作用？
ajax全称是asynchronous javascript and xml（异步的 JavaScript 和 XML），它是一种额外的向服务器发送请求时无需重新卸载页面的技术；
这种通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，会带来更好的用户体验。
（二）、前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock)
需要注意的事情有：
a.约定前后端联调的时间。
b.约定双方需要传输的数据和接口，在接口文档中确定好参数的名称、格式等。
c.约定请求和响应的格式和内容。MOCK数据的方法有：
a.使用server-mock或mock.js （http://mockjs.com/ ）搭建模拟服务器，进行模拟测试；
b.使用XAMPP等工具，编写PHP文件来进行测试。
（三）、点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
可使用状态锁的方式：
var loading = false;
btn.addEventListener('click',function(){
if(loading){
return ;
}
else{
loading= true;
//在这里执行代码
loading = false; //执行完代码后，将开关关闭
}
},false);
二、代码
-
以下所有代码均使用XAMPP在本地测试通过！！！
（一）、封装一个 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('出错了')
}
})
});
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<button id="btn">看我不爽就猛戳此处~ 哈哈</button>
<h1 id="content"></h1>
<script>
// 可正常使用
function ajax(opts){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function() {
if (xhr.readyState === 4) {
if(xhr.status === 200){
opts.success(JSON.parse(xhr.responseText));
}else {
opts.error('status'+xhr.status);
}
}
// if (xhr.readyState === 4 && xhr.status === 404) {
// opts.error();
// }
};
if (opts.type.toLowerCase()==="get"){
var dataStr="";
for (var key in opts.data){
dataStr+=key+"="+opts.data[key]+"&";
}
dataStr=dataStr.substr(0,dataStr.length-1);
xhr.open("get",opts.url+"?"+dataStr,true);
xhr.send(null);
}
if (opts.type.toLowerCase()==="post"){
xhr.open("post",opts.url,true);
// xhr.setRequestHeader("Content-Type",opts.contentType? opts.contentType:"application/x-www-form-urlencoded");
xhr.send(opts.data);
}
}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: 'renwu24_1.php', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出错了')
}
})
});
</script>
</body>
</html>
PHP代码
<?php
echo "你的用户名是". $_REQUEST["username"];
echo " ";
echo "你的密码是".$_REQUEST["password"];
?>
HTML 预览地址：http://book.xxxx.com/test/%E6%9D%8E%E5%BD%A9/renwu24/1/renwu24_1.html
（二）、实现如下加载更多的功能。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>24-2加载更多</title>
<style>
ul,li{
list-style: none;
color: #000;
margin: 0;
padding: 0;
}
li{
border: 1px solid #ddd;
line-height: 50px;
height: 50px;
margin-bottom: 10px;
cursor: pointer;
}
li:hover{
background-color: green;
color: #fff;
}
a{
text-decoration: none;
color: #E27272;
display: block;
text-align: center;
height: 40px;
line-height: 40px;
width: 100px;
border: 1px solid #E27272;
border-radius: 2px;
margin: 0 auto;
}
</style>
</head>
<body>
<ul id="ct">
<li>内容1</li>
<li>内容2</li>
</ul>
<a id="more" href="#">加载更多</a>
<script>
function ajax(opts){
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.readyState == 4 && xhr.status == 404) {
opts.error();
}
};
if (opts.type.toLowerCase()=="get"){
var dataStr="";
for (var key in opts.data){
dataStr+=key+"="+opts.data[key]+"&";
}
dataStr=dataStr.substr(0,dataStr.length-1);
xhr.open("get",opts.url+"?"+dataStr,true);
xhr.send(null);
}
if (opts.type.toLowerCase()=="post"){
xhr.open("post",opts.url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(opts.data);
}
}
document.querySelector('#more').addEventListener('click', function(){
ajax({
url: 'renwu24_2.php', //接口地址
type: 'get', // 类型， post 或者 get,
data: {
start: document.getElementById("ct").children.length,
long: 5
},
success: function(ret){
for (var i=0;i<ret.length;i++){
var newLi=document.createElement("li");
newLi.innerText=ret[i];
document.getElementById("ct").appendChild(newLi);
}
},
error: function(){
console.log('出错了')
}
})
});
</script>
</body>
</html>
PHP代码
<?php
$start = $_GET['start'];
$len = $_GET['long'];
$items = array();
for($i = 0; $i < $len; $i++){
array_push($items, '内容' . ($start+$i+1));
}
echo json_encode($items);
?>
HTML代码预览地址：http://book.xxxx.com/test/%E6%9D%8E%E5%BD%A9/renwu24/2/renwu24_2.html
（三）、实现注册表单验证功能
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>24-3</title>
<style>
h5{
color: #ccc;
}
</style>
</head>
<body>
<form action="">
<h3>注册</h3>
用户名 <input type="text" placeholder="用户名（hunger被注册过）" name="usename" id="usename">
<h5 class="usename">只能是字母、数字、下划线，3-10个字符</h5>
密码 <input type="text" placeholder="请输入密码" name="password" id="password">
<h5 class="password">大写字母、小写、数字、下划线最少两种，6-15个字符</h5>
再输一次 <input type="text" placeholder="请再输入一次密码" name="password_agin" id="password_agin">
<h5 class="password_agin"> </h5>
<button id="submit">注册</button>
</form>
<script>
document.querySelector('#usename').addEventListener('change', function(){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if (xhr.responseText==1){
document.getElementsByClassName("usename")[0].innerText="用户名已存在";
}
else if (2< document.getElementById("usename").value.toString().length && document.getElementById("usename").value.toString().length<11){
if (document.getElementById("usename").value.toString().match(/^\w{3,10}$/)) {
document.getElementsByClassName("usename")[0].innerText="该用户名可用";
}
else document.getElementsByClassName("usename")[0].innerText="用户名格式不正确";
}
else document.getElementsByClassName("usename")[0].innerText="用户名格式不正确";
}
};
// 一、get方法
// xhr.open("get","renwu24_3.php?usename="+document.getElementById("usename").value,true);
// xhr.send(null);
// 二、post方法
var data="usename="+document.getElementById("usename").value;
xhr.open("post","renwu24_3.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);
});
document.querySelector('#password').addEventListener('change', function(){
var passwordStr=document.getElementById("password").value.toString();
if (5< passwordStr.length && passwordStr.length<16){
if (passwordStr.match(/^\w{6,15}$/)){
if ( passwordStr.match(/[0-9]/)&&(!passwordStr.match(/[A-Z]/))&&(!passwordStr.match(/[_]/))&&(!passwordStr.match(/[a-z]/))){ document.getElementsByClassName("password")[0].innerText="请输入至少两种以上字符" }
if ( !passwordStr.match(/[0-9]/)&&(passwordStr.match(/[A-Z]/))&&(!passwordStr.match(/[_]/))&&(!passwordStr.match(/[a-z]/))){ document.getElementsByClassName("password")[0].innerText="请输入至少两种以上字符" }
if ( !passwordStr.match(/[0-9]/)&&(!passwordStr.match(/[A-Z]/))&&(passwordStr.match(/[_]/))&&(!passwordStr.match(/[a-z]/))){ document.getElementsByClassName("password")[0].innerText="请输入至少两种以上字符" }
if ( !passwordStr.match(/[0-9]/)&&(!passwordStr.match(/[A-Z]/))&&(!passwordStr.match(/[_]/))&&(passwordStr.match(/[a-z]/))){ document.getElementsByClassName("password")[0].innerText="请输入至少两种以上字符" }
else document.getElementsByClassName("password")[0].innerText="你输入的密码可用"
}
else document.getElementsByClassName("password")[0].innerText="您输入的含有非字母数字下划线"
}
else document.getElementsByClassName("password")[0].innerText="您输入的密码长度过长或过短！"
});
document.querySelector('#password_agin').addEventListener('change', function(){
passwordStr=document.getElementById("password_agin").value.toString();
if (passwordStr!=document.getElementById("password").value.toString()){
document.getElementsByClassName("password_agin")[0].innerText="您两次输入的密码不一致！"
}
else document.getElementsByClassName("password_agin")[0].innerText="两次输入的密码一致"
});
document.getElementById("submit").addEventListener("click",function (e) {
e.preventDefault();
if (document.getElementsByClassName("usename")[0].innerText!=="该用户名可用"||
document.getElementsByClassName("password")[0].innerText!=="你输入的密码可用"||
document.getElementsByClassName("password_agin")[0].innerText!=="两次输入的密码一致")
{
alert("请输入正确且完整的信息！");
}
else { alert("请稍等正在注册~") }
});
</script>
</body>
</html>
PHP代码
<?php
$name = $_POST["usename"];
if($name === 'hunger'){
$ret = 1;
}else{
$ret = 0;
}
echo json_encode($ret);
?>
HTML预览地址：http://book.xxxx.com/test/%E6%9D%8E%E5%BD%A9/renwu24/3/renwu24_3.html
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
