`
123003473
  • 浏览: 1060197 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

利用Script实现JSONP跨域

 
阅读更多
1.什么是跨域

我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.

跨域问题是由于javascript语言安全限制中的同源策略造成的.

简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.

例如:


2.实现原理

在HTML DOM中,Script标签是可以跨域访问服务器上的数据的.因此,可以指定script的src属性为跨域的url,从而实现跨域访问.

例如:



这种访问方式是不行的.但是如下方式,却是可以的.

<script src=”http://192.168.0.5/Web/web1.aspx” type="text/javascript"></script>


这里对返回的数据有个要求,即:服务器返回的数据不能是单纯的如{"Name":"zhangsan"}

如果返回的是这个json字符串,我们是没有办法引用这个字符串的.所以,要求返回的值,务必是var json={"Name":"zhangsan"},或json({"Name":"zhangsan"})

为了使程序不报错,我们务必还要建立个json函数.

3.解决方案

方案一

服务器端:

    
   protected void Page_Load(object sender, EventArgs e)
        {
            string result = "callback({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

            Response.Clear();
            Response.Write(result);
            Response.End();
        }

客户端:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        var result = null;
        window.onload = function () {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://192.168.0.101/ExampleBusinessApplication.Web/web2.aspx";

            var head = document.getElementsByTagName("head")[0];
            head.insertBefore(script, head.firstChild);

        };

        function callback(data) {
            result = data;
        }

        function b_click() {
            alert(result.name);
        }
    </script>
</head>
<body>
    <input type="button" value="click me!" onclick="b_click();" />
</body></html>

方案二,通过jquery来完成

通过jquery的jsonp的方式.使用此方式,对服务器端有要求.

服务器端如下:

      
 protected void Page_Load(object sender, EventArgs e)
        {
            string callback = Request.QueryString["jsoncallback"];

            string result = callback + "({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

            Response.Clear();
            Response.Write(result);
            Response.End();
        }

客户端:
$.ajax({ 
                async: false, 
                url: "http://192.168.0.5/Web/web1.aspx", 
                type: "GET", 
                dataType: 'jsonp', 
                //jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象. 
                jsonp: 'jsoncallback', 
                //要传递的参数,没有传参时,也一定要写上 
                  data: null, 
                timeout: 5000, 
                //返回Json类型 
                  contentType: "application/json;utf-8", 
                //服务器段返回的对象包含name,data属性. 
                success: function (result) { 
                    alert(result.date); 
                }, 
                error: function (jqXHR, textStatus, errorThrown) { 
                    alert(textStatus); 
                } 
            });


实际上,在我们执行这段js时,js向服务器发出了这样一个请求:

http://192.168.0.5/Web/web1.aspx?jsoncallback=jsonp1354505244726&_=1354505244742 


而服务器也相应的返回了如下对象:

jsonp1354506338864({"name":"zhangsan","date":"2012-12-03"})此时就实现了跨域范文数据的要求.


解决js跨域问题 .
http://blog.csdn.net/macky0668/article/details/6247803
分享到:
评论

相关推荐

    html通过 ajax jsonp跨域请求接收和传送数据

    **AJAX和JSONP跨域请求的实现过程** 1. **AJAX跨域**: 通常,AJAX请求受到同源策略限制。为实现跨域,我们可以使用CORS(Cross-Origin Resource Sharing)机制。服务器需要在响应头中添加`Access-Control-Allow-...

    JSONP跨域实现百度搜索功能(v1.0.0)

    在本项目"JSONP跨域实现百度搜索功能(v1.0.0)"中,我们将深入探讨如何利用JSONP技术来实现在网页上嵌入一个能够进行百度搜索的功能。 首先,我们需要理解为什么需要JSONP。浏览器的同源策略是出于安全考虑,不允许...

    jsonp跨域解决源代码

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了HTML的`&lt;script&gt;`标签可以不受同源策略限制的特性,实现JavaScript从不同源获取数据。在本例中,我们将探讨如何通过JSONP来解决JavaScript的跨域问题,...

    jquery下利用jsonp跨域访问实现方法

    本篇文章将深入探讨JSONP的工作原理以及在jQuery下如何利用它来实现异步跨域提交表单。 ### JSONP简介 JSONP是一种解决跨域问题的技术,其核心思想是利用`&lt;script&gt;`标签不受同源策略限制的特性。当浏览器解析到`...

    原生ajax库实现jsonp跨域短小精悍

    接下来,我们来看如何编写一个简单的原生JavaScript AJAX库,支持JSONP跨域。以下是一个基本的实现框架: ```javascript function Ajax(options) { var script = document.createElement('script'); var ...

    利用JQuery jsonp实现Ajax跨域请求json数据

    本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`&lt;script...

    ajax jsonp 跨域处理

    Ajax JSONP跨域处理是Web开发中的重要技术,通过JSONP,开发者可以在不违反同源策略的前提下实现跨域数据交互。虽然JSONP存在一些限制和安全隐患,但在许多场景下,它仍然是一个实用且有效的解决方案。随着技术的...

    jquery下利用jsonp跨域访问实现方法.docx

    但JSONP巧妙地利用了HTML中`&lt;script&gt;`标签可以跨域加载资源的特性,实现了跨域数据交换。 jQuery提供了`.ajax()`和`.getJSON()`两个方法来实现JSONP。下面将详细解释这两个方法以及JSONP的工作原理。 1. **jQuery...

    JS 使用 JSONP 跨域获取用户IP

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性来实现JavaScript与服务器之间的通信。在JavaScript中,由于同源策略的限制,通常不能直接访问不同源的资源。但是...

    利用jsonp跨域调用百度js实现搜索框智能提示

    标题提到的"利用jsonp跨域调用百度js实现搜索框智能提示",即利用JSONP技术调用百度提供的API,实现在搜索框中输入关键字时,显示智能提示的功能,类似于百度搜索引擎的自动补全。 **JSONP原理**: JSONP的工作机制...

    ASPNET_JSONP_demo(jq跨域)

    本示例“ASPNET_JSONP_demo(jq跨域)”正是展示了如何在 ASP.NET 平台上构建一个 JSONP 服务,并利用 jQuery 进行跨域调用。 首先,我们需要理解 JSONP 的工作原理。JSONP 是通过动态创建 `&lt;script&gt;` 标签来请求数据...

    跨域访问解决方法-jsonp

    由于浏览器允许不同源的`&lt;script&gt;`标签加载和执行,开发者可以利用这一点来实现跨域请求。 ### JSONP工作原理 1. **客户端(浏览器)**:在JavaScript中,我们创建一个`&lt;script&gt;`元素,并设置其`src`属性为服务器...

    jsonp跨域请求数据实现手机号码查询实例分析.docx

    JSONP 是一种跨域数据交互的方案,它利用了`&lt;script&gt;`标签不受同源策略限制的特点来实现跨域数据请求。其工作流程大致如下: 1. **客户端**发起一个HTTP请求,该请求包含一个回调函数名。 2. **服务器**接收到请求后...

    jsonpajax跨域请求

    "jsonp跨域请求"可能是服务器返回的示例数据,模拟了JSONP的跨域请求过程。 总结,JSONP和CORS是解决JavaScript跨域问题的两种主要方法,它们各有优缺点,适用于不同的场景。JSONP简单易用,但安全性较低;CORS则更...

    ajax跨域CORS方案 JSONP跨域请求方案.zip

    它的原理是利用HTML的`&lt;script&gt;`标签不受同源策略限制的特性,通过动态创建`&lt;script&gt;`标签来加载服务器返回的JavaScript代码,这个代码通常是一个函数调用,参数是请求的数据。 1. **JSONP的工作流程**: - 客户端...

    JSONP实现Ajax跨域访问

    JSONP的核心思想是利用`&lt;script&gt;`标签不受同源策略限制的特点,通过动态插入`&lt;script&gt;`标签的方式获取跨域数据。具体步骤如下: 1. **本地定义回调函数**:首先,在本地页面中定义一个回调函数,该函数用于处理从...

    jsonp跨域获取数据的基础教程.docx

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了HTML中`&lt;script&gt;`标签没有同源策略限制的特点,允许网页从不同的域获取数据。在JavaScript中,由于同源策略的限制,通常不能从一个域下获取另一个域的...

    jsonp跨域调用

    ### JSONP跨域调用详解 #### 一、JSONP定义及原理 **JSONP**(JSON with Padding)是一种被广泛采用的技术,用于绕过浏览器的同源策略限制,实现跨域数据请求。虽然JSONP并不是一种正式的标准或协议,但它在实际应用...

    AJax与Jsonp跨域访问问题小结

    AJAX与JSONP跨域访问问题小结 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术。它通过使用XMLHttpRequest对象来与服务器进行异步通信。XMLHttpRequest对象...

    jQuery使用JSONP实现跨域获取数据的三种方法详解

    它利用script标签的不受同源策略限制的特性,通过动态创建script标签的方式来实现跨域请求。jQuery作为一个流行的JavaScript库,提供了简单易用的Ajax接口,其中包括了对JSONP的支持。本文将详细介绍使用jQuery实现...

Global site tag (gtag.js) - Google Analytics