Fatal编程技术网
  • ajax/
  • Ajax 跨域问题（在IE中工作而不是在其他浏览器中）

Ajax 跨域问题（在IE中工作而不是在其他浏览器中）

ajax jquery

Ajax 跨域问题（在IE中工作而不是在其他浏览器中）,ajax,jquery,cross-domain,Ajax,Jquery,Cross Domain,我使用AJAX调用从URL获取数据。它给了我一个json对象 当我运行应用程序时，页面在IE中运行良好，其构象如下 页面正在访问不受其控制的信息 这会带来安全风险。你想继续吗 但这在Firefox、Chrome、Safari等其他浏览器中不起作用 我不知道是什么问题。请向我解释为什么会发生这种情况，以及如何解决这个问题 我的代码： <!DOCTYPE html> <html> <head> <title>Search Engine</

我使用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>

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


搜索引擎
$（文档）.ready（函数（）{
$.support.cors=true；
//创建脚本标记元素
var script=document.createElement（“脚本”）；
//设置属性，使用URL通过查询参数传递数据
script.setAttribute（“src”http://192.168.13.111:7090/?uname=bhagirathip&wt=json&fl=*，分数）；
setAttribute（“type”、“text/javascript”）；
//将脚本标记添加到文档头，强制执行HTTP请求
document.getElementsByTagName（“head”）[0].appendChild（脚本）；
});
函数搜索（）{
函数callbackJsonHandler（数据）{
警报（数据）；//这是JSON数据
}
}
您不能跨域进行跨域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
}
服务器端代码必须返回content text/javascript，调用处理程序，并将JSON作为参数传递：

callbackJsonHandler({"key":"value","key1":"value2"});
当浏览器将JavaScript下载到浏览器中时，JavaScript会立即运行，为您提供一个钩子来访问响应中的JSON

因为您使用的是jQuery，所以还可以签出或使用带填充的JSON，这可以用来生成JavaScript响应，以便您可以处理从这些请求到远程服务器的回调。请注意，必须对服务器进行设置，以处理JSONP请求，才能使其正常工作，类似于上述设置。

从exampleA.com提供HTML文档的浏览器向域为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）：

<!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>

    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);
            }
        }
    });
换句话说，在用于提供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
有关更多详细信息，请参阅。每个服务器端平台都能够与服务器建立HTTP连接

// now, send the data in the response
HttpResponse::status(200);
HttpResponse::setContentType('application/json');
HttpResponse::setData($result);
HttpResponse::send();
看。同样，您使用的任何语言都应该能够从字符串返回数据

假设您使用的是php，将上述代码放在一个名为“getJSON.php”的文件中。确保开头的
之间没有空格，正如下面的答案中
jmort253
所指出的，您可以使用
jsonp
和
callback
来实现它，这应该很容易，因为您使用的是
jquery
。我不清楚您想做什么。您仍在尝试进行跨域ajax调用，这是行不通的，而且您还在document.ready中进行脚本标记请求，这将用于发出请求，但要检索数据，必须将数据作为函数调用发送回浏览器。您需要一个
函数callbackJsonHandler（data）
就像我在回答中所说的那样，并且您的服务器必须发回一个
callbackJsonHandler（{/*JSON在这里*/）这将有助于看到服务器端代码在发送响应时所涉及的内容。请考虑在AN中添加它。您可以共享一步一步的方法吗？实际上我在jQuery中很弱。我必须在服务器中进行更改吗？事实上，我不能访问Servi添加另一个描述代理方法的答案。它是一个LITT。le broad，您缺少一些细节，比如您使用的服务器端语言、谁拥有服务器以及其他重要细节，但这应该会让您开始。祝您好运！我使用asp.net C#作为服务器端。是否有其他方法可以访问跨域数据而不使用ajax。如果我们使用access-Control-Allow-O，我在其中读到了一些内容我们可以进入的地方