1

我正在使用 AJAX 调用从 URL 获取数据。它给了我一个 json 对象。

当我运行该应用程序时，该页面在 IE 中运行良好，表明该页面正在访问不受其控制的信息。

这会带来安全风险。你要继续吗？

但这不适用于其他浏览器，如 Firefox、Chrome、Safari 等。

我不知道是什么问题。请向我解释它为什么会发生以及如何解决这个问题？

我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Search Engine</title>
    <script src="JS/jquery-1.4.2.min.js"></script>
    <script>
    $(document).ready(function () {
        $.support.cors = true;
        // create a script tag element
        var script = document.createElement("script");
        // set the attribute, using the URL to pass data via query parameters
        script.setAttribute("src", "http://192.168.13.111:7090/?uname=bhagirathip&wt=json&fl=*,score");
        script.setAttribute("type", "text/javascript");
        // add the script tag to the document head, forcing an HTTP request
        document.getElementsByTagName("head")[0].appendChild(script);
    });
    function Search() {
        function callbackJsonHandler(data) {
             alert(data);  // This is the JSON data
        }
    }
</script>
</head>
<body>
    <form id="form">
        <div style="text-align: center">
        <input type="search" id="searchInput" autofocus />
        <input type="button" id="btnSearch" onclick="Search()" value="Search" />
    </div>
</form>
</body>
</html>
4

2 回答 2

2

您不能跨域进行跨域 AJAX 调用。这是 Web 浏览器中的一项安全功能，可防止恶意 JavaScript 代码抓取网页中呈现的数据，然后将其发送到其他域上的某个流氓网站。

通过将 AJAX 请求限制在同一域中，浏览器供应商确保从其他来源导入的 JavaScript 不能将数据发送到提供 HTML 页面的服务器以外的任何服务器。

在 Internet Explorer 中，它会提示您，但任何遇到此类消息的聪明用户都可能会拒绝。向您的用户展示此类警告消息不是一个好的设计实践，也不会激发您对应用程序合法性的信心。

您可以跨域发送数据的唯一方法是使用一种称为“脚本标记远程处理”的浏览器黑客技术，该技术本质上涉及使用不受相同域策略限制的 HTML 元素。例如，script标签可以向任何服务器发出 HTTP GET 请求：

// create a script tag element
var script = document.createElement("script");

// set the attribute, using the URL to pass data via query parameters
script.setAttribute("src","http://192.168.9.11/userInput/?key="+userInput);
script.setAttribute("type","text/javascript");

// add the script tag to the document head, forcing an HTTP request
document.getElementsByTagName("head")[0].appendChild(script);

使用此方法，您可以将数据发送到远程服务器。请注意，要取回 JSON 数据，您必须将其包装或填充到 JavaScript 函数中，并在 JavaScript 代码中定义回调以处理响应：

function callbackJsonHandler(data) {
    alert(data);  // This is the JSON data
}

并且您的服务器端代码必须返回内容文本/javascript，调用处理程序，并将您的 JSON 作为参数传递：

callbackJsonHandler({"key":"value","key1":"value2"});

当浏览器将 JavaScript 下载到浏览器时，JavaScript 会立即运行，从而为您提供一个挂钩来访问响应中的 JSON。

由于您使用的是 jQuery，因此您还可以查看jQuery JSONP或带有 Padding 的 JSON，它可用于生成 JavaScript 响应，以便您可以处理从这些请求到远程服务器的回调。请注意，必须设置服务器以处理 JSONP 请求才能正常工作，类似于上述设置。

于 2012-10-16T07:55:56.657 回答
0

从 HTML 文档从 exampleA.com 提供给域为 exampleB.com 的服务器的浏览器发出跨域请求的另一个解决方案是使用代理。

假设您正在使用的 HTML 文档是从 exampleA.com 提供的。您拥有 exampleA.com，您可以访问服务器端和客户端代码。另一方面，exampleB.com 是由其他人拥有或控制的远程服务器。exampleB.com 有一些您想在 exampleA.com 中使用的数据。

我们知道 AJAX 不会起作用，因为同源策略是为了保护流氓应用程序不会对人们的数据做坏事。但是，服务器不限于相同的域策略。这意味着您的应用可以执行以下操作：

||exampleA.com/test.html|| ---> http req --> ||exampleA.com/getData|| --http req --> ||exampleB.com/getJSON||

服务器端：（如在您的服务器中，exampleA.com）：

换句话说，在您用于提供 HTML 的服务器上，您编写了一些代码，从您的服务器向第三方服务器发出 HTTP 请求：

// JSON URL which should be requested
$json_url = 'http://www.exampleB.com/getJSON';

// Initializing curl
$ch = curl_init( $json_url );

// Configuring curl options
$options = array(
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => array('Content-type: application/json') 
);

// Setting curl options
curl_setopt_array( $ch, $options );

// Getting results
$result =  curl_exec($ch); // Getting JSON result string

有关更多详细信息，请参阅使用 PHP Curl 获取 JSON 数据。每个服务器端平台都能够与服务器建立 HTTP 连接。

// now, send the data in the response
HttpResponse::status(200);
HttpResponse::setContentType('application/json');
HttpResponse::setData($result);
HttpResponse::send();

请参阅PHP HTTPResponse。同样，您使用的任何语言都应该能够从字符串返回数据。

假设您使用的是 PHP，请将上面的代码放在一个名为“getJSON.php”的文件中。<?php确保文档的开头和开头之间没有空格；否则，您将无法设置标题。发送此响应可能有更好的方法，但由于未指定您的平台，我将把它作为练习留给读者。

客户端代码：

    var searchURL = "/getJSON.php"; //From this URL json formatted data is present.
    $.ajax({
        url: searchURL,
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            try {
               alert(data);
            }
            catch (err) {
               alert(err);
            }
        }
    });

现在，在上面的 JavaScript 代码中，您向服务器 exampleA.com发出同域 AJAX 请求，然后您的服务器代表您向 exampleB.com 发出请求以获取数据，然后 exampleA.com 将数据返回对浏览器的响应。

于 2012-10-18T21:10:28.333 回答