ajax 基础知识问答

一、问答

（一）、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

**本文版权归本人即简书笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *

最后编辑于：2019.12.25 13:48:31

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,324评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,303评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,192评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,555评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,569评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,566评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,927评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,583评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,827评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,590评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,669评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,365评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,941评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,928评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,159评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,880评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,399评论 2赞 342

ajax 基础知识问答

一、问答

（一）、ajax 是什么？有什么作用？

（二）、前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？(npm install -g server-mock)

（三）、点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

二、代码

以下所有代码均使用XAMPP在本地测试通过！！！

（一）、封装一个 ajax 函数，能通过如下方式调用

（二）、实现如下加载更多的功能。

（三）、实现注册表单验证功能

推荐阅读更多精彩内容