javascript - 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跨域 出现的语法错误要怎么解决啊？

解决方案

什么是跨域，跨域就是浏览器为了安全而不让不同域名之间可以进行消息通信，例如：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目标地址获取数据

这篇关于javascript - ajax跨域请求问题求助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！