ajax使用json跨域

在前端开发中，经常会遇到需要从不同的域名下获取数据的情况，而出于安全性考虑，浏览器会禁止跨域访问。这时我们可以使用ajax进行跨域请求，并且结合json格式来获取数据。

//使用ajax进行跨域请求，其中url需要写全路径，包含协议和端口号
$.ajax({
    url: 'http://www.example.com/getData.PHP',type: 'get',dataType: 'jsonp',//注意将dataType设为jsonp
    success: function (data) {
        //此处data就是从其他域名返回的json数据
        console.log(data);
    },error: function () {
        console.log('获取数据失败！');
    }
});

ajax使用json跨域

在上面的代码中，我们通过设置dataType为jsonp，告诉ajax请求远程服务端时采用jsonp方式，这样即使服务端与客户端不在同一域名下，也可以成功获取数据。

在服务端，需要将返回的数据格式化为json格式，并且在请求中加上callback参数，例如：

//getData.PHP代码示例，返回格式化的json数据
$callback = $_GET['callback']; //获取请求中的callback参数
$data = array(
    'name' => '张三','age' => 25
);
echo $callback . '('. json_encode($data) .')'; //返回jsonp格式数据

在服务端返回数据时，将数据和callback参数一起返回，浏览器就会解析这段jsonp数据，取出callback中定义的回调函数，并将数据作为参数传入执行，最终将数据渲染到页面中。

因为jsonp是一种比较简单的跨域方式，因此在现实场景中也经常被使用。当然，jsonp也存在一些缺点，例如安全性问题以及只支持get请求等，开发者需要根据实际情况选择使用。

ajax使用json跨域

相关文章