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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容