跨域请求问题以及相关解决方法之JSONP

相关前置知识：

Ajax 维基百科 和 MDN

Ajax （ 也可以写作 AJAX； 发音是 /ˈeɪdʒæks/； 它是异步 JavaScript 和 XML 的缩写 ） 是一组相关的 Web 开发技术，客户端使用它来创建异步的 Web 应用程序。使用 Ajax， Web 应用可以与服务器异步的发送和接收数据（在后台）而不会干扰已经存在的页面的展示和行为。数据可以通过使用 XMLHttpRequest 对象进行处理。尽管名称如此，使用 XML 并不是必须的（ JSON 经常在 AJAJ变体中使用 ），并且请求也并不是必须是异步的。
Ajax 并不是一个单一的技术，而是一组技术。可以与 HTML 和 CSS 标记和样式信息结合在一起。DOM 可以通过 JavaScript 来动态的展示 -同时允许用户与之交互- 提供的信息。JavaScript 和 XMLHttpRequest 对象提供了一种可以异步的交换数据从而避免整个页面重新加载的方法。

示例

jQuery.ajax() jQuery

保存数据到服务器并在完成之后提醒用户.

$.ajax({  method: "POST",  url: "some.php",  data: { name: "John", location: "Boston" }}).done(function( msg ) {  alert( "Data Saved: " + msg );});

获取 HTML 页面的最新版本.

$.ajax({  url: "test.html",  cache: false}).done(function( html ) {  $( "#results" ).append( html );});

XMLHttpRequest MDN

获取file.html

var xhr = new XMLHttpRequest();xhr.onload = function() {  alert(this.responseXML.title);}xhr.open("GET", "file.html");xhr.responseType = "document";xhr.send();

同源策略(Same-origin policy) 维基百科

在计算机中，同源策略(same-origin policy) 是 Web 应用程序安全模型中一个重要的概念。在这一规则下,只有当两个网页有同一个 源(origin) 时，一个 Web 浏览器才会允许包含在第一个网页中的脚本访问第二个网页中的数据。一个源通过 URI 方案，主机名，端口号的组合来定义。这一规则可以防止一个网页上的恶意脚本通过页面的 DOM(Document Object Model)访问另一个网页上的敏感数据。

JSONP 解决方式:

Client Side:

引入jQuery并且使用下面的代码

var url = "http://rhtsjz.sinaapp.com/?callback=?";$.getJSON(url, function (data) {    console.log(data);});

代码在jsfiddle: http://jsfiddle.net/rhtsjz/v94u6p4h/

Server Side:

<?php    $data = array( 'name' => 'God', 'age' => -1 );    header('Content-Type: application/json');    $callback = $_GET["callback"];    if($callback){        echo $callback . '(' . json_encode($data) . ')';      }else{        echo '(' . json_encode($data) . ')';       }?>

请求中如果有callback参数,就会在返回结果中把 json 数据放在括号内作为方法的参数, 并将 callback的值作为方法名放在括号前面;这样对于客户端来说就相当于一次方法调用.