• ajax 是什么？有什么作用？
• ajax是Asynchronous JavaScript + XML的簡寫。是一項(xiàng)能夠向服務(wù)器請求額外的數(shù)據(jù)而無須重新加載頁面的技術(shù)。
• 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？(npm install -g server-mock) 知識點(diǎn)視頻-如何 mock 數(shù)據(jù)
• 注意事項(xiàng)：
  1 約定數(shù)據(jù)格式。
  1 根據(jù)功能制定前后端接口，約定參數(shù)和返回值。
  2 根據(jù)接口構(gòu)建Mock Server工程及其部署。
  3 前后端獨(dú)立開發(fā)，前端向Mock Server發(fā)送請求，獲取模擬的數(shù)據(jù)進(jìn)行開發(fā)和測試。
  4 前后端都完成后，前后端連接調(diào)試
• Mock Server可以部署在本地，也可以部署到遠(yuǎn)程服務(wù)器。
  1 把Mock Server工程部署到一個遠(yuǎn)程遠(yuǎn)程服務(wù)器上，前端開發(fā)的時候向該服務(wù)器發(fā)請求。
  2 把Mock Server克隆到本地，開發(fā)的時候，開啟前端工程服務(wù)器和Mock Server，所有的請求都發(fā)向本地服務(wù)器，獲取到Mock數(shù)據(jù)。
• 點(diǎn)擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復(fù)點(diǎn)擊?
• 設(shè)置一個變量flag用來判斷按鈕的點(diǎn)擊狀態(tài)，當(dāng)用戶點(diǎn)擊按鈕時flag變量被賦值為點(diǎn)擊狀態(tài)，直到ajax完成后flag變量被重新賦值為未點(diǎn)擊狀態(tài)，可再進(jìn)行點(diǎn)擊。

        var flag = 0;//未點(diǎn)擊狀態(tài)
        el.addEventListener('click', function(){
            if (flag) { return; }
            flag = 1;//點(diǎn)擊狀態(tài)
                ajax({
                    //代碼。。。
                    succss:function() {
                        flag = 0;//ajax處理完畢重新賦值為點(diǎn)擊狀態(tài)
                        //代碼。。。
                    }
                    error:function() {
                        flag = 0;//ajax處理完畢重新賦值為點(diǎn)擊狀態(tài)
                        //代碼。。。
                    }
                    //代碼。。。
                })
        })

代碼

• 封裝一個 ajax 函數(shù)，能通過如下方式調(diào)用

        function ajax(opts){
            var xmlhttp = new XMLHttpRequest();
            xmlHttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {//執(zhí)行四次握手，2000為成功
                    var json = JSON.parse(xmlhttp.responseText);//解析返回的數(shù)據(jù)
                    opts.success(json);
                }
                if (xmlhttp.readyState == 4 && xmlhttp.status == 404) {//四次握手后才進(jìn)行404判斷，不會出現(xiàn)多次請求
                    opts.error();
                }
            }
            var dataStr = '';
            for (var key in opts.data) {
                dataStr += key + '=' + opts.data[key] + '&';//遍歷data用&分隔
            }
            dataStr = dataStr.substr(0, dataStr.length - 1);//去掉最后一位的&

            if (opts.type.toLowerCase() == 'post') {
                xmlhttp.open(opts.type, opts.url, true);
                xmlhttp.setRequestHeader('Content-type' , 'application/x-www-form-urlencoded');//post增加頭部識別格式
                xmlhttp.send(dataStr);
            }

            if (opts.type.toLowerCase() == 'get') {
                xmlhttp.open(opts.type, opts.url + '?' +dataStr, true);
                xmlhttp.send();
            }
            
        }
        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}  dealwith(ret)
                },
                error: function(){
                   console.log('出錯了')
                }
            })//ajax函數(shù)，括號內(nèi)的為參數(shù)
        });

• 實(shí)現(xiàn)如下加載更多的功能。
  效果如下: http://jrgzuoye.applinzi.com/作業(yè)安排/jscode/JS9-jqueryajax/1.html
  第二題新浪云地址
• 實(shí)現(xiàn)注冊表單驗(yàn)證功能
  效果如下:http://jrgzuoye.applinzi.com/作業(yè)安排/jscode/JS7-ajax/3.html
  第三題新浪云地址
  本博客版權(quán)歸 本人和饑人谷所有，轉(zhuǎn)載需說明來源