Ajax筆記

XMLHttpRequest發送請求

open(method, url, async)

send(string);

 

XMLHttpRequest獲得響應

responseText: 獲取字符串形式的響應數據

responseXML:獲得XML形式的響應數據

status和statusText:以數字和文本形式返回HTTP狀態碼

getAllResponseHeader():獲取所有響應報頭

getResponseHeader():查詢響應中的某個字段的值

readyState屬性

 

var request = new XMLHttpRequest();

request.open(“GET”, “service.php?number=” +document.getElementById(“keyword”).value);

request.send();

request.onreadystatechange = function() {

if(request.readyState=== 4) {

    if(request.statue === 200) {

        var data = JSON.parse(request.responseText);

        if(data.success) {

            document.getElementById(“searchResult”).innerHTML= data.msg;

        }else {

            alert(“錯誤”);

        }

}

}

 

避免使用eval解析json字符串,非常危險

 

jQuery中的Ajax

 

處理跨域方法:1代理, 3 XHR2

2 JSONP

Web頁面上調用js文件時則不受是否跨域的影響

跨域訪問數據可以在在遠程服務器上設法把數據裝進js格式的文件裏,供客戶端調用和進一步處理

<script type="text/javascript">

    // 得到航班信息查詢結果後的回調函數

    var flightHandler = function(data){

        alert('你查詢的航班結果是:票價 ' +data.price + ' 元,' +'餘票 ' + data.tickets +' 張。');

    };

    // 提供jsonp服務的url地址(不管是什麼類型的地址,最終生成的返回值都是一段javascript代碼)

    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";

    // 創建script標籤,設置其屬性

    var script =document.createElement('script');

    script.setAttribute('src', url);

    // 把script標籤加入head,此時調用開始

   document.getElementsByTagName('head')[0].appendChild(script);

    </script>

 

<script type="text/javascript">

     jQuery(document).ready(function(){
        $.ajax({

             type: "get",

             async: false,

             url:"http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",

             dataType: "jsonp",

             jsonp: "callback",//傳遞給請求處理程序或頁面的,用以獲得jsonp回調函數名的參數名(一般默認爲:callback)

            jsonpCallback:"flightHandler",//自定義的jsonp回調函數名稱,默認爲jQuery自動生成的隨機函數名,也可以寫"?",jQuery會自動爲你處理數據

             success: function(json){

                 alert('您查詢到航班信息:票價: ' +json.price + ' 元,餘票: ' + json.tickets + ' 張。');

             },

             error: function(){

                 alert('fail');

             }

         });

     });

     </script>

 

 

return render_json({‘is_exist’ : True}),需設置datatype爲json,即可對返回參數data進行data.is_exist操作

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章