jsonp

一、JavaScript

远程web     Target.ashx

public class Target : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        string funName = context.Request.Params["callbackFun"];

        string strData = funName + "({\"name\":\"james\",\"age\":\"18\"});";
        context.Response.Write(strData);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}

本地调用代码：

     
　　<script>
        function fun(data)
        {
            for (var key in data)
            {
                alert(data[key]);
            }
        }
    </script>

    <!--Script标签可以跨域访问-->
    <script type="text/javascript" src="http://www.oumind.com/C01Target.ashx?callbackFun=fun"></script>


二、Jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript">

        var requestUrl = "http://www.oumind.com/C01Target.ashx";

        window.onload = function () {
            document.getElementById("btnJQ").onclick = doJq;
        }
        function doJq()
        {
            //使用 jq 发送跨域请求
            $.ajax(requestUrl, {
                type:"get",
                dataType: "jsonp",// 指定 jq 发送 jsonp 请求（内部，就是动态创建一个 script 标签）
                jsonp: "callbackFun",// 指定 传递 函数名的 参数的名字 如： url?callbackFun = fun
                jsonpCallback: "fun",// 指定 回调 的 函数名
                success: function () {
                    alert("123123");
                }
            });
        }
        function fun(data)
        {
            for (var key in data)
            {
                alert(data[key]);
            }
        }
    </script>
</head>
<body>
    <input type="button" id="btnJQ" value="使用Jquery 跨域请求 - 内部其实就是动态创建 <script>标签发送 跨域请求" />
</body>
</html>

三、如果读取的远程数据仅在一个区域显示，可以在远程文件以document.write方式直接输出到引用位置。

 

 

 

posted @ 2014-04-17 15:11  秋意了了  阅读(5472)  评论(0)  编辑  收藏  举报