跨域Ajax方法

9次阅读

共计 1320 个字符，预计需要花费 4 分钟才能阅读完成。

经典 Ajax 示例：

XMLHttpRequest 原生方式
var request = new XMLHttpRequest();
request.open(“POST”, “index.php”);
var data = “parameter1” + encodeURIComponent(parameter_one) + “&parameter2” + encodeURIComponent(parameter_two);
request.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
request.send(data);
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) {
var ret = request.responseText;
// 做有意义的事

} else {
alert(“ 发生错误：” + request.status);
}
}
}
jQuery
$.ajax({
type:”POST”,
url:’index.php’,
dataType:”json”,
data:{
“parameter1”:parameter_one,
“parameter2”:parameter_two
},
success:function(ret){
// 做有意义的事

},
error:function(jqXHR){
if (jqXHR.status!=200) {
alert(“ 发生错误：” + jqXHR.status);
}
}
});
跨域 Ajax 方案：
方案 A：JSONP

前端请求页面：
$.ajax({
type:”POST”,
url:’http://127.0.0.1/test/Ajax_jsonp/service.php’,
dataType:”jsonp”,
jsonp:”jsonp”,
data:{
“parameter1”:parameter_one,
“parameter2”:parameter_two
},
success:function(ret){
// 做有意义的事
alert(JSON.stringify(ret));
console.log(ret);
},
error:function(jqXHR){
if (jqXHR.status!=200) {
alert(“ 发生错误：” + jqXHR.status);
}
}
});
后端响应页面：
注意后端响应是 GET
<?php
if (!empty($_GET[‘jsonp’])) {
$jsonp = $_GET[‘jsonp’];
$ret = json_encode($_GET);
echo “{$jsonp}({$ret})”;
}
方案 B：XHR2 服务端添加响应头信息（IE10 以下不支持）
header(“Access-Control-Allow-Origin:*”);// 允许所有来源访问
header(“Access-Control-Allow-Method:POST,GET”);// 允许访问的方式
终极方案：后端代理
curl