1. 程式人生 > >[js]jquery裏的jsonp實現ajax異源請求

[js]jquery裏的jsonp實現ajax異源請求

text http 並且 實現ajax all img pre app ima

同源請求-jquery

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
    $.ajax({
        url: "data.txt",
        type: "get",
        dataType: "json",
        success: function (data) {
            console.log(data);
        }
    });
</script>

data.txt

{"name": "maotai", "age":22}

技術分享圖片

jsonp異源請求-jquery

  • 函數名是隨機字符串
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
    // jsonp默認是get, jsonp默認使用callback 並且隨機生成字符串作為函數名
    $.ajax({
        url: "https://suggest.taobao.com/sug?code=utf-8&q=%E5%9B%B4%E5%B7%BE",
        dataType: "jsonp",
        success: function (data) {
            console.log(data);
        }
    });
</script>
  • 指定函數名
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
    // jsonp默認是get, jsonp默認使用callback 並且隨機生成字符串作為函數名
    $.ajax({
        url: "https://suggest.taobao.com/sug?code=utf-8&q=%E5%9B%B4%E5%B7%BE",
        dataType: "jsonp",
        jsonpCallback: "fn",
        jsonp: "cb",
        success: function (data) {
            console.log(data);
        }
    });
</script>

技術分享圖片

[js]jquery裏的jsonp實現ajax異源請求