协议(如:http/https)、域名(如:www.example.com)和端口号(默认80)都相同时,才是同一domain.凡是不同domain的,ajax请求都是不允许的,因为同源策略的限制。

下面的例子,所有请求端都是:http://localhost:1683/
所有服务端都是:http://localhost:61234/

问题:普通ajax跨域请求时,会报错

client代码:

function ajaxError() {
    var url = "http://localhost:61234/home/HelloWord";
    $.get(url, { name:"york" }, function(data, textStatus) {
        if (textStatus == "success") {
            alert(data);
        }
    });
}

服务端代码:

public string HelloWord(string name="")
{
     return "Hello " + name;
}

执行结果:

因为ajax是不允许跨域请求的,所以会出现上图的错误信息。

第一种办法 、script标签

因为script标签的src属性,可以指向任何网站,不受同一domain的限制。可以利用这个特性,将src设置为要请求的url。
首先在客户端生成一个script标签,设置器src属性为要请求的url,然后此url返回一段javascript代码,此代码可以是一句函数调用。

client代码:

function funScriptTagCallback() {
    var url = "http://localhost:61234/home/GetScriptTag?callback=callback";
    addScriptTag(url);
}

function callback(data) {
    alert(data);
}

function addScriptTag(src) {
    var script = document.createElement('script');
    script.setAttribute("type", "text/javascript");
    script.src = src;
    document.body.appendChild(script);
}

服务端代码:

public string GetScriptTag(string callback)
{
     string data = "'data_from_server'";
     return callback + "(" + data + ");";
}

执行结果:

第二种办法 、jquery的getScript函数

getScript函数用GET HTTP的方式从服务器请求js文件,然后执行它。

client代码:

function funGetScript() {
    var url = "http://localhost:61234/home/getScript";
    $.getScript(url, function(script,textStatus) {
        if (textStatus == "success") {
            alert(a);
        }
    });
}

服务端代码:

public string GetScript()
{
     return "var a='123';";
}

执行结果:

第三种办法、jsonp

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
可以使用方案一的方式,将json数据作为一个回调函数的参数,然后返回这一段js代码。在客户端定义这个回调函数。也可以用jquery对jsonp的支持,jquery将对jsonp的支持放在了$.ajax方法中,具体如下:

client代码:

function funGetJson() {
    var url = "http://localhost:61234/home/getJsonp";
    $.ajax({
        type: "get",
        async: false,
        url: url,
        dataType: "jsonp",
        //jsonp: "callback",
        //jsonpCallback: "mycallback",
        success:function(data,textStatus) {
            if (textStatus == "success") {
                alert(data);
            }
        }
    });
}

服务端代码:

public string GetJsonp(string callback)
{
     return callback + "('小明')";
}

执行结果:

注意:error响应函数不支持cross-domain 脚本 和 cross-domain JSONP 请求,即跨域请求时,不能使用error来指定处理错误情况的代码。

第四种办法:使用CORS跨域请求

CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。在服务提供者的响应头里面,设置Access-Control-Allow-Origin属性,就可以允许消费者网站对服务提供者发起ajax请求。

例如:

/*星号表示允许任何网站对本域名发起ajax请求*/
header("Access-Control-Allow-Origin:*");

/*也可以通过指定域名来限制能够发起ajax请求的网站*/
header("Access-Control-Allow-Origin:http://baidu.com");

发表评论

电子邮件地址不会被公开。 必填项已用*标注