什么是JSONP？

1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；

2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）；

3、于是可以判断，当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；

4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据；

5、这样子解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。

6、客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。

7、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

举个最简单的解决方案：

先看一个页面位于AAA.COM的域上，代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title>AAA.COM域上的文件</title>

  <script type="text/javascript">

    function result(data){

        alert(data);

    }

  </script>

  <script type="text/javascript" src="http://www.bbb.com/JsonpServlet?callBack=result"></script>

 </head>

 <body>

 </body>

</html>

在上述代码中，一个script标签使用src属性，请求了一个非同源位置上的一个java语言的Servlet，下面来看一下该Servlet相对应的代码：

package com.hisicom.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class JsonpServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        response.setContentType("text/html");

        //获取传过来的回调函数名称

        String callBackName = request.getParameter("callBack");

        //处理业务逻辑拼接json串

        String json = "{\"name\":\"jack\",\"sex\":\"man\"}";

        //设置响应类型

        response.setContentType("application/json");

        //将json数据返回给请求页面

        response.getWriter().write(callBackName + "(" + json + ")");

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        doGet(request, response);

    }

}

这样我们就就完成了一个最简单的跨域调用，怎么样，简单吧。马上动手试一下哇！

Javascript实现简单跨域调用的更多相关文章

  1. javascript ajax 脚本跨域调用全解析

    javascript ajax 脚本跨域调用全解析 今天终于有点时间研究了一下javsscript ajax 脚本跨域调用的问题,先在网上随便搜了一下找到一些解决的办法,但是都比较复杂.由是转到jqu ...

  2. JavaScript跨域调用、JSONP、CORS与ASP.NET Web API[共8篇]

    [第1篇] 同源策略与JSONP 浏览器是访问Internet的工具,也是客户端应用的宿主,它为客户端应用提供一个寄宿和运行的环境.而这里所说的应用,基本是指在浏览器中执行的客户端JavaScript ...

  3. 如何通过js跨域调用ASP.NET Web API （请问如何实现在javascript中通过http get的方式跨域调用ASP.NET Web API？）

    客户端js无需任何专门设置,使用通常的ajax调用即可: $.ajax({ url: '跨域URL', type: 'get', dataType: 'json', success: function ...

  4. AJAX跨域调用ASP.NET MVC或者WebAPI服务的解决方案

    问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况. 重现方式 使用模板创建一个最简单的ASP.NET Web ...

  5. 跨域调用webapi

    web端跨域调用webapi   在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...

  6. 关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案

      作者:陈希章 时间:2014-7-3 问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP.NET Web API编写的服务时,会发生无法访问的情况. 重现方式 使用模 ...

  7. 实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法

    关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...

  8. 跨域调用webapi web端跨域调用webapi

    web端跨域调用webapi   在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...

  9. web端跨域调用webapi

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...

随机推荐

  1. PyCharm基本操作

    1.1 PyCharm基本使用 视频学习连接地址:http://edu.51cto.com/course/9043.html 1.1.1 在Pycharm下为你的Python项目配置Python解释器 ...

  2. ERROR! MySQL server PID file could not be found!的解决方法

    启动MySQL服务 [root@test vhosts]# /etc/init.d/mysqld restart 提示错误: ERROR! MySQL server PID file could no ...

  3. 聊聊Java语言中的单例

    package com.xinke.mybatis.test; public class TestSingleton { private static TestSingleton ts = null; ...

  4. C#用SerialPort实现串口通讯

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  5. 开源API集成测试工具 Hitchhiker v0.2更新 - 压力测试

    Hitchhiker 是一款开源的 Restful Api 集成测试工具,支持Schedule, 数据对比,压力测试,可以轻松部署到本地,和你的team成员一起管理Api. 详细介绍请看: http: ...

  6. jfinal使用配置文件注意事情

    使用Popkit @Override public void configConstant(Constants me) { me.setViewType(ViewType.JSP); PropKit. ...

  7. （转）Java正则表达式的语法与示例

    转自:http://www.cnblogs.com/lzq198754/p/5780340.html 概要: Java正则表达式的语法与示例 | |目录 1匹配验证-验证Email是否正确 2在字符串 ...

  8. git上传遇到 GitHub could not read Username 的解决办法

    Gitversion 1.8.5.2 执行git push命令异常,如下: Push failed Failed with error: unable to read askpass response ...

  9. 25.Linux-Nor Flash驱动(详解)

    1.nor硬件介绍: 从原理图中我们能看到NOR FLASH有地址线,有数据线,它和我们的SDRAM接口相似,能直接读取数据,但是不能像SDRAM直接写入数据,需要有命令才行 1.1其中我们2440的 ...

  10. Mybatis基本用法--中

    Mybatis基本用法--中 第四部分 动态 SQL 动态 SQL 元素和使用 JSTL 或其他类似基于 XML 的文本处理器相似.MyBatis 采用功能强大的基于 OGNL 的表达式来消除其他元素 ...