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

来自为知笔记(Wiz)