整合營銷服務(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)用場景

          用戶注冊

          AJAX分頁效果

          圖片加載瀑布流效果

          2.AJAX工作流程

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

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

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

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

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

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

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

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

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

          ? 主瀏覽器都支持

          二、AJAX使用

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

          XHR = new XMLHttpRequest();

          2.建立鏈接

          1.1語法

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

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

          默認(rèn):同步 True

          1.2代碼


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



          3.發(fā)送請求

          1.1語法

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

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

          1.2代碼


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


          腳下留心:

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

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

          1.1語法

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

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

          1.2代碼

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

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

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

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

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

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

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

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

          狀態(tài)說明:

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

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

          <script type="text/javascript">
             //創(chuàng)建AJAX對象
             var XHRObj = new XMLHttpRequest();
             //創(chuàng)建請求頭
             XHRObj.open('GET','demo.php');
             //發(fā)送請求  對象.send(POST請求則填寫POST的數(shù)據(jù)/GET請求可以不用寫);
             console.log(XHRObj.readyState);
             //發(fā)送請求
             XHRObj.send();
             //當(dāng)請求狀態(tài)發(fā)送變化時ajax會自動調(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ā)送異步請求完了才去執(zhí)行的。

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

          思考:避免接口寫錯

          例如:

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

          使用:

          對象.status == 200

          <script type="text/javascript">
             //創(chuàng)建AJAX對象
             var XHRObj = new XMLHttpRequest();
             //創(chuàng)建請求頭
             XHRObj.open('GET','demo1.php');
             //發(fā)送請求  對象.send(POST請求則填寫POST的數(shù)據(jù)/GET請求可以不用寫);
          //    console.log(XHRObj.readyState);
             //發(fā)送請求
             XHRObj.send();
             //當(dāng)請求狀態(tài)發(fā)送變化時ajax會自動調(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ù)器錯誤,很忙......');
          //        }
                 
             }
             
          //    console.log(XHRObj.readyState+'sdf');
          </script>


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

          1.1案例需求

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

          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對象
                var XHRObj = new XMLHttpRequest();
                //創(chuàng)建請求頭,設(shè)置請求發(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ā)送請求
                XHRObj.send();
               
            }
             
          </script>


          1.4PHP代碼


          <?php
          //定義一個用戶數(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)用戶名可用的時候后面增加√說可用,當(dāng)用戶名不可用的時候出現(xiàn)一個×提示當(dāng)前用戶名太火,請換一個

          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>
          <!--
          第一步:給按鈕增加點(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對象
                var XHRObj = new XMLHttpRequest();
                //創(chuàng)建請求頭,設(shè)置請求發(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">√恭喜你,該用戶沒有被注冊</span>';
                        }else{
                            document.getElementById('error').innerHTML=' <span class="error">×此用戶名太首歡迎,請換一個</span>';
                           
                        }
                    }
                }
                //發(fā)送請求
                XHRObj.send();
               
            }
             
          </script>


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

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

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

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

          安全方面:POST比GET要安全

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

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

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

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

          1.2代碼


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


          3.AJAX之POST請求

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

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

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

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

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

          1.2代碼

          <script type="text/javascript">
             //創(chuàng)建AJAX對象
             var XHRObj = new XMLHttpRequest();
             XHRObj.onreadystatechange = function() {
             if (XHRObj.readyState == 4) {
               alert(XHRObj.responseText);
             }
           }
             //創(chuà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ā)送請求
             XHRObj.send(postData);
          </script>


          【PHP代碼】

          <?php

          var_dump($_POST);

          效果

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

          四、AJAX同步異步請求

          1.概念

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

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

          2.驗(yàn)證同步

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

          HTML【代碼】

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

          【PHP代碼】


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

          五、解決緩存問題

          1.緩存分析

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

          緩存的位置在:

          選中IE瀏覽器右鍵

          打開

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

          說明:IE存在緩存

          2.解決方案

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

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

          缺點(diǎn):

          1.不能保證URL絕對唯一

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

          1.2時間

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

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

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

          1.3設(shè)置請求頭

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

          原理分析:

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

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

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

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

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

          原理分析:

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

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

          六、返回數(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對象
             var XHRObj = new XMLHttpRequest();
             //創(chuàng)建請求頭
             XHRObj.open('GET','text.php');
             //時時監(jiān)控
             XHRObj.onreadystatechange = function(){
                 if(XHRObj.readyState == 4 && XHRObj.status == 200){
                     document.getElementById('content').innerHTML=XHRObj.responseText;
                 }
             }
             //發(fā)送請求  對象.send(POST請求則填寫POST的數(shù)據(jù)/GET請求可以不用寫);
             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對象
             var XHRObj = new XMLHttpRequest();
             //創(chuàng)建請求頭
             XHRObj.open('GET','xml.php');
             //時時監(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++){
          //獲取第二級的值我們使用childen 方法
                         for(j=0;j<books[i].children.length;j++){
                             
                             console.log(books[i].children[j].innerHTML);
                         }
                     }
                 }
             }
             //發(fā)送請求  對象.send(POST請求則填寫POST的數(shù)據(jù)/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數(shù)據(jù)處理

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

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

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

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

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

          因?yàn)镴SON格式能夠直接為服務(wù)器端代碼使用, 大大簡化了服務(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ù)是一個對象,true,解碼出來的是一個數(shù)組

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

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

          ? JSON.parse()

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

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

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

          ? Eval


          七、綜合案例-用戶注冊

          1.需求

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

          驗(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-用戶注冊</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;
                 
                  //創(chuàng)建AJAX對象
                 var XHRObj = new XMLHttpRequest();
                 //打開對象
                 XHRObj.open('get','reg.php?username='+username);
                 //實(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)換成對象
                         jsonObj = JSON.parse(XHRObj.responseText);
                         //判斷用戶是否操作成功進(jìn)行頁面跳轉(zhuǎn)
                         if(jsonObj.state ==1){
                             location.href='success.html';
                             
                         }else{
                             alert(jsonObj.msg);
                         }
                     }
                 }
                 //發(fā)送請求
                 XHRObj.send();
                 
             }
             
           
             
             
          </script>
          </html>


          3.PHP代碼

          什么會出現(xiàn)跨域

          • 跨域問題來源于JavaScript的同源策略,即只有 協(xié)議+主機(jī)名+端口號 (如存在)相同,則允許相互訪問。也就是說JavaScript只能訪問和操作自己域下的資源,不能訪問和操作其他域下的資源。跨域問題是針對JS和ajax的,html本身沒有跨域問題,比如a標(biāo)簽、script標(biāo)簽、甚至form標(biāo)簽(可以直接跨域發(fā)送數(shù)據(jù)并接收數(shù)據(jù))等



          如何解決跨域問題

          • JSONP
          • JSONP是JSON with Padding的略稱。它是一個非官方的協(xié)議,它允許在服務(wù)器端集成Script tags返回至客戶端,通過javascript callback的形式實(shí)現(xiàn)跨域訪問(這僅僅是JSONP簡單的實(shí)現(xiàn)形式)。關(guān)于jsonp的使用方式,可以參考http://blog.csdn.net/alen1985/article/details/6365394,優(yōu)缺點(diǎn)可以參考http://blog.csdn.net/z69183787/article/details/19191385
          • 添加響應(yīng)頭,允許跨域
          • addHeader(‘Access-Control-Allow-Origin:*’);//允許所有來源訪問
          • addHeader(‘Access-Control-Allow-Method:POST,GET’);//允許訪問的方式
          • 代理的方式
          • 服務(wù)器A的test01.html頁面想訪問服務(wù)器B的后臺action,返回“test”字符串,此時就出現(xiàn)跨域請求,瀏覽器控制臺會出現(xiàn)報錯提示,由于跨域是瀏覽器的同源策略造成的,對于服務(wù)器后臺不存在該問題,可以在服務(wù)器A中添加一個代理action,在該action中完成對服務(wù)器B中action數(shù)據(jù)的請求,然后在返回到test01.html頁面。

          Demo1(添加允許跨域請求的響應(yīng)頭)

          • html頁面


          • Web后臺

          • 按照上面的訪問,由于127.0.0.1:8080和localhost:8081的域和端口不同,所以同樣會出現(xiàn)跨域問題。


          現(xiàn)在用添加響應(yīng)頭的方式


          Demo2(jsonp的callback方式)

          這里演示的是jquery的ajax,后臺采用的是webservice接口形式

          注意此時的dataType為jsonp格式,看看后臺的接收

          我們返回的其實(shí)就是一個函數(shù)的調(diào)用文本,這里注意,callback的名稱,由于前臺沒有指定callback函數(shù),所以這里自動生成了,如果想自定義回調(diào)函數(shù)名稱如下操作,添加一行請求參數(shù)

          這樣后臺的回調(diào)函數(shù)名就變成了mytest

          瀏覽器發(fā)出的請求格式和響應(yīng)數(shù)據(jù)如下,其實(shí)就是返回函數(shù)的調(diào)用,而需要返回的數(shù)據(jù)則以函數(shù)參數(shù)值的形式填入

          此時控制臺就能夠獲取到“hello world”

          )url:

            要求為String類型的參數(shù),(默認(rèn)為當(dāng)前頁地址)發(fā)送請求的地址。

          2)type:

            要求為String類型的參數(shù),請求方式(post或get)默認(rèn)為get。注意其他http請求方法,例如put和delete也可以使用,但僅部分瀏覽器支持。

          3)timeout:

            要求為Number類型的參數(shù),設(shè)置請求超時時間(毫秒)。此設(shè)置將覆蓋$.ajaxSetup()方法的全局設(shè)置。

          4)async:

            要求為Boolean類型的參數(shù),默認(rèn)設(shè)置為true,所有請求均為異步請求。如果需要發(fā)送同步請求,請將此選項(xiàng)設(shè)置為false。

          注意,同步請求將鎖住瀏覽器,用戶其他操作必須等待請求完成才可以執(zhí)行。

          5)cache:

            要求為Boolean類型的參數(shù),默認(rèn)為true(當(dāng)dataType為script時,默認(rèn)為false),設(shè)置為false將不會從瀏覽器緩存中加載請求信息。

          6)data:

            要求為Object或String類型的參數(shù),發(fā)送到服務(wù)器的數(shù)據(jù)。如果已經(jīng)不是字符串,將自動轉(zhuǎn)換為字符串格式。get請求中將附加在url后。防止這種自動轉(zhuǎn)換,可以查看  processData(防止自動轉(zhuǎn)換)選項(xiàng)。對象必須為key/value格式,例如{foo1:"bar1",foo2:"bar2"}轉(zhuǎn)換為&foo1=bar1&foo2=bar2。如果是數(shù)組,JQuery將自動為不同值對應(yīng)同一個名稱。例如{foo:["bar1","bar2"]}轉(zhuǎn)換為&foo=bar1&foo=bar2。

          7)dataType:

            要求為String類型的參數(shù),預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定,JQuery將自動根據(jù)http包mime信息返回responseXML或responseText,并作為回調(diào)函數(shù)參數(shù)傳遞。可用的類型如下:

            ● xml:返回XML文檔,可用JQuery處理。

            ● html:返回純文本HTML信息;包含的script標(biāo)簽會在插入DOM時執(zhí)行。

            ● script:返回純文本JavaScript代碼。不會自動緩存結(jié)果。除非設(shè)置了cache參數(shù)。注意在遠(yuǎn)程請求時(不在同一個域下),所有post請求都將轉(zhuǎn)為get請求。

            ● json:返回JSON數(shù)據(jù)。

            ● jsonp:JSONP格式。使用SONP形式調(diào)用函數(shù)時,例如myurl?callback=?,JQuery將自動替換后一個“?”為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。

            ● text:返回純文本字符串。

          8)beforeSend:

            這個參數(shù)主要是為了在向服務(wù)器發(fā)送請求前,執(zhí)行一些操作。要求為Function類型的參數(shù),發(fā)送請求前可以修改XMLHttpRequest對象的函數(shù),例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數(shù)。

               function(XMLHttpRequest){
                  this;  //調(diào)用本次ajax請求時傳遞的options參數(shù)
                }

          9)complete:

            要求為Function類型的參數(shù),請求完成后調(diào)用的回調(diào)函數(shù)(請求成功或失敗時均調(diào)用)。參數(shù):XMLHttpRequest對象和一個描述成功請求類型的字符串。

               function(XMLHttpRequest, textStatus){
                 this;  //調(diào)用本次ajax請求時傳遞的options參數(shù)
               }

          10)success:

            要求為Function類型的參數(shù),請求成功后調(diào)用的回調(diào)函數(shù),有兩個參數(shù)。

          (1)由服務(wù)器返回,并根據(jù)dataType參數(shù)進(jìn)行處理后的數(shù)據(jù)。

          (2)描述狀態(tài)的字符串。

               function(data, textStatus){
                //data可能是xmlDoc、jsonObj、html、text等等
                this; //調(diào)用本次ajax請求時傳遞的options參數(shù)
               }

          11)error:

          要求為Function類型的參數(shù),請求失敗時被調(diào)用的函數(shù)。該函數(shù)有3個參數(shù),即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數(shù)如下:

              function(XMLHttpRequest, textStatus, errorThrown){
               //通常情況下textStatus和errorThrown只有其中一個包含信息
               this;  //調(diào)用本次ajax請求時傳遞的options參數(shù)
              }

          12)contentType:

          要求為String類型的參數(shù),當(dāng)發(fā)送信息至服務(wù)器時,內(nèi)容編碼類型默認(rèn)為"application/x-www-form-urlencoded"。該默認(rèn)值適合大多數(shù)應(yīng)用場合。

          13)dataFilter:

          要求為Function類型的參數(shù),給Ajax返回的原始數(shù)據(jù)進(jìn)行預(yù)處理的函數(shù)。提供data和type兩個參數(shù)。data是Ajax返回的原始數(shù)據(jù),type是調(diào)用jQuery.ajax時提供的dataType參數(shù)。函數(shù)返回的值將由jQuery進(jìn)一步處理。

                function(data, type){
                  //返回處理后的數(shù)據(jù)
                  return data;
                }

          14)dataFilter:

          要求為Function類型的參數(shù),給Ajax返回的原始數(shù)據(jù)進(jìn)行預(yù)處理的函數(shù)。提供data和type兩個參數(shù)。data是Ajax返回的原始數(shù)據(jù),type是調(diào)用jQuery.ajax時提供的dataType參數(shù)。函數(shù)返回的值將由jQuery進(jìn)一步處理。

             function(data, type){
                  //返回處理后的數(shù)據(jù)
                  return data;
                }

          15)global:

          要求為Boolean類型的參數(shù),默認(rèn)為true。表示是否觸發(fā)全局ajax事件。設(shè)置為false將不會觸發(fā)全局ajax事件,ajaxStart或ajaxStop可用于控制各種ajax事件。

          16)ifModified:

          要求為Boolean類型的參數(shù),默認(rèn)為false。僅在服務(wù)器數(shù)據(jù)改變時獲取新數(shù)據(jù)。服務(wù)器數(shù)據(jù)改變判斷的依據(jù)是Last-Modified頭信息。默認(rèn)值是false,即忽略頭信息。

          17)jsonp:

          要求為String類型的參數(shù),在一個jsonp請求中重寫回調(diào)函數(shù)的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數(shù)里的"callback"部分,例如{jsonp:'onJsonPLoad'}會導(dǎo)致將"onJsonPLoad=?"傳給服務(wù)器。

          18)username:

          要求為String類型的參數(shù),用于響應(yīng)HTTP訪問認(rèn)證請求的用戶名。

          19)password:

          要求為String類型的參數(shù),用于響應(yīng)HTTP訪問認(rèn)證請求的密碼。

          20)processData:

          要求為Boolean類型的參數(shù),默認(rèn)為true。默認(rèn)情況下,發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對象(從技術(shù)角度來講并非字符串)以配合默認(rèn)內(nèi)容類型"application/x-www-form-urlencoded"。如果要發(fā)送DOM樹信息或者其他不希望轉(zhuǎn)換的信息,請?jiān)O(shè)置為false。

          21)scriptCharset:

          要求為String類型的參數(shù),只有當(dāng)請求時dataType為"jsonp"或者"script",并且type是GET時才會用于強(qiáng)制修改字符集(charset)。通常在本地和遠(yuǎn)程的內(nèi)容編碼不同時使用。


          主站蜘蛛池模板: 一区二区三区四区在线播放| 美女视频一区三区网站在线观看| 日韩人妻精品一区二区三区视频| 无码精品一区二区三区| 国产一区二区三精品久久久无广告| 亚洲一区二区三区在线观看网站| 亚洲韩国精品无码一区二区三区 | 成人区人妻精品一区二区不卡网站| 亚洲性色精品一区二区在线| 精品少妇ay一区二区三区| 国产一区二区电影在线观看| 香蕉在线精品一区二区| 亚洲国产一区二区三区| 欧洲精品码一区二区三区免费看 | 视频一区二区在线观看| 久久青青草原一区二区| 国产乱码精品一区二区三区麻豆| 91在线一区二区三区| 国产一区二区免费| 国产精品无码AV一区二区三区| 波多野结衣一区二区三区aV高清| 亚洲一区二区三区在线视频| 一区二区视频免费观看| 一区二区三区电影网| 无码精品久久一区二区三区| 午夜肉伦伦影院久久精品免费看国产一区二区三区 | 国产欧美一区二区精品仙草咪| 国产福利一区二区三区在线视频| 精品一区二区三区免费毛片爱| 中文字幕一区视频| 伊人色综合一区二区三区影院视频 | 亚洲一区二区三区久久| 亚洲欧美日韩一区二区三区在线 | 精品国产免费一区二区三区香蕉| 中文字幕精品一区| 精品一区二区三区无码免费视频 | 日韩有码一区二区| 亚洲乱码一区二区三区在线观看| 97久久精品一区二区三区| 久久久久久人妻一区二区三区| 卡通动漫中文字幕第一区|