jQueryAJAX的$.ajax()用jsonp解決跨域問題

在以前的$.ajax()的跨域解決辦法是:先訪問本地服務器,在本地服務器中再訪問到遠程服務器。

可是呢!大家有沒有覺得那種辦法會在性能上稍有欠缺呢,會不會造成資源成本的浪費呢!?

接下來,我要用的是jsonp解決跨域訪問服務器的方式。


一、html中寫js進行訪問。注:引入jQuery的庫

<html>
<head>
    <script type="text/javascript" src="jquery-3.0.0.min.js"></script>
</head>
<body>
<button id="send">get/post JSON</button>
<p id="result"></p>
<script>
    $(function () {
        $('#send').click(function () {
            //jsonp解決跨域(訪問遠程服務器)問題
            $.ajax({
                //url:"http://服務器地址:端口號/服務器文件路徑
                //服務器地址要注意是ipv4的,ipv6測試暫時沒成功。
                url: "http://192.168.191.7:8989/phpProject/crossDomain
                                                               /jsonServer.php",
                //get/post都可以的請求方式
                type: "POST",
                //是否同步,false爲異步加載
                async: false,
                //設置返回數據類型jsonp
                dataType: "jsonp",
                //jsonp的字段,服務器返回的前綴要和這個一樣
                jsonp: "jsoncallback",
                //data: {name:"Lily"},
                success: function (json) {
                    //裝在獲取的數據
                    var newstr = '';
                    //json爲獲取的數據,記得給服務器設置charset=utf-8;否則返回中文亂碼
                    $.each(json, function (i, v) {
                        //json把數據給了v
                        newstr = newstr + " " + v.name;
                    });
                    //把得到的所有name字段都加入#result
                    $("#result").append(newstr);
                },
                error: function () {
                    //訪問出錯彈出
                    alert('fail');
                }
            });
        });
    });
</script>
</body>
</html>


二、服務器:jsonServer.php

<?php
/**
 * Created by PhpStorm.
 * User: 洋   汪
 * Date: 2016/8/10
 * Time: 20:32
 */
header("Content-type:text/html;charset=utf-8");

//htmlspecialchars() 函數把一些預定義的字符轉換爲 HTML 實體。
//獲取回調函數名
$jsoncallback = isset($_REQUEST['jsoncallback']) ? 
                                  htmlspecialchars($_REQUEST['jsoncallback']) : '';

//json數據
$jsonData = '[{name:"汪洋"},{name:"wangyang"}]';

//輸出json數據
echo $jsoncallback . "(" . $jsonData . ")";
?>





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