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});

?>