新手學習ajax

時間 2019-12-05

標籤新手學習 ajax 欄目 Ajax 简体版

原文原文鏈接

對於前端新手的我來講，學習ajax的過程有點痛苦。由於以前的學習全是隻與前端有關的像css、js呀這些都還不涉及與後臺數據交互。前段時間用JS作了一個2048小遊戲。算是JS入門了用了不少排序相關的知識算法。
而後學習ajax看了不少書以爲仍是有些懵。多是我看的有點雜。HTTP協議、json、XML甚至還去看了點node.js
仍是沒把ajax搞清楚。不過還好在老師的工做室裏，老師把他的服務器借給了用。我在他的服務器裏創建了個人文件夾。哈哈哈今天總算明白了點。
今天整理一下javascript

關於ajax

1.AJAX 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。
2.經過在後臺與服務器進行少許數據交換，AJAX 能夠使網頁實現異步更新。這意味着能夠在不從新加載整個            
  網頁的狀況下，對網頁的某部分進行更新。
3.傳統的網頁（不使用 AJAX）若是須要更新內容，必須重載整個網頁頁面。

使用ajax

1.你得有一個服務器
2.服務器上放一個文件（新手用txt就行了，隨便寫點啥）
3.一個HTML前端頁面
4.一個JS文件css

咱們來作一個小實驗，ajax請求服務器上的text文件
創建ajax.htmlhtml

<!doctype html>
 <html>
  <head>
      <meta charset="utf-8"/>
      <script src="ajax.js" charset="utf-8"></script>
      </head>
      <body>
          <button type="button"  onclick="show()">請求數據</button>
         <script src="ajax.js"></script>
         <script>
           function show(){
             Ajax('read.txt?datetime=new Date.getTime ',function(str){alert(str);},function(){alert('失敗了');})
           };
         </script>
      </body>
 </html>

再來是ajax.js前端

function Ajax(url,fnSucc,fnFaild)
             {
                  //1.建立ajax對象
                if(window.XMLHttpRequest)
                 {// code for IE7+, Firefox, Chrome, Opera, Safari
                      var oAjax=new XMLHttpRequest();
                 }
                else
                 {// code for IE6, IE5
                     var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
                 }
                 //2.連接服務器（打開服務器的鏈接）
                 //open(方法，文件名，異步傳輸)
                 oAjax.open('GET',url,true);
                 //3.發送
                 oAjax.send();
                 //4.接收返回
                 oAjax.onreadystatechange=function()
                    {
                      if (oAjax.readyState==4)
                      {
                        if(oAjax.status==200)
                          {
                            fnSucc(oAjax.responseText);
                          }
                       else
                          {
                           fnFaild(oAjax.status);
                          }
                      };
                 };
              }

read.text
(隨便寫點啥就好)
我是你的瑞雪呀！！啦啦啦這是ajax請求的數據java