整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          ajax一切正常卻出不來結果怎么辦?

          用jQuery可以將結構(Html)、美化(Css)與交互(JavaScript)的部分有效的分離,從而讓頁面得到良好的可讀性。

          利用jQuery開發程序的步驟如下:

          1、將jquery-1.11.3.js 復制到工程的js目錄下

          2、 在當前頁面利用<script>標簽引入jquery-1.11.3.js

          3、在引入該js后,我們的程序中就增加了一個內置對象jQuery,這是jQuery的核心對象,同時jQuery對象還可以使用美元符號$進行替

          4、在引入后<script>標簽內編寫jQuery代碼

          文檔就緒函數

          文檔就緒函數是jQuery中最重要的一個函數,因為它可以極大地提高web應用程序的響應速度。

          簡單地說,這個方法純粹是對向window.load事件注冊事件的替代方法。通過使用這個方法,可以在DOM載入就緒能夠讀取并操縱時立即調用你所綁定的函數,而99.99%的JavaScript函數都需要在那一刻執行。

          文檔就緒函數的使用方法

          完整方式: $(document).ready(fn) 或者jQuery(document).ready(fn)

          簡寫方式: $(fn)

          其中參數fn是指一個函數,代表了頁面DOM元素加載完成后要執行的代碼.

          請確保在 <body> 元素的onload事件中沒有注冊函數,否則不會觸發$(document).ready()事件。

          可以在同一個頁面中無限次地使用$(document).ready()事件。其中注冊的函數會按照(代碼中的)先后順序依次執行。

          案例

          [html] view plain copy

          1. <body>
          2. <!-- 添加頁面布局 -->
          3. <div>
          4. <table border="1">
          5. <tr style="height: 40px;display: none;">
          6. <td style="width: 100px">商品id</td>
          7. <td style="width: 150px">
          8. <input type="text" id="id" value="">
          9. </td>
          10. </tr>
          11. <tr style="height: 40px;">
          12. <td style="width: 100px">商品分類</td>
          13. <td style="width: 150px">
          14. <select id="cate" onchange="change()">
          15. <option>---請選擇---</option>
          16. </select>
          17. </td>
          18. </tr>
          19. <tr style="height: 40px;">
          20. <td style="width: 100px" >商品品牌</td>
          21. <td style="width: 150px">
          22. <select id="brand">
          23. <option>---請選擇---</option>
          24. </select>
          25. </td>
          26. </tr>
          27. <tr style="height: 40px;">
          28. <td style="width: 100px" >商品名稱</td>
          29. <td style="width: 150px" >
          30. <input id="name" type="text">
          31. </td>
          32. </tr>
          33. <tr style="height: 40px;">
          34. <td style="width: 100px" >商品描述</td>
          35. <td style="width: 150px">
          36. <textarea rows="5" cols="10" id="desc"></textarea>
          37. </td>
          38. </tr>
          39. <tr style="height: 40px;">
          40. <td style="width: 100px" >商品價格</td>
          41. <td style="width: 150px" >
          42. <input type="text" id="price">
          43. </td>
          44. </tr>
          45. <tr style="height: 40px;">
          46. <td colspan="2" style="text-align: center;">
          47. <button onclick="tj()">提交</button>
          48. <button >重置</button>
          49. <button onclick="gbtj()">關閉</button>
          50. </td>
          51. </tr>
          52. </table>
          53. </div>
          54. </body>
          55. <script type="text/javascript">
          56. /* 就緒函數,加載分類列表 */
          57. $(document).ready(function(){
          58. alert("11");
          59. $.ajax({
          60. type: "POST",
          61. url: "goodsController?method=getCateList",
          62. dataType:"json",
          63. data: "",
          64. success: function(obj){
          65. var fl="";
          66. for(var i=0;i<obj.length;i++){
          67. fl+="<option value='"+obj[i].id+"'>"+obj[i].cat_name+"</option>";
          68. }
          69. $("#cate").html(fl);
          70. }
          71. });
          72. });
          73. </script>

          這種時候就會出現ajax沒有觸發的情況,這時將<script></script>放在<body></body>之前,才會正常顯示。

          當遇到代碼沒有問題,可結果就是運行不出來時,不妨試一下改變<script></script>的順序。

          習大綱

          基礎學習路徑

          1.什么是AJAX

          1.1概念

          AJAX是Asynchronous javascript and xml 的縮寫,表示異步javascript 和 xml ,是一種交互式網頁應用開發技術。

          AJAX是一些老技術的新應用, 應用到了html css javascript dom , 以XMLHttpRequest為技術核心實現網頁異步數據傳輸。

          1.2特點

          最大特點就是:網頁不用刷新進行數據傳輸

          1.3應用場景

          用戶注冊

          AJAX分頁效果

          圖片加載瀑布流效果

          2.AJAX工作流程

          傳統的數據提交方式

          AJAX數據提交方式

          通過上述對比,客戶端用戶部分減少了2個流程,交給了ajax去處理,那么就減少了用戶的等待時間,用戶體驗大大的提升

          3.AJAX的優點

          ? 減少服務器帶寬,按需獲得數據

          注意:在一些有列表展示功能的地方優勢特別突出

          ? 無刷新更新頁面,減少用戶的實際和心理等待時間

          注:用戶注冊,用戶登錄。多數據信息的展示

          ? 更好的用戶體驗,傳統數據提交會刷新頁面,易丟失用戶填寫數據

          ? 主瀏覽器都支持

          二、AJAX使用

          1.創建ajax對象

          XHR = new XMLHttpRequest();

          2.建立鏈接

          1.1語法

          創建請求頭使用OPEN,主要實現(請求類型,請求地址)

          對象.open(請求類型GET/POST,請求地址,[同步true/異步false]);

          默認:同步 True

          1.2代碼


          //創建AJAX對象
             var XHRObj = new XMLHttpRequest();
             //創建請求頭
             XHRObj.open('GET','demo.php');



          3.發送請求

          1.1語法

          主要實現請求服務器操作

          對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);

          1.2代碼


          【HTML代碼】
          <script type="text/javascript">
             //創建AJAX對象
             var XHRObj = new XMLHttpRequest();
             //創建請求頭
             XHRObj.open('GET','demo.php');
             //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
             XHRObj.send();
             
          </script>
          【PHP代碼】
          <?php
          echo 'test';


          腳下留心:

          一定要在服務器目錄下面運行AJAX-發送請求.html,不能直接用瀏覽器瀏覽該文件

          4.響應請求(接受服務器返回的信息)

          1.1語法

          對象.responseText (獲取服務器響應的字符串數據)

          對象.responseXML(獲取服務器響應的xml數據)

          1.2代碼

          <script type="text/javascript">
             //創建AJAX對象
             var XHRObj = new XMLHttpRequest();
             //創建請求頭
             XHRObj.open('GET','demo.php');
             //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
             
             XHRObj.send();
             //alert返回的數據
             alert(XHRObj.responseText);
             
          </script>

          案例運行結果

          腳下留心:無法響應數據

          原因:在AJAX沒有完成請求這個時候是沒有返回值的,所以獲取數據是沒有結果的。

          解決方法:通過判斷reaystate == 4 是否AJAX請求完成

          1.3判斷服務器是否響應成功

          Onreadystatechange 作用:ajax在請求的過程中發生任何狀態的變化都會調用該方法

          Readystate 作用:返回ajax的請求狀態

          狀態說明:

          最終代碼:以及結果

          思考:為什么沒有打印0~4

          <script type="text/javascript">
             //創建AJAX對象
             var XHRObj = new XMLHttpRequest();
             //創建請求頭
             XHRObj.open('GET','demo.php');
             //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
             console.log(XHRObj.readyState);
             //發送請求
             XHRObj.send();
             //當請求狀態發送變化時ajax會自動調用該方法onreadystatechange
             XHRObj.onreadystatechange=function(){
                 console.log(XHRObj.readyState);
                 if(XHRObj.readyState==4){
                      console.log(XHRObj.responseText);
                 }
                 
             }
             console.log(XHRObj.readyState+'sdf');  
          </script>

          說明:

          程序是從上往下進行的, 里面的代碼是等發送異步請求完了才去執行的。

          狀態0是無法獲取的,因為實例化AJAX的對象,然而監聽需要對象對象里面的屬性來完成,所以0裝就是實例化對象的時候。

          思考:避免接口寫錯

          例如:

          在實際使用中,我們為了只有在請求的接口正確的時候獲取相應的數據,一般我們要判斷返回的HTTP狀態是否正確,

          使用:

          對象.status == 200

          <script type="text/javascript">
             //創建AJAX對象
             var XHRObj = new XMLHttpRequest();
             //創建請求頭
             XHRObj.open('GET','demo1.php');
             //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
          //    console.log(XHRObj.readyState);
             //發送請求
             XHRObj.send();
             //當請求狀態發送變化時ajax會自動調用該方法onreadystatechange
             XHRObj.onreadystatechange=function(){
          //        console.log(XHRObj.readyState);
                 if(XHRObj.readyState == 4 && XHRObj.status == 200){
                      console.log(XHRObj.responseText);
                 }
          //        else{
          //            //以郵件或者短信的形式發送通網站管理員
          //            alert('服務器錯誤,很忙......');
          //        }
                 
             }
             
          //    console.log(XHRObj.readyState+'sdf');
          </script>


          5.案例聯系-檢查用戶名是否存在

          1.1案例需求

          判斷用戶名admin是否存在,當存在的時候返回【不可用】,當不存在的時候返回【可用】

          1.2完成思路

          明確需求:

          第一步:給按鈕增加點擊事件

          第二步:獲取用戶輸入的值username

          第三步:使用AJAX將內容發送給服務器端PHP文件

          第四步:編寫PHP文件checkuser.php 判斷用戶是否存在,返回結果

          第五步:將PHP返回的結果彈出來

          1.3HTML代碼

          <!--

          第一步:給按鈕增加點擊事件

          第二步:獲取用戶輸入的值username

          第三步:使用AJAX將內容發送給服務器端PHP文件

          第四步:編寫PHP文件checkuser.php 接受參數,并且判斷用戶是否存在,返回結果

          第五步:將PHP返回的結果彈出來

          -->


          <script type="text/javascript">
             //按鈕綁定事件,給input增加ID屬性
            var checkObj = document.getElementById('check');
            checkObj.onclick = function(){
                var username = document.getElementById('username').value;
                //創建ajax對象
                var XHRObj = new XMLHttpRequest();
                //創建請求頭,設置請求發送的地址和類型,并且將參數傳遞給服務端
                XHRObj.open('get','check.php?username='+username);
                //獲取服務器端返回的數據  
                XHRObj.onreadystatechange = function(){
                    if(XHRObj.readyState == 4 && XHRObj.status == 200){
                        alert(XHRObj.responseText);
                    }
                }
                //發送請求
                XHRObj.send();
               
            }
             
          </script>


          1.4PHP代碼


          <?php
          //定義一個用戶數組
          $user = array('admin','xiaoming','xiaohong','xiaoqiang');
          //獲取傳遞的參數
          $username = $_GET['username'];
          //判斷用戶是否存在在數組中
          if(in_array($username,$user)){
             echo '不可用';
          }else{
             echo '可用';
          }

          進化版本

          1)進化要求

          當用戶名可用的時候后面增加√說可用,當用戶名不可用的時候出現一個×提示當前用戶名太火,請換一個

          HTML代碼

          <style>
             .error{
                 color: red;
                 font-size: 14px;
             }
             .green{
                 color: green;
                 font-size: 14px;
             }
             
          </style>
          <body>
          <!--   <span class="error">×此用戶名太首歡迎,請換一個</span>-->
          <!--   <span class="green">√恭喜你,該用戶可用</span>-->
             <table border="1">
                 <th colspan="2">用戶注冊</th>
                 <tr>
                     <td><input id="username" name="username" type="text"/><div id='error'></div></td>
                     <td><input id="check" type="button" value="檢測用戶"/></td>
                 </tr>
                 
             </table>
          </body>
          <!--
          第一步:給按鈕增加點擊事件
          第二步:獲取用戶輸入的值username
          第三步:使用AJAX將內容發送給服務器端PHP文件
          第四步:編寫PHP文件checkuser.php 接受參數,并且判斷用戶是否存在,返回結果
          第五步:將PHP返回的結果彈出來
          -->
          <script type="text/javascript">
             //按鈕綁定事件,給input增加ID屬性
            var checkObj = document.getElementById('check');
            checkObj.onclick = function(){
                var username = document.getElementById('username').value;
                //創建ajax對象
                var XHRObj = new XMLHttpRequest();
                //創建請求頭,設置請求發送的地址和類型,并且將參數傳遞給服務端
                XHRObj.open('get','check.php?username='+username);
                //獲取服務器端返回的數據  
                XHRObj.onreadystatechange = function(){
                    if(XHRObj.readyState == 4 && XHRObj.status == 200){
          //               alert(XHRObj.responseText);
                        if(XHRObj.responseText =='可用'){
                             document.getElementById('error').innerHTML='<span class="green">√恭喜你,該用戶沒有被注冊</span>';
                        }else{
                            document.getElementById('error').innerHTML=' <span class="error">×此用戶名太首歡迎,請換一個</span>';
                           
                        }
                    }
                }
                //發送請求
                XHRObj.send();
               
            }
             
          </script>


          三、發送GET/POST請求

          1.POST和GET的區別

          數據方面:GET受瀏覽器的影響

          POST 原則上是不受限制的,可以通過PHP配置POST_MAX_SIZE進行更改

          安全方面:POST比GET要安全

          文件上傳:GET不能進行文件上傳

          2.Ajax之GET請求(加參數)

          1.1實現方式

          說明:在請求地址后面增加參數,例如:demo.php?a=111&b=222&c=333

          1.2代碼


          【HTML代碼】
          <script type="text/javascript">
             //創建AJAX對象
             var XHRObj = new XMLHttpRequest();
             //創建請求頭,請求方式,請求鏈接
             XHRObj.open('get','test.php?a=111&b=222&c=333');
             //發送請求
             XHRObj.send();
          </script>
          【PHP代碼】
          <?php
          var_dump($_GET);


          3.AJAX之POST請求

          1.1實現方式

          Open(‘POST’,請求地址);

          設置發送的數據格式,采用URL編碼格式

          對象.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);

          對象.send(發送的數據);

          1.2代碼

          <script type="text/javascript">
             //創建AJAX對象
             var XHRObj = new XMLHttpRequest();
             XHRObj.onreadystatechange = function() {
             if (XHRObj.readyState == 4) {
               alert(XHRObj.responseText);
             }
           }
             //創建請求頭,請求方式,請求鏈接
             XHRObj.open('post','test.php');
             //發送post的數據
             var postData = 'name=123123&age=rrr';
             
             //設置數據編碼格式,使用URL編碼格式
             XHRObj.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
             
             //發送請求
             XHRObj.send(postData);
          </script>


          【PHP代碼】

          <?php

          var_dump($_POST);

          效果

          4.練習:表單無刷新數據錄入

          四、AJAX同步異步請求

          1.概念

          同步:等待服務器響應完成在執行下一段JS代碼 (阻塞模式)

          異步:不等服務器響應完成直接執行下一段JS代碼(非阻塞模式)

          2.驗證同步

          設置open(方式,請求地址,false/同步);

          HTML【代碼】

          <script type="text/javascript">
             //創建AJAX對象
             var XHRObj = new XMLHttpRequest();
             //創建請求頭
             XHRObj.open('GET','demo.php',false);
             //時時監控
             XHRObj.onreadystatechange = function(){
                 if(XHRObj.readyState == 4){
                     console.log('111');
                 }
             }
             //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
             XHRObj.send();
             console.log('js執行完成');
             
          </script>


          【PHP代碼】

          為了增加延遲效果使用sleep


          <?php
          sleep(8);
          echo 'test';


          3.驗證異步


          【HTML代碼】
          <script type="text/javascript">
             //創建AJAX對象
             var XHRObj = new XMLHttpRequest();
             //創建請求頭
             XHRObj.open('GET','demo.php');
             //時時監控
             XHRObj.onreadystatechange = function(){
                 if(XHRObj.readyState == 4){
                     console.log('111');
                 }
             }
             //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
             XHRObj.send();
             console.log('js執行完成');
             
          </script>

          【PHP代碼】


          <?php
          sleep(8);
          echo 'test';

          五、解決緩存問題

          1.緩存分析

          我們再瀏覽一些網站的時候瀏覽器為了方便用戶再次訪問的時候增加用戶訪問體驗會將一些靜態資源文件緩存到本地

          緩存的位置在:

          選中IE瀏覽器右鍵

          打開

          靜態緩存目錄就出現再這里面了

          說明:IE存在緩存

          2.解決方案

          1.1隨機數

          代碼設置:?t=Math.random()

          缺點:

          1.不能保證URL絕對唯一

          2.產生大量緩存文件

          1.2時間

          代碼設置:?t=new Date().getTime(); //取得毫秒時間戳

          優點:保證URL絕對唯一

          缺點:依然產生大量緩存文件

          1.3設置請求頭

          代碼設置:對象.setRequestHeader("If-Modified-Since","0");

          原理分析:

          If-Modified-Since是標準的HTTP請求頭標簽,在發送HTTP請求時,把瀏覽器端緩存頁面的最后修改時間一起發到服務器去,服務器會把這個時間與服務器上實際文件的最后修改時間進行比較。

          如果時間一致,那么返回HTTP狀態碼304(不返回文件內容),客戶端接到之后,就直接把本地緩存文件顯示到瀏覽器中。

          如果時間不一致,就返回HTTP狀態碼200和新的文件內容,客戶端接到之后,會丟棄舊文件,把新文件緩存起來,并顯示到瀏覽器中。

          1.4設置相應頭

          代碼設置:header("Cache-Control: no-cache, must-revalidate");

          原理分析:

          利用php的header函數向響應頭中寫數據,寫的是告訴客戶端:不要對本次的結果進行緩存。

          這種做法,可以從根本上解決緩存問題,不產生任何緩存文件。

          六、返回數據格式

          1.數據格式分類

          普通字符串文本格式:responseText

          XML數據格式:responseXML

          JSON 字符串數據格式:responseText (在實際工作中用到最多,最廣泛的格式)

          2.返回Text數據處理

          1.1HTML代碼

          <script type="text/javascript">
             //創建AJAX對象
             var XHRObj = new XMLHttpRequest();
             //創建請求頭
             XHRObj.open('GET','text.php');
             //時時監控
             XHRObj.onreadystatechange = function(){
                 if(XHRObj.readyState == 4 && XHRObj.status == 200){
                     document.getElementById('content').innerHTML=XHRObj.responseText;
                 }
             }
             //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
             XHRObj.send();
             
          </script>
          <body>
             <div id="content"></div>
          </body>

          1.2PHP代碼

          <?php

          echo '<h1>返回的文本</h1>';

          最終效果

          3.返回XML數據處理

          1.1HTML代碼

          <script type="text/javascript">
             //創建AJAX對象
             var XHRObj = new XMLHttpRequest();
             //創建請求頭
             XHRObj.open('GET','xml.php');
             //時時監控
             XHRObj.onreadystatechange = function(){
                 if(XHRObj.readyState == 4 && XHRObj.status == 200){
                    var xmlObj = XHRObj.responseXML;
                     //以前獲取html文檔我們使用  document.getElementByTagName()
                     books = xmlObj.getElementsByTagName('book');
                     for(i=0;i<books.length;i++){
          //獲取第二級的值我們使用childen 方法
                         for(j=0;j<books[i].children.length;j++){
                             
                             console.log(books[i].children[j].innerHTML);
                         }
                     }
                 }
             }
             //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
             XHRObj.send();
             
             
          </script>

          1.2PHP代碼

          首先確保PHP寫的xml文件能再瀏覽器端訪問

          <?php
          header('Content-Type:text/xml; charset=utf-8');
          echo '<?xml version="1.0" encoding="utf-8"?>
          <books>
             <book>
                 <name>西游記</name>
                 <price>50.12</price>
             </book>
             
             <book>
                 <name>三國演義</name>
                 <price>876.12</price>
             </book>
             
          </books>
          ';

          4.返回JSON數據處理

          1.1什么是JSON數據

          JSON(javascript Object Notation js 對象標記) 是一種輕量級的數據交換格式。

          1.2JSON數據優勢

          數據格式比較簡單,易于讀寫, 格式都是壓縮的,占用帶寬小

          易于解析這種語言,客戶端JavaScript可以簡單的通過eval()進行JSON數據的讀取

          因為JSON格式能夠直接為服務器端代碼使用, 大大簡化了服務器端和客戶端的代碼開發量, 但是完成的任務不變, 且易于維護

          1.3服務器端JSON生成和解析

          PHP端生成JSON數據使用:json_encode(數組數據格式);

          PHP端解析JSON數據使用:json_decode(待解碼數據,true/false);

          說明:false 解碼出來的數據是一個對象,true,解碼出來的是一個數組

          1.4客戶端解析JSON數據

          由于我們返回值的處理使用的是responseText 格式

          ? JSON.parse()

          語法格式:JSON.parse(字符串);

          作用:從一個字符串中解析出json數據對象

          前提:字符串必須是json格式的字符串

          ? Eval


          七、綜合案例-用戶注冊

          1.需求

          用戶會員注冊功能,用戶填寫好根據規則進行驗證,如果驗證成功提示用戶注冊成功。

          驗證規則:

          1.用戶名不能為空

          2.用戶名必須是由數字和字母組成,而且是在6~8位之間

          2.HTML代碼


          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
          <head>
             <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
             <title>AJAX-用戶注冊</title>
          </head>
          <style>
             dd{float: left;}    
          </style>
          <body>
            <div>
                <dl>
                    <dd>用戶名</dd>
                    <dd><input type="text" name="username" id="username"></dd>
                    <dd><input type="button" id="regbtn"  value="注冊"></dd>
                </dl>
            </div>
             
          </body>
          <script type="text/javascript">
             
             //給注冊按鈕增加click事件
             
             var regbtn = document.getElementById('regbtn');
             
             regbtn.onclick = function(){
                 
                 //獲取用戶輸入的值
                 var username = document.getElementById('username').value;
                 
                  //創建AJAX對象
                 var XHRObj = new XMLHttpRequest();
                 //打開對象
                 XHRObj.open('get','reg.php?username='+username);
                 //實時監控AJAX運行狀態
                 XHRObj.onreadystatechange = function(){
                     //判斷服務器是否響應成功
                     if(XHRObj.readyState==4 && XHRObj.status == 200){
                         //將json數據轉換成對象
                         jsonObj = JSON.parse(XHRObj.responseText);
                         //判斷用戶是否操作成功進行頁面跳轉
                         if(jsonObj.state ==1){
                             location.href='success.html';
                             
                         }else{
                             alert(jsonObj.msg);
                         }
                     }
                 }
                 //發送請求
                 XHRObj.send();
                 
             }
             
           
             
             
          </script>
          </html>


          3.PHP代碼


          . 什么是Ajax ?

          a) 無刷新的數據讀取;

          2. 關于瀏覽器緩存:

          a) 緩存機制:根據地址來緩存,同樣地址只讀一次;

          b) 解決緩存困擾:在文件名后加上一個時間戳參數;保存每次讀取文件的路徑都不一樣,這樣瀏覽器就不會去緩存中拿而去讀新的;

          3. Ajax請求動態數據:

          a) 請求JSON文件;

          b) Ajax 從服務器上所讀取的所有東西都是以文本的形式存在的;

          c) eval的使用,將返回的string轉換成arr,或json;

          d) 配合DOM使用;

          4. eval_r(str):

          a) 接受一個字符串作為參數,這個字符串里面可以放任何JS代碼;

          b) eval可以計算字符串里的值;

          5. Ajax的原理:

          a) HTTP 請求:

          i. GET方式:安全性低、容量小,但便于分享,更適合獲取數據;(如: 瀏覽帖子)

          ii. POST方法:更適合上傳數據;(如:用戶注冊)

          iii. Get方式會緩存,因為要從服務器上讀東西;Post方式不會緩存東西的;

          6. Ajax請求服務器數據的4個步驟:

          a) 創建一個Ajax對象 (買個手機);

          i. 非IE6 : new XMLHttpRequest();

          ii. IE6 : new ActiveXObject("Microsoft XMLHTTP");

          b) 連接服務器(撥號);

          c) 發送請求,告訴服務器要什么(說話);

          d) 接收返回值(聽);

          7. Ajax對象創建的兼容處理:

          a) 用if (window.XMLHttpRequest) 取代if (XMLHttpRequest)

          b) 原理:

          i. 用一個不存在的變量: 出錯;

          ii. 用一個不存在的屬性:undefined;

          8. Ajax連接服務器:

          a) oAjax.open(方法,url, 是否為異步bool);

          b) 方法:大多用”Get”;

          c) 同步與異步:

          i. 同步:任何兩件事不能一塊兒做;

          ii. 異步: 多件事兒可以一起進行;Ajax天生就該工作在異步模式下的;

          9. Ajax發送請求:

          a) oAjax.send();

          10.Ajax接收服務器的返回信息:

          a) oAjax.onreadystatechange 事件:

          i. 它類似于window.onload;

          ii. 用來監控請求狀態;

          iii. 是當客戶端和服務器那邊有通信發生或有狀態變化的時候會來調用;

          iv. 客戶端和服務器的通信不是一步就完成的;

          v. oAjax.readyState屬性:告訴我們客戶端和服務器的通信發生到哪一步了; 4 代表完成;

          vi. oAjax.readyState == 4 , 只代表完成,不代表成功;

          vii. oAjax.status == 200 , 代表成功;

          viii. oAjax.status , 400多是客戶端錯誤, 500多是服務器錯誤, 300多是重定向;

          ix. oAjax.responseText , 就是取得服務器發回的內容;

          11.編寫Ajax庫:


          主站蜘蛛池模板: 激情内射亚洲一区二区三区爱妻 | 精品久久一区二区| 日日摸夜夜添一区| 国产欧美色一区二区三区| 日韩一区二区三区免费体验| 国内精品视频一区二区三区八戒 | 日本免费电影一区二区| 亚洲AV噜噜一区二区三区| 国产三级一区二区三区| 日本精品夜色视频一区二区| 国产在线观看一区二区三区| 亚洲国产一区二区三区| 精品国产一区二区三区久久| 中文精品一区二区三区四区| 国产未成女一区二区三区| 精品国产日韩亚洲一区| 亚洲福利一区二区精品秒拍| 视频一区在线播放| 久久亚洲一区二区| 成人一区二区三区视频在线观看| 亚洲中文字幕丝袜制服一区 | 中文字幕在线播放一区| 无码人妻一区二区三区一| 国产在线一区观看| 青青青国产精品一区二区| 精品无码成人片一区二区| 一区二区三区四区精品视频| 精品一区二区三区中文| 精品成人乱色一区二区| 99国产精品一区二区| 手机福利视频一区二区 | 亚洲AV噜噜一区二区三区| 国产一区二区三区高清视频 | 免费在线观看一区| 亚洲一区中文字幕在线电影网| 亚洲国模精品一区| 午夜DV内射一区区| 97精品国产一区二区三区| 制服丝袜一区二区三区| 成人在线一区二区| 精品国产一区二区三区在线|