bob体育官方平台
探秘ajax跨域请求

之前看到过用jsonp实现跨域,一直没有用到。现在刚好有个东西要到。试过了网上的很多方法,都没有用。最后终于搞清楚了用法,记录一下。

前言

JSNOP是一个非官方的协议,它允许在服务器端集成script tags返回至客户端,通过JavaScript callback的形式实现跨域访问。

客户端:

ajax,用苍白的话赞扬:很好。

由于同源策略的限制,XMLHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出json数据并执行回调函数,从而解决了跨域的数据请求。

复制代码 代码如下:$.ready{ $.ajax({ type: 'GET', async: false, url: remote_url, dataType: 'jsonp', jsonp: 'callback', jsonpCallback: 'fun', data: {a: 'b'}, sucess: function; } });});function fun;}

我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验;我们可以使用ajax实现小系统组合大系统;我们还可以使用ajax实现前端的优化。(好一个排比)

使用jsonp:

服务器端

虽然ajax很好,但在使用起来也会有一定的限制,出于安全考虑,不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。(下面例子1可以直观看出)

a.第一种方法

复制代码 代码如下:header('Content-Type: application/json; charset=utf-8');//输出头 //your code echo $GET['callback'] . ' . ')';

同源策略限制

<meta    content="text/html;chartset=utf-8"     http-equiv="Content-Type">

一定要调用客户端js中的回调函数,不然会出错。

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,从 Netscape Navigator 2.0 版本开始就存在。——摘自developerWorks
所谓同源是指,域名,协议,端口相同。

<script>

关于js跨越,上面一种方法需要服务端的配合,输出回调函数。

平地一声吼

function jsonpCallback(result) {

假如需要访问别人的网站抓取一些东西,除了用iframe之外,如果需要使用js,如何来处理呢。

本文讲解的是怎么利用ajax实现跨域请求,那么知道“同源策略”,就可以解决很多疑问:“为毛我的ajax加载不了数据!”“为毛浏览器控制台会对我如此漂亮的代码报错!”

//alert(result);

我们知道,服务端访问远程链接,是不存在跨域问题的。因此,我们可以绕一个弯,使用js访问我们本地的程序,在程序中访问我们的目标网址。这是一种新的思路,有需要的可以尝试一下。

例子1
先上一个错误示范

for(var i in result) {

客户端代码:

alert(i+":"+result[i]);//循环输出a:1,b:2,etc.

复制代码 代码如下:

}

<script>
    // 客户端使用getJSON方法请求另一台机子上的脚本
    $.getJSON("){
        alert(json.website);
    });
</script>

}

服务端PHP脚本代码:

var     JSONP=document.createElement("script");

复制代码 代码如下:

JSONP.type="text/javascript";

<?php
    // ajax.php
    header('Content-type: application/json');

JSONP.src="";

    echo json_encode(array('website'=>'hcoding'));
?>

document.getElementsByTagName("head")[0].appendChild(JSONP);

firefox下的错误提示:

</script>

返回顶部