ajax中的同步异步和跨域请求
ajax中的同步异步和跨域请求
同步异步
demo.html
<script>
$.ajax({
type: "get",
async: false,
data: "random="+Math.random(),
url: "get_data.php",
dataType: "json",
success: function(data) {
console.log(data.a);
},
error: function() {
console.log('Request Error.');
}
});
console.log('xxxxxxxxxxxxxxx');
</script>get_data.php
$_arr= array('a'=>1,'b'=>2,'c'=>3);
$_result = json_encode($_arr);
sleep(10);
echo $_result;一、同源政策
1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。
最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。
- 协议相同
- 域名相同
- 端口相同
举例来说，http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据 具体查看同源政策
二、3种方法规避同源限制
1、页面上引入不同域上的js脚本
<script>
//回调函数
function showData(result) {
var data = JSON.stringify(result); //json对象转成字符串
$("#text").val(data);
}
$(function(){
$('#bt').click(function(){
$("head").append("<script src='http://localhost:8083/get_data.php?callback=showData'><\/script>");
});
})
</script>服务器端
function isAjax() {
return @$_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' ? true : false;
}
header("content-type:application/json;charset=utf-8");
$_arr = array('name'=>'jack','age'=>18,'sex'=>1);
$_result = json_encode($_arr);
$_callback = $_GET['callback'];//关键在这。配合客户端JS使用
echo $_callback."($_result)";//php用点号实现字符串拼接2. jquery的jsonp方式跨域请求
最简单的方式，只需配置一个dataType:'jsonp'，就可以发起一个跨域请求。jsonp指定服务器返回的数据类型为jsonp格式，可以看发起的请求路径，自动带了一个callback=xxx，xxx是jquery随机生成的一个回调函数名称
$('#bt').click(function(){
$.ajax({
url: "http://localhost:8083/get_data.php",
type: "GET",
dataType: "jsonp", //指定服务器返回的数据类型
success: function (data) {
var result = JSON.stringify(data); //json对象转成字符串
$("#text").val(result);
}
});
});3.使用jsonpCallback
<script>
//回调函数
function showData(result) {
var data = JSON.stringify(result); //json对象转成字符串
$("#text").val(data);
}
$(function(){
$('#bt').click(function(){
$.ajax({
url: "http://localhost:8083/get_data.php",
type: "GET",
dataType: "jsonp", //指定服务器返回的数据类型
jsonpCallback: "showData",
success: function (data) {
console.log(data);
}
});
});
})
</script>三、Ajax跨域资源共享：CORS
CORS，又称跨域资源共享，英文全称Cross-Origin Resource Sharing。假设我们想使用Ajax从a.com的页面上向b.com的页面上要点数据，通常情况由于同源策略，这种请求是不允许的，浏览器也会返回“源不匹配”的错误，所以就有了“跨域”这个说法。但是我们也有解决办法，我们可以再b.com的页面header信息中增加一行代码：
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Origin: http://www.helloweba.com");示例：通过CORS跨域请求数据 域名：www.abc.com 下
<script>
$.ajax({
type: "get",
data: "random="+Math.random(),
url: "http://www.study.com/ajax/get_data.php",
dataType: "json",
success: function(data) {
console.log(data.a);
},
error: function() {
console.log('Request Error.');
}
});
</script>域名www.study.com下
header("Access-Control-Allow-Origin: http://www.abc.com");
$_arr = array('a'=>1,'b'=>2,'c'=>3);
$_result = json_encode($_arr);
exit($_result);多个域名情况
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
$allow_origin = array(
'http://www.study.com',
'http://client2.runoob.com'
);
if(in_array($origin, $allow_origin)){
header('Access-Control-Allow-Origin:'.$origin);
}
