1.ajax 是什么？有什么作用？

• AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML），是一種用于創建快速動態網頁的技術。傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面；AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸（HTTP 請求，核心對象XMLHTTPRequest），通過在后臺與服務器進行少量數據交換，可以使網頁實現異步更新。

2.前后端開發聯調需要注意哪些事情？后端接口完成前如何 mock 數據？

• 需要注意的事情

1. 前后端充分了解項目的需求
2. 前后端溝通設計接口，約定好數據格式 以及前端需要傳遞什么樣的參數，還有傳遞的方式，
3. 共同制定接口說明，出一個文檔
4. 前后端獨立開發，前端向Mock Server發送請求，獲取模擬的數據進行開發和測試
5. 前后端都完成后，前后端連接調試（前端修改配置向Real Server而不是Mock Server發送請求）。

• mock數據

1. 使用XAMPP等工具，搭建本地php服務器用，編寫php腳本提供臨時數據；
2. 使用mock.js生成模擬數據，攔截AJAX請求，并且返回模擬的數據進行測試；
3. 使用node server-mock，解決后端模板的渲染和AJAX接口的處理來模擬數據

3.點擊按鈕，使用 AJAX獲取數據，如何在數據到來之前防止重復點擊?

1. setTimeout + clearTimeout連續的點擊會把上一次點擊清除掉，也就是ajax請求會在最后一次點擊后發出去

2. disable 按扭

3. 用一個變量鎖定啊。用戶一點擊，flag變成false，再點也不發送請求，ajax成功以后flag設為true

      var lock= false;    //設置鎖變量； document.querySelector('.btn').addEventListener('click',function(){
      if(lock){        //如果有鎖存在，則不執行AJAX
        return;  
      }
        lock= true;      //上鎖
        ajax({
        url:'',
        type:'';
        data:{},
            success:function(ret){
        lock= false;  //解鎖 
          },
        error:function(){
        }
      });
    });
   

參考知乎

代碼題
1.封裝一個 ajax 函數，能通過如下方式調用

//封裝ajax
    function ajax(opts){
        //創建 XMLHttpRequest 對象
        var xhr=new XMLHttpRequest();
        //當請求被發送到服務器時，我們需要執行一些基于響應的任務。 每當 readyState 改變時，就會觸發 onreadystatechange 事件
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
            //將服務器返回的文本xhr.responseText轉換為JSON格式字符串
                var str=JSON.parse(xhr.responseText);
            //使用succss方法
            opts.succss(str);
                }
            if (xhr.status==404&&xhr.readyState==4) {
                //若請求失敗，調用error方法
                opts.error();
                }
            }
    

        //創建發送到服務器的數據
        var dataStr="";
        for(var key in opts.data){
            dataStr+=key+"="+opts.data[key]+"&";
            }
        dataStr= dataStr.substr(0,dataStr.length-1);
        dataStr+='&='+new Date().getTime();

        //判斷請求方式get or post
        if(opts.type.toLowerCase()=="get"){
            xhr.open("GET",opts.url+"?"+dataStr,true)
            xhr.send();
        }
        if(opts.type.toLowerCase()=="post"){
            xhr.open("POST",opts.url,true)
            //為了使post請求與提交web表單相同，將 Content-Type 頭部信息設置為 application/x-www-form-urlencoded來模仿表單提交功能（post必須的)
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send(dataStr);
        }
    }
        //ajax 對象 調用前面的函數
        document.getElementById('btn').addEventListener("click",function(){
            ajax({
                url:'phpajax.php',//后端接口地址
                type:"get",     // 類型， post 或者 get,
                data:{
                    username: 'xiaoming',
                    password: 'abcd1234'
                },
                succss:function(ret){
                    console.log(ret)         // {status: 0}
                },
                error:function(){
                    console.log("對不起，出錯了")
                }
            })
        })

2.代碼2-html
后端-php代碼

  <?php 
    $start=$_GET['start'];
      $add=$_GET['len'];
      $li=array();
  for($i=0;$i<$add;$i++){
    $li[$i]='內容'.($start+$i+1);
    };
    echo json_encode($li);
 ?>

3.代碼3
后端-php代碼

<?php 
    $name=$_GET['username'];
    if($name=="hunger"){
    echo 0;
    }else{
    echo 1;
   }
?>

代碼2和代碼3本地服務器測試通過

版權為饑人谷和作者所有，若轉發使用請注明出處.