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,500]

];

$json = json_encode($output);

$fn = $_REQUEST['fn'];

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

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

?>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!