整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          web前端ajax筆記之一

          習(xí)大綱

          基礎(chǔ)學(xué)習(xí)路徑

          1.什么是AJAX

          1.1概念

          AJAX是Asynchronous javascript and xml 的縮寫,表示異步j(luò)avascript 和 xml ,是一種交互式網(wǎng)頁應(yīng)用開發(fā)技術(shù)。

          AJAX是一些老技術(shù)的新應(yīng)用, 應(yīng)用到了html css javascript dom , 以XMLHttpRequest為技術(shù)核心實(shí)現(xiàn)網(wǎng)頁異步數(shù)據(jù)傳輸。

          1.2特點(diǎn)

          最大特點(diǎn)就是:網(wǎng)頁不用刷新進(jìn)行數(shù)據(jù)傳輸

          1.3應(yīng)用場(chǎng)景

          用戶注冊(cè)

          AJAX分頁效果

          圖片加載瀑布流效果

          2.AJAX工作流程

          傳統(tǒng)的數(shù)據(jù)提交方式

          AJAX數(shù)據(jù)提交方式

          通過上述對(duì)比,客戶端用戶部分減少了2個(gè)流程,交給了ajax去處理,那么就減少了用戶的等待時(shí)間,用戶體驗(yàn)大大的提升

          3.AJAX的優(yōu)點(diǎn)

          ? 減少服務(wù)器帶寬,按需獲得數(shù)據(jù)

          注意:在一些有列表展示功能的地方優(yōu)勢(shì)特別突出

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

          注:用戶注冊(cè),用戶登錄。多數(shù)據(jù)信息的展示

          ? 更好的用戶體驗(yàn),傳統(tǒng)數(shù)據(jù)提交會(huì)刷新頁面,易丟失用戶填寫數(shù)據(jù)

          ? 主瀏覽器都支持

          二、AJAX使用

          1.創(chuàng)建ajax對(duì)象

          XHR = new XMLHttpRequest();

          2.建立鏈接

          1.1語法

          創(chuàng)建請(qǐng)求頭使用OPEN,主要實(shí)現(xiàn)(請(qǐng)求類型,請(qǐng)求地址)

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

          默認(rèn):同步 True

          1.2代碼


          //創(chuàng)建AJAX對(duì)象
             var XHRObj = new XMLHttpRequest();
             //創(chuàng)建請(qǐng)求頭
             XHRObj.open('GET','demo.php');



          3.發(fā)送請(qǐng)求

          1.1語法

          主要實(shí)現(xiàn)請(qǐng)求服務(wù)器操作

          對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);

          1.2代碼


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


          腳下留心:

          一定要在服務(wù)器目錄下面運(yùn)行AJAX-發(fā)送請(qǐng)求.html,不能直接用瀏覽器瀏覽該文件

          4.響應(yīng)請(qǐng)求(接受服務(wù)器返回的信息)

          1.1語法

          對(duì)象.responseText (獲取服務(wù)器響應(yīng)的字符串?dāng)?shù)據(jù))

          對(duì)象.responseXML(獲取服務(wù)器響應(yīng)的xml數(shù)據(jù))

          1.2代碼

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

          案例運(yùn)行結(jié)果

          腳下留心:無法響應(yīng)數(shù)據(jù)

          原因:在AJAX沒有完成請(qǐng)求這個(gè)時(shí)候是沒有返回值的,所以獲取數(shù)據(jù)是沒有結(jié)果的。

          解決方法:通過判斷reaystate == 4 是否AJAX請(qǐng)求完成

          1.3判斷服務(wù)器是否響應(yīng)成功

          Onreadystatechange 作用:ajax在請(qǐng)求的過程中發(fā)生任何狀態(tài)的變化都會(huì)調(diào)用該方法

          Readystate 作用:返回ajax的請(qǐng)求狀態(tài)

          狀態(tài)說明:

          最終代碼:以及結(jié)果

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

          <script type="text/javascript">
             //創(chuàng)建AJAX對(duì)象
             var XHRObj = new XMLHttpRequest();
             //創(chuàng)建請(qǐng)求頭
             XHRObj.open('GET','demo.php');
             //發(fā)送請(qǐng)求  對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
             console.log(XHRObj.readyState);
             //發(fā)送請(qǐng)求
             XHRObj.send();
             //當(dāng)請(qǐng)求狀態(tài)發(fā)送變化時(shí)ajax會(huì)自動(dòng)調(diào)用該方法onreadystatechange
             XHRObj.onreadystatechange=function(){
                 console.log(XHRObj.readyState);
                 if(XHRObj.readyState==4){
                      console.log(XHRObj.responseText);
                 }
                 
             }
             console.log(XHRObj.readyState+'sdf');  
          </script>

          說明:

          程序是從上往下進(jìn)行的, 里面的代碼是等發(fā)送異步請(qǐng)求完了才去執(zhí)行的。

          狀態(tài)0是無法獲取的,因?yàn)閷?shí)例化AJAX的對(duì)象,然而監(jiān)聽需要對(duì)象對(duì)象里面的屬性來完成,所以0裝就是實(shí)例化對(duì)象的時(shí)候。

          思考:避免接口寫錯(cuò)

          例如:

          在實(shí)際使用中,我們?yōu)榱酥挥性谡?qǐng)求的接口正確的時(shí)候獲取相應(yīng)的數(shù)據(jù),一般我們要判斷返回的HTTP狀態(tài)是否正確,

          使用:

          對(duì)象.status == 200

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


          5.案例聯(lián)系-檢查用戶名是否存在

          1.1案例需求

          判斷用戶名admin是否存在,當(dāng)存在的時(shí)候返回【不可用】,當(dāng)不存在的時(shí)候返回【可用】

          1.2完成思路

          明確需求:

          第一步:給按鈕增加點(diǎn)擊事件

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

          第三步:使用AJAX將內(nèi)容發(fā)送給服務(wù)器端PHP文件

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

          第五步:將PHP返回的結(jié)果彈出來

          1.3HTML代碼

          <!--

          第一步:給按鈕增加點(diǎn)擊事件

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

          第三步:使用AJAX將內(nèi)容發(fā)送給服務(wù)器端PHP文件

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

          第五步:將PHP返回的結(jié)果彈出來

          -->


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


          1.4PHP代碼


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

          進(jìn)化版本

          1)進(jìn)化要求

          當(dāng)用戶名可用的時(shí)候后面增加√說可用,當(dāng)用戶名不可用的時(shí)候出現(xiàn)一個(gè)×提示當(dāng)前用戶名太火,請(qǐng)換一個(gè)

          HTML代碼

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


          三、發(fā)送GET/POST請(qǐng)求

          1.POST和GET的區(qū)別

          數(shù)據(jù)方面:GET受瀏覽器的影響

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

          安全方面:POST比GET要安全

          文件上傳:GET不能進(jìn)行文件上傳

          2.Ajax之GET請(qǐng)求(加參數(shù))

          1.1實(shí)現(xiàn)方式

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

          1.2代碼


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


          3.AJAX之POST請(qǐng)求

          1.1實(shí)現(xiàn)方式

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

          設(shè)置發(fā)送的數(shù)據(jù)格式,采用URL編碼格式

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

          對(duì)象.send(發(fā)送的數(shù)據(jù));

          1.2代碼

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


          【PHP代碼】

          <?php

          var_dump($_POST);

          效果

          4.練習(xí):表單無刷新數(shù)據(jù)錄入

          四、AJAX同步異步請(qǐng)求

          1.概念

          同步:等待服務(wù)器響應(yīng)完成在執(zhí)行下一段JS代碼 (阻塞模式)

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

          2.驗(yàn)證同步

          設(shè)置open(方式,請(qǐng)求地址,false/同步);

          HTML【代碼】

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


          【PHP代碼】

          為了增加延遲效果使用sleep


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


          3.驗(yàn)證異步


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

          【PHP代碼】


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

          五、解決緩存問題

          1.緩存分析

          我們?cè)贋g覽一些網(wǎng)站的時(shí)候?yàn)g覽器為了方便用戶再次訪問的時(shí)候增加用戶訪問體驗(yàn)會(huì)將一些靜態(tài)資源文件緩存到本地

          緩存的位置在:

          選中IE瀏覽器右鍵

          打開

          靜態(tài)緩存目錄就出現(xiàn)再這里面了

          說明:IE存在緩存

          2.解決方案

          1.1隨機(jī)數(shù)

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

          缺點(diǎn):

          1.不能保證URL絕對(duì)唯一

          2.產(chǎn)生大量緩存文件

          1.2時(shí)間

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

          優(yōu)點(diǎn):保證URL絕對(duì)唯一

          缺點(diǎn):依然產(chǎn)生大量緩存文件

          1.3設(shè)置請(qǐng)求頭

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

          原理分析:

          If-Modified-Since是標(biāo)準(zhǔn)的HTTP請(qǐng)求頭標(biāo)簽,在發(fā)送HTTP請(qǐng)求時(shí),把瀏覽器端緩存頁面的最后修改時(shí)間一起發(fā)到服務(wù)器去,服務(wù)器會(huì)把這個(gè)時(shí)間與服務(wù)器上實(shí)際文件的最后修改時(shí)間進(jìn)行比較。

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

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

          1.4設(shè)置相應(yīng)頭

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

          原理分析:

          利用php的header函數(shù)向響應(yīng)頭中寫數(shù)據(jù),寫的是告訴客戶端:不要對(duì)本次的結(jié)果進(jìn)行緩存。

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

          六、返回?cái)?shù)據(jù)格式

          1.數(shù)據(jù)格式分類

          普通字符串文本格式:responseText

          XML數(shù)據(jù)格式:responseXML

          JSON 字符串?dāng)?shù)據(jù)格式:responseText (在實(shí)際工作中用到最多,最廣泛的格式)

          2.返回Text數(shù)據(jù)處理

          1.1HTML代碼

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

          1.2PHP代碼

          <?php

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

          最終效果

          3.返回XML數(shù)據(jù)處理

          1.1HTML代碼

          <script type="text/javascript">
             //創(chuàng)建AJAX對(duì)象
             var XHRObj = new XMLHttpRequest();
             //創(chuàng)建請(qǐng)求頭
             XHRObj.open('GET','xml.php');
             //時(shí)時(shí)監(jiān)控
             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++){
          //獲取第二級(jí)的值我們使用childen 方法
                         for(j=0;j<books[i].children.length;j++){
                             
                             console.log(books[i].children[j].innerHTML);
                         }
                     }
                 }
             }
             //發(fā)送請(qǐng)求  對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
             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數(shù)據(jù)處理

          1.1什么是JSON數(shù)據(jù)

          JSON(javascript Object Notation js 對(duì)象標(biāo)記) 是一種輕量級(jí)的數(shù)據(jù)交換格式。

          1.2JSON數(shù)據(jù)優(yōu)勢(shì)

          數(shù)據(jù)格式比較簡(jiǎn)單,易于讀寫, 格式都是壓縮的,占用帶寬小

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

          因?yàn)镴SON格式能夠直接為服務(wù)器端代碼使用, 大大簡(jiǎn)化了服務(wù)器端和客戶端的代碼開發(fā)量, 但是完成的任務(wù)不變, 且易于維護(hù)

          1.3服務(wù)器端JSON生成和解析

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

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

          說明:false 解碼出來的數(shù)據(jù)是一個(gè)對(duì)象,true,解碼出來的是一個(gè)數(shù)組

          1.4客戶端解析JSON數(shù)據(jù)

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

          ? JSON.parse()

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

          作用:從一個(gè)字符串中解析出json數(shù)據(jù)對(duì)象

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

          ? Eval


          七、綜合案例-用戶注冊(cè)

          1.需求

          用戶會(huì)員注冊(cè)功能,用戶填寫好根據(jù)規(guī)則進(jìn)行驗(yàn)證,如果驗(yàn)證成功提示用戶注冊(cè)成功。

          驗(yàn)證規(guī)則:

          1.用戶名不能為空

          2.用戶名必須是由數(shù)字和字母組成,而且是在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-用戶注冊(cè)</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="注冊(cè)"></dd>
                </dl>
            </div>
             
          </body>
          <script type="text/javascript">
             
             //給注冊(cè)按鈕增加click事件
             
             var regbtn = document.getElementById('regbtn');
             
             regbtn.onclick = function(){
                 
                 //獲取用戶輸入的值
                 var username = document.getElementById('username').value;
                 
                  //創(chuàng)建AJAX對(duì)象
                 var XHRObj = new XMLHttpRequest();
                 //打開對(duì)象
                 XHRObj.open('get','reg.php?username='+username);
                 //實(shí)時(shí)監(jiān)控AJAX運(yùn)行狀態(tài)
                 XHRObj.onreadystatechange = function(){
                     //判斷服務(wù)器是否響應(yīng)成功
                     if(XHRObj.readyState==4 && XHRObj.status == 200){
                         //將json數(shù)據(jù)轉(zhuǎn)換成對(duì)象
                         jsonObj = JSON.parse(XHRObj.responseText);
                         //判斷用戶是否操作成功進(jìn)行頁面跳轉(zhuǎn)
                         if(jsonObj.state ==1){
                             location.href='success.html';
                             
                         }else{
                             alert(jsonObj.msg);
                         }
                     }
                 }
                 //發(fā)送請(qǐng)求
                 XHRObj.send();
                 
             }
             
           
             
             
          </script>
          </html>


          3.PHP代碼

          最近寫博客真的是太痛苦了,倒不是寫博客本身,而是寫完之后往多個(gè)平臺(tái)發(fā)布的過程,一不注意就是十多分鐘往上的時(shí)間消耗。

          為了解決這個(gè)問題,之前立項(xiàng)的“解決自媒體一鍵多平臺(tái)發(fā)布”項(xiàng)目必須得立刻著手完善了,爭(zhēng)取早日讓自己從發(fā)布這件事情上解脫出來專心寫文章。

          【hxsfx的JavaScript庫】這個(gè)系列基本上是為“一鍵多平臺(tái)發(fā)布”項(xiàng)目打基礎(chǔ)用的。之所以把各個(gè)功能模塊拆分出來,是為了盡量讓小伙伴能夠復(fù)制即用(在兼容性方面,因?yàn)閭€(gè)人能力的原因,幾乎只會(huì)兼容Chrome瀏覽器)。


          hxsfx.ajax庫

          (一)介紹

          AJAX 是異步的 JavaScript 和 XML(Asynchronous JavaScript And XML),開發(fā)hxsfx.ajax庫的主要目的就是希望通過異步加載HTML,從而盡量避免直接在js中寫HTML來刷新頁面內(nèi)容。

          hxsfx.ajax這個(gè)庫與jquery的ajax功能基本一致,不過短時(shí)間內(nèi)應(yīng)該是寫不到人家那么完善的。哈哈~

          各位小伙伴別問,為什么不用jquery的ajax而要自己再寫一個(gè)呢?

          問就是,博主喜歡造輪子。開玩笑了~

          其實(shí)原因是為了減少三方庫的依賴,達(dá)到對(duì)項(xiàng)目的全面掌控。

          項(xiàng)目地址:https://github.com/hxsfx/hxsfx_web_tools

          (二)代碼

          要自己開發(fā)一個(gè)ajax庫,需要借助Web API接口中的XMLHttpRequest(XHR)對(duì)象。

          XMLHttpRequest(XHR)對(duì)象用于與服務(wù)器交互。通過 XMLHttpRequest 可以在不刷新頁面的情況下請(qǐng)求特定 URL,獲取數(shù)據(jù)。這允許網(wǎng)頁在不影響用戶操作的情況下,更新頁面的局部?jī)?nèi)容。

          1、在window對(duì)象上新建一個(gè)hxsfx對(duì)象,本系列的所有庫基本都會(huì)在hxsfx對(duì)象之中:

          //hxsfx.js
          (function () {
              window.hxsfx = {};
          })();

          2、在hxsfx對(duì)象的基礎(chǔ)上新建一個(gè)ajax對(duì)象:

          //ajax.js
          (function () {
              window.hxsfx.ajax = {
              };
          })();

          3、在ajax對(duì)象中新建loadHTML方法,設(shè)置兩個(gè)參數(shù),分別是ele準(zhǔn)備加載HTML的容器元素和url加載HTML的地址:

          //ajax.js
          (function () {
              window.hxsfx.ajax = {
                  loadHTML: function (ele, url) {
                  }
              };
          })();

          4、在loadHTML方法中新建XMLHttpRequest對(duì)象:

          //ajax.js
          (function () {
              window.hxsfx.ajax = {
                  loadHTML: function (ele, url) {
                      const httpRequest = new XMLHttpRequest();
                      httpRequest.open('GET', url, true);
                      httpRequest.onreadystatechange = function () {
                          //為了讓代碼更健壯,使用try...catch來捕獲返回狀態(tài)判斷和處理HTML代碼的異常
                          try {
                              if (httpRequest.readyState === XMLHttpRequest.DONE) {
                                  if (httpRequest.status === 200) {
                                        //在這處理返回的HTML
                                      }
                                  }
                                  else {
                                      console.log("【ajax.get(" + url + ")請(qǐng)求出錯(cuò)】");
                                  }
                              }
                          }
                          catch (ex) {
                              console.log("【ajax.get(" + url + ")異常】" + ex.message);
                          }
                      };
                      httpRequest.send();
                  }
              };
          })();

          5、為了解決加載HTML緩存的問題,將loadHTML方法中傳入的URL參數(shù)后面加上一個(gè)時(shí)間戳:

          //ajax.js
          //時(shí)間戳用來解決加載頁面緩存的問題
          var urlTimeStamp = "timeStamp=" + new Date().getTime();
          url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;

          6、【重點(diǎn)】在這處理返回的HTML時(shí),如果直接將HTML加載到容器中,會(huì)出現(xiàn)HTML中Javascript代碼不執(zhí)行的問題。解決這個(gè)問題,需要將加載的script標(biāo)簽替換為script元素:

          //ajax.js
          ele.innerHTML = httpRequest.responseText;
          var scriptElements = ele.getElementsByTagName("script");
          for (var i = 0; i < scriptElements.length; i++) {
              var scriptElement = document.createElement("script");
              scriptElement.setAttribute("type", "text/javascript");
              var src = scriptElements[i].getAttribute("src");
              if (src) {
                  //因?yàn)榧虞d的src路徑是之前相對(duì)加載HTML頁面的,需要修改為當(dāng)前頁面的引用路徑
                  src = url.substring(0, url.lastIndexOf('/') + 1)  + src;
                  src += ((src.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
                  scriptElement.setAttribute("src", src);
              }
              var scriptContent = scriptElements[i].innerHTML;
              if (scriptContent) {
                  scriptElement.innerHTML = scriptContent;
              }
              //用生成的script元素去替換html中的script標(biāo)簽,以此來激活script代碼
              ele.replaceChild(scriptElement, scriptElements[i]);
          }

          7、最后ajax.js完整代碼:

          //ajax.js
          (function () {
              window.hxsfx.ajax = {
                  loadHTML: function (ele, url) {
                      //時(shí)間戳用來解決加載頁面緩存的問題
                      var urlTimeStamp = "timeStamp=" + new Date().getTime();
                      url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
                      const httpRequest = new XMLHttpRequest();
                      httpRequest.open('GET', url, true);
                      httpRequest.onreadystatechange = function () {
                          //為了讓代碼更健壯,使用try...catch來捕獲返回狀態(tài)判斷和處理HTML代碼的異常
                          try {
                              if (httpRequest.readyState === XMLHttpRequest.DONE) {
                                  if (httpRequest.status === 200) {
                                      ele.innerHTML = httpRequest.responseText;
                                      var scriptElements = ele.getElementsByTagName("script");
                                      for (var i = 0; i < scriptElements.length; i++) {
                                          var scriptElement = document.createElement("script");
                                          scriptElement.setAttribute("type", "text/javascript");
                                          var src = scriptElements[i].getAttribute("src");
                                          if (src) {
                                              //因?yàn)榧虞d的src路徑是之前相對(duì)加載HTML頁面的,需要修改為當(dāng)前頁
                                              src = url.substring(0, url.lastIndexOf('/') + 1) + src;
                                              src += ((src.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
                                              scriptElement.setAttribute("src", src);
                                          }
                                          var scriptContent = scriptElements[i].innerHTML;
                                          if (scriptContent) {
                                              scriptElement.innerHTML = scriptContent;
                                          }
                                          //用生成的script元素去替換html中的script標(biāo)簽,以此來激活script代
                                          ele.replaceChild(scriptElement, scriptElements[i]);
                                      }
                                      }
                                  }
                                  else {
                                      console.log("【ajax.get(" + url + ")請(qǐng)求出錯(cuò)】");
                                  }
                              }
                          }
                          catch (ex) {
                              console.log("【ajax.get(" + url + ")異常】" + ex.message);
                          }
                      };
                      httpRequest.send();
                  }
              };
          })();

          (三)調(diào)用文檔

          1、將hxsfx.js和ajax.js放入Scripts文件夾中的hxsfx文件夾

          2、在Scripts文件夾同級(jí)目錄新建index.html頁面

          <!DOCTYPE html>
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
              <title>js庫測(cè)試</title>
              <script src="Scripts/hxsfx/hxsfx.js"></script>
              <script src="Scripts/hxsfx/ajax.js"></script>
              <script>
                  window.onload = function () {
                          //調(diào)用ajax中的loadHTML方法
                      window.hxsfx.ajax.loadHTML(document.getElementById("ContentContainer"), "Views/test/testPage.html");
                  };
              </script>
          </head>
          <body>
              <div id="ContentContainer"></div>
          </body>
          </html>

          3、在Scripts文件夾同級(jí)目錄,首先新建Views文件夾,接著其中新建test文件夾,最后在test文件夾中新建testPage.html

          <style>
              div#TestPageContainer {
                  height: 300px;
                  width: 300px;
                  background-color: #F0F0F0;
              }
          </style>
          <script src="../../Scripts/hxsfx/test/test.js"></script>
          <script>
              function updateBackgroundColor() {
                  try {
                      var backgroundColor = '#' + (Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0'));
                      document.getElementById("TestPageContainer").style.backgroundColor = backgroundColor;
                  }
                  catch (ex) {
                      console.log(ex.message);
                  }
              }
          </script>
          <div id="TestPageContainer">
              <button onclick="updateBackgroundColor()">更改背景色</button>
              <button onclick="modifyPFontColor()">更改下面一句話的字體顏色</button>
              <p id="P">這兒是一句話。</p>
          </div>


          最后

          以上內(nèi)容只是hxsfx.ajax庫的開始,后續(xù)的內(nèi)容更新小伙伴可以通過訪問Github項(xiàng)目地址進(jìn)行獲取。

          在瀏覽器中瀏覽了網(wǎng)頁之后,下一步就是查看其HTML源代碼。盡管這種方法很簡(jiǎn)單,但仍然非常值得去做。查看源代碼有兩項(xiàng)作用;它可以幫助你發(fā)現(xiàn)最明顯的安全問題,但最重要的是,它使你能夠?yàn)閷淼臏y(cè)試建立一個(gè)比較基準(zhǔn)。對(duì)攻擊失敗之前和之后的源代碼進(jìn)行比較,你就能夠調(diào)整你是輸入,了解到哪些通過了,哪些沒有通過,并再次嘗試。

          解決方案

          我們推薦使用Firefox,你已經(jīng)在2.1節(jié)中學(xué)會(huì)了它的安裝。首先瀏覽應(yīng)用中你所感興趣的網(wǎng)頁。

          右擊,并選擇“查看源文件”或從菜單欄選擇“查看”→ "源文件"。

          我們推薦Firefox的主要原因是因?yàn)樗牟噬@示。如圖3-1所示,使用這種顯示方式,HTML標(biāo)簽和屬性都要容易理解得多。相比之下,Internet Explorer在記事本中打開網(wǎng)頁。就會(huì)難讀得多。

          討論

          作為比較基準(zhǔn),訪問HTML源代碼會(huì)非常有幫助。最常見的Web漏洞涉及到向Web應(yīng)用提供惡意輸入以修改HTML源代碼。在測(cè)試這些漏洞時(shí),驗(yàn)證測(cè)試通過或失敗的最簡(jiǎn)單的方法就是檢查源代碼是否被惡意更改。

          當(dāng)心一切未經(jīng)更改就寫進(jìn)源代碼中的輸入。我們將在第8章討論輸入驗(yàn)證,然后許多應(yīng)用根本就不對(duì)輸入進(jìn)行驗(yàn)證。在開始討論更加復(fù)雜的內(nèi)容之前,不妨在源代碼中搜索你剛剛提供的輸入。然后,使者將可能的危險(xiǎn)值作為輸入,比如HTML標(biāo)簽或JavaScript,并注意它是否未經(jīng)修改就直接顯示在源代碼中。如果是這樣的話,那么這就是個(gè)警示信號(hào)。

          注意,你可以像搜索任何其他Firefox頁面那樣搜索HTML源代碼(根據(jù)具體情況,使用Ctrl+F或(Windows徽標(biāo)鍵)+F)。

          在以后的秘訣和章節(jié)中,我們將使用工具來自動(dòng)搜索、解析和比較源代碼。記住基本要點(diǎn);通常,可以通過重復(fù)地手動(dòng)檢查源代碼以檢查怎樣做才能使它通過篩選程序或編碼找出漏洞。

          注意:你在這里看到的靜態(tài)源代碼不能反映JavaScript或AJAX功能所做的任何更改。

          搜索微信公眾號(hào):TestingStudio霍格沃茲的干貨都很硬核


          主站蜘蛛池模板: 国产成人精品日本亚洲专一区| 东京热无码av一区二区| 杨幂AV污网站在线一区二区| 国产成人精品一区二区秒拍| 精品女同一区二区三区免费播放 | 国产一区二区三精品久久久无广告| 亚洲国产高清在线精品一区| 伊人色综合一区二区三区| 免费一区二区三区在线视频| 日韩精品福利视频一区二区三区| 精品爆乳一区二区三区无码av| 久久国产精品亚洲一区二区| 久久se精品动漫一区二区三区| 日韩综合无码一区二区| 嫩B人妻精品一区二区三区| 国产精品亚洲产品一区二区三区| 国产中的精品一区的| 国产一区二区在线|播放| 日本精品一区二区三本中文| 国产精品免费综合一区视频| 日韩美一区二区三区| 日本夜爽爽一区二区三区| 视频一区二区在线播放| 一区二区三区中文| 国产精品女同一区二区久久| 国产精品乱码一区二区三区| 精品成人一区二区三区四区| 中文字幕人妻丝袜乱一区三区| 亚洲毛片αv无线播放一区| 无码精品国产一区二区三区免费| 亚洲一区二区三区电影| 亚洲欧美日韩一区二区三区在线 | 日韩一本之道一区中文字幕| 曰韩精品无码一区二区三区| 中文字幕视频一区| 中文字幕日韩欧美一区二区三区 | 亚洲一区二区电影| 精品国产一区二区三区av片| 东京热无码av一区二区| 少妇精品无码一区二区三区| 成人精品一区二区激情|