javascript跨域请求解决方法总结

标签：

javascript中有同源策略，javascript存在跨域通信的问题。典型例子如：Ajax无法直接请求跨域的普通文件，存在跨域无权限访问的问题。

几种常见的解决方法：

1. JSONP  2.HTML5 postMessage 方法  3.document.domain + iframe  4.iframe+location.hash

一、JSONP

    web页面上只有<script><img><iframe>这些拥有“src”属性的标签是拥有跨域能力的。所以当前解决跨域的JSONP方案就是通过<script>的这一特性来实现的。

   原理：<script>标签的src属性是没有跨域的限制的。所以JSONP动态创建一个<script>标签，将本地方法名作为请求参数传递给src属性的url，服务器端获取请求中该参数即客户端的函数名，与要返回给库户端的json数据拼接成一个函数调用的javascript语句，返回给客户端，客户端获取返回的javascript语句并执行,该javascript函数的入参即为服务器端拼接的json数据，用这样的方法来实现在客户端来对异域服务器返回的请求数据进行处理。

    简单概括即，JSONP返回给客户端一串javascript脚本的字符串，脚本中封装json数据。所以这个就决定了JSONP必须在服务器端对返回数据进行处理，加上callback的函数名

JSONP 的相关ajax方法 ：

1.getJSON(url+"?callback=?",data,success(data,status,xhr));

例：

(server.php可以跨域放置，getJSON参数该为响应的地址即可)

function handleclick()
{
    $.getJSON("server.php?callback=?",function(data){
          alert(data.weatherinfo.city+":"+data.weatherinfo.weather);

     });
}

2.get(url+"?callback=?",data,success(data,status,xhr),"jsonp");

例：

function handleclick()
{
    $.get("server.php?callback=?",function(data){
          alert(data.weatherinfo.city+":"+data.weatherinfo.weather);

     },"jsonp");
}

3.$.ajax

例：

$.ajax({

   url:"server.php",

   dataType:"jsonp",

   jsonp:"callback",

   type:"GET",

   success:function(data){

        alert(data.weatherinfo.city+":"+data.weatherinfo.weather);

   } 

   error:function(xhr,errortext,error){

        console.log("requset state:"+xhr.readyState+";errorText:"+errortext);

  }

});

服务器端：

server.php

<?php
    header("Content-Type:text/html;charset=utf-8");
    header("Cache-Control:no-cache");
     $callfunc=$_GET["callback"];
    $content=file_get_contents("http://www.weather.com.cn/data/cityinfo/101190101.html");
     echo $callfunc."(".$content.")";

?>

ajax 和 jsonp的本质区别是ajax是通过XMLHttpRequest来获取非本页内容，不能跨域，而jsonp是通过动态添加<script>标签来获取跨域服务器返回的脚本。

二、HTML5 postMessage 方法

简单的说就是：

A端用 iframe.postMessage(json,"*"); 来发送数据。

B端用onmessage(e)方法来获取及处理A发送的跨域的数据

未完待续

javascript跨域请求解决方法总结

标签：

原文地址：http://my.oschina.net/wait106427/blog/493736