ajax跨域请求问题求助

function dzxczx(d) {
            console.log(d);
    }
    $('.btn').click(function() {
        $.ajax({
            url : 'https://www.baidu.com/',
            type : 'GET',
            dataType : "jsonp",
            jsonp : "callback",
            success : function (d) {
                console.log(d);
            },
        })
    })

请问通过jsonp跨域出现的语法错误要怎么解决啊？

javascript ajax ajax跨域

阅读 5.2k

8 个回答

helbing

✓ 已被采纳

什么是跨域，跨域就是浏览器为了安全而不让不同域名之间可以进行消息通信，例如：http://www.xxx1.com不能与http://www.xxx2.com进行通信，http://www.xxx.com:8080不能与http://www.xxx.com:9090进行通信。当然并不是完全不能跨域比如<a>，<script>，<link>，<img>，<iframe>标签就能进行跨域，从其他域名网站中获取到数据。有时候我们异步到其他网站进行数据通信，这时候我们就能使用jsonp来解决，jsonp并不是什么特殊的技术，而是通过<script>能够跨域的特性，发送数据到服务器，服务器处理完数据后，返回一段JavaScript代码，通过这段代码调用本地写好的回调函数。

跨域例子

前端代码

var jsonpBtn = document.getElementById('jsonBtn');

// 回调函数
var callback = function(text) {
    alert(text);
};

jsonpBtn.onclick = function() {
    // 创建script标签，用来解决跨域
    var element = document.createElement('script');
    element.setAttribute('type', 'text/javascript');
    
    // 拼接URL
    var url = 'http://xxx.com/jsonp.php?callback=callback&text=huang';
    element.setAttribute('src', url);
    
    // 将script标签添加到HTML页面中
    // 这样就相当于再向http://xxx.com/jsonp.php?callback=callback&text=huang请求一段JavaScript代码
    document.body.appendChild(element);
};

后端代码

<?php
// 接受数据和回调函数
$text = $_GET['text'];
$callback = $_GET['callback'];

// 拼接数据
$data = json_encode(['text' => $text]);

// 返回数据
// 这样就相当于返回了callback('huang');浏览器接受到后就执行这段JavaScript代码
echo "{$callback}({$data});";

结论

至于题主说的语法问题根本就不存在，至少JavaScript代码这边是没错的，出问题的是在服务器那边，浏览器通过script标签获取到了百度首页的所有HTML代码，由于不是JavaScript代码所以报了语法错误。

其他解决跨域的方式

利用xhr2新特性实现跨域

在HTML5中，AJAX的跨域有了新的规则，能否实现跨域取决于服务器的应答，服务器可以在响应的头信息中加上Access-Control-Allow-Origin这个header，它的值既可以是域名也可以是*（表示任意的域名）

使用反向代理

虽然浏览器有跨域的机制，但是后端却没有这个问题，我们可以ajax请求到同域下的接口，然后接口通过curl目标地址获取数据

Aiello_Chan

86011117

发布于
2016-08-05

同上的，jsonp的原理其实就是返回一个字符串，字符串中是一个函数。比如像这样：jsonp(){return /*这里就是服务器返回的真正的数据*/}，再具体点就是这样 jsonp(){return "123";},然后你拿到这个字符串，要么把它加入到script标签中去，就能够在下面调用 var data = jsonp(); 得到数据了。

最终原理是：ajax不能跨域，但是 script 标签中引用的地址能够跨域啊，通过这样间接获取数据（蛋疼）。如果会后端语言（jsp、php、asp），就在后面写一个代理算了，感觉那样和谐点

coachmans

4.6k21328

发布于
2016-08-06

谢谢邀请。如楼上几位所说ajax跨域jsonp是需要有jsonpCallback回调函数的。参考如下

$.ajax({ 
    type: "get", 
    async: false, 
    url: "/app/actionInfo", 
    dataType: "jsonp", 
    jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) 
    jsonpCallback: "receive",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 
    success: function(data) { 
        console.log(data.name); 
    }, 
    error: function() { 
        console.log('fail'); 
    } 
});