ajax實(shí)戰(zhàn)

ajax實(shí)戰(zhàn)

ajax 是什么？有什么作用？

  • ajax 是什么
    AJAX的全稱是Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
    ajax不是新的編程語言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。ajax是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù)，在不重新加載整個(gè)頁面的情況下?！　?br> ajax是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)?！　?br> ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換。

  • 作用
    ajax可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。而傳統(tǒng)的網(wǎng)頁（不使用ajax）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁面?！　?br> ajax的應(yīng)用使用支持以上技術(shù)的web瀏覽器作為運(yùn)行平臺(tái)。這些瀏覽器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式對(duì)象，也不支持XSLT。　　
    ajax前景非常樂觀，可以提高系統(tǒng)性能，優(yōu)化用戶界面。AJAX現(xiàn)有直接框架AjaxPro，可以引入AjaxPro.2.dll文件，可以直接在前臺(tái)頁面JS調(diào)用后臺(tái)頁面的方法。但此框架與FORM驗(yàn)證有沖突。另微軟也引入了AJAX組建，需要添加AjaxControlToolkit.dll文件，可以在控件列表中出現(xiàn)相關(guān)控件。

  • 優(yōu)點(diǎn)和缺點(diǎn)
    優(yōu)點(diǎn)：

    1. 最大的一點(diǎn)是頁面無刷新，用戶的體驗(yàn)非常好。
    2. 使用異步方式與服務(wù)器通信，具有更加迅速的響應(yīng)能力。。
    3. 可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。并且減輕服務(wù)器的負(fù)擔(dān)，ajax的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請(qǐng)求，和響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)。
    4. 基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載插件或者小程序。
    5. ajax可使因特網(wǎng)應(yīng)用程序更小、更快，更友好。

    缺點(diǎn)：

    1. ajax不支持瀏覽器back按鈕。
    2. 安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。
    3. 對(duì)搜索引擎的支持比較弱。
    4. 破壞了程序的異常機(jī)制。
    5. 不容易調(diào)試。
前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)
  • 前后端開發(fā)聯(lián)調(diào)需要注意
    1. 約定好請(qǐng)求方法
    2. 約定接口實(shí)現(xiàn)使用哪種方式:get/post
    3. 約定request參數(shù)的name,類型(格式)
    4. 約定response的類型(格式)格式: 字符串/數(shù)組/對(duì)象...
  • 如何 mock 數(shù)據(jù)
    1. mock數(shù)據(jù)指的是在后端開發(fā)沒有完成時(shí)，前端可以通過mock方法搭建本地服務(wù)器，模擬后臺(tái)數(shù)據(jù)來實(shí)現(xiàn)數(shù)據(jù)交互的效果
    2. 可安裝xampp在本地搭建(php等)服務(wù)器，也可以安裝server-mock，這樣不需要特地去寫一個(gè)后臺(tái)的處理頁面文件來訪問數(shù)據(jù)
點(diǎn)擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復(fù)點(diǎn)擊?
  • 令用戶的點(diǎn)擊變得無效，請(qǐng)求未處理完成之前，拒絕再次請(qǐng)求，而請(qǐng)求到了并處理完之后，恢復(fù)到可請(qǐng)求狀態(tài)。
var pageIndex = 0
  //請(qǐng)求未處理完成之前防止重復(fù)點(diǎn)擊
  var isDataArrive = true
  btn.addEventListener("click",function(e){
    e.preventDefault()
    if(!isDataArrive){
      return;
    }
實(shí)現(xiàn)加載更多的功能，效果范例426，后端在本地使用server-mock來模擬數(shù)據(jù)

index代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>加載更多</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
     #ct li{
      list-style:none;
      border: 1px solid #ccc;
      padding: 10px;
      margin-top: 10px;
      cursor:pointer;
    
    }
    #ct li:hover{
        background-color: green;
    }
    #load-more{
      display: block;
      margin: 10px auto;
      text-align: center;
      cursor: pointer;
    }
    /*#load-more img{
      width: 40px;
      height: 40px;
    }*/
    .btn{
      display: inline-block;
      height: 40px;
      line-height: 40px;
      width: 80px;
      border: 1px solid #da6969;
      border-radius: 3px;
      text-align: center;
      text-decoration: none;
      color: #E27272;
    }
    .btn:hover{
      background: #3aca46;
      color: #fff;
    }
  </style>
</head>
<body>
  <ul id ="ct">
  </ul>
  <!-- <a href="javascript:void(0)"></a> undefined不跳轉(zhuǎn)-->
  <a href="#" id="load-more" class= "btn">加載更多</a>
</body>

<script>
  //獲取a鏈接
  var btn = document.querySelector("#load-more")
  var ct = document.querySelector("#ct")
  var pageIndex = 0
  //網(wǎng)速特別慢的時(shí)候,在數(shù)據(jù)到來之前防止重復(fù)點(diǎn)擊?
  var isDataArrive = true
  btn.addEventListener("click",function(e){
    e.preventDefault()
    if(!isDataArrive){
      return;
    }
    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function(){
      if (xhr.readyState === 4) {
        if (xhr.status === 200 || xhr.status === 304) {
          var result = JSON.parse(xhr.responseText)
          var fragment = document.createDocumentFragment()
          for (var i = 0; i < result.length; i++) {
            var node = document.createElement("li")
            node.innerText = result[i]
            fragment.appendChild(node)
          }
          //插入li
          ct.appendChild(fragment)
          //數(shù)字每次變化5
          pageIndex += 5
        }else{
          alert("出錯(cuò)啦")
        }
        isDataArrive = true
      }
    } 
    xhr.open("get","/loadMore?index="+pageIndex+"&length=5",true)
    xhr.send()
    isDataArrive = false
  })
</script>
</html>

模擬后端代碼

//服務(wù)端  router.js

app.get('/loadMore', function(req, res) {

  var curIdx = req.query.index
  var len = req.query.length
  var data = []
  for(var i = 0; i < len; i++) {
    data.push('新聞' + (parseInt(curIdx) + i))
  }
  res.send(data);
});
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,695評(píng)論 19贊 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,326評(píng)論 25贊 708
  • 1. ajax 是什么？有什么作用？ AJAX即“Asynchronous JavaScript and XML”...
    饑人谷_Jack閱讀 247評(píng)論 0贊 0
  • 穿過雨，跨過陰霾的壓抑。又迎來雨的洗禮， 越來接近的足跡。列車的飛馳，窗外雨如淚滴掛落，劃過一道道痕跡在玻璃上。一...
    海陌宸閱讀 238評(píng)論 1贊 0
  • 教學(xué)樓里的似乎要帶來關(guān)于你的消息的電扇，呼啦呼啦的旋著，突如其來的塵埃，讓誰迷了眼？ 伴著黃昏，相識(shí)了大半年的大堯...
    別清歡閱讀 256評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容