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

**本文版權歸本人即簡書筆名：該賬戶已被查封 所有，如需轉載請注明出處。謝謝！ *

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容