Ajax跨越請求

第一次寫點東西，有點激動有木有，明天強哥要來園區視察雙創工做，咱們也放假了，藉此強哥到來之際，寫點文章，記念一下，做爲一個前端攻城師，最有用的技術之一就是Ajax了，可是做爲原生的xhl請求，是禁止跨域請求，今天就分享一下，本身的解決方法

…………………………………………………………………………………………………………………………
 <button id="bt">不使用XHR發起異步請求並處理服務器端數據</button>

    <script>

    function doResponse(data){  //不能手工調用！

        console.log('開始處理服務器返回的數據...');

        console.log(data);  //div.innerHTML = data;

    }

    bt.onclick = function(){

        //不能使用XHR對象——瀏覽器禁止其跨域請求

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

        s.src = 'http://172.163.100.161/html5_day01/data/4.php?fn=doResponse';

        //瀏覽器會自動執行src文件返回的字符串  doResponse({"":""})

        document.body.appendChild(s);

    }   

     //ipconfig  查看本機的IP地址

 </script>

 

<h1>使用jQuery對JSONP操做的封裝</h1>

    <button id="bt1">使用XHR發起異步請求並處理服務器端數據——不能跨域</button>

    <button id="bt2">使用JSONP方式發起異步請求並處理服務器端數據——能夠跨域——$.getJSON</button>

    <button id="bt3">使用JSONP方式發起異步請求並處理服務器端數據——能夠跨域——$.ajax</button>

    <script src="js/jquery-1.11.3.js"></script>

    <script>

    function doResponse(data){  //不能手工調用！

        console.log('開始處理服務器返回的數據...');

        console.log(data);  //div.innerHTML = data;

    }

    $('#bt1').click(function(){

        $.getJSON('http://172.163.100.161/html5_day01/data/5.php', doResponse);

    });

    $('#bt2').click(function(){

        $.getJSON('http://172.163.100.161/html5_day01/data/5.php?callback=?', doResponse);

    });

    $('#bt3').click(function(){

        $.ajax({

            type: 'GET',

            url: 'http://172.163.100.161/html5_day01/data/5.php',

            dataType: 'jsonp',   //html/text/script/xml/json/jsonp

            success: doResponse

        });

    });

    </script>

5.php

<?php

//採用JSONP手段 向客戶端返回分頁數據//

header('Content-Type: application/javascript');

sleep(10);

$output = [

    'record_count' => 22,

    'page_size' => 10,

    'page_count' => 3,

    'cur_page' => 1,

    'data' => [ 100, 300, 500]

];

$json = json_encode($output);

$callback = $_REQUEST['callback'];

echo $callback . '(' . $json . ')'; 

?>

4.php

<?php

//採用JSONP手段 向客戶端返回分頁數據//

header('Content-Type: application/javascript');

$output = [

    'record_count' => 22,

    'page_size' => 10,

    'page_count' => 3,

    'cur_page' => 1,

    'data' => [ 100, 300, 500]

];

$json = json_encode($output);

$fn = $_REQUEST['fn'];

echo $fn . '(' . $json . ')'; 

//形如： doResponse({"record_count":22});

?>