引自：http://kb.cnblogs.com/page/139725/

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

JSONP通过将数据(json)格式化为js的形式来实现跨域的数据调用。

<%@ page language="java" contentType="text/html; charset=GB18030"

    pageEncoding="GB18030"%>

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GB18030">

<title>Insert title here</title>

</head>

<script type="text/javascript" src="jquery-1.9.1.js"></script>

<script>

    function handleData(data){

        alert(JSON.stringify(data)); 

    }

    function loadData(){

        var url = "/myweb/TestJsonp?code=CA1998&callback=handleData";  //跨域url

        // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）

        // 创建script标签，设置其属性

        var script = document.createElement('script');

        script.setAttribute('src', url);

        // 把script标签加入head，此时调用开始

        document.getElementsByTagName('head')[0].appendChild(script);

    }

    function loadAjax(){

        var url = "/myweb/TestJsonp?code=CA1998"; //跨域url

        $.ajax({

            type: "get",  //jsonp 类型下只能使用GET,不能用POST,这里不写默认为GET

            async: false,

            url: url,

            dataType: "jsonp",

            jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

           // jsonpCallback:"handleData",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

            success: function(json){

                handleData(json);

                alert('您查询到航班信息');

            },

            error: function(){

                alert('fail');

            }

        });

    }

</script>

<body onload="loadAjax()">

</body>

</html>
package bookstore;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/**

 * Servlet implementation class TestJsonp

 */

@WebServlet("/TestJsonp")

public class TestJsonp extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#HttpServlet()

     */

    public TestJsonp() {

        super();

        // TODO Auto-generated constructor stub

    }

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        doPost(request,response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        String code = request.getParameter("code");

        String callback = request.getParameter("callback");

        response.getWriter().write(

                callback+"({code:'"+code+"'})");

    }

}

JSONP跨域数据调用的更多相关文章

  1. JSONP -- 跨域数据交互协议

    一.概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述: 跨域——通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式 ...

  2. jsonp 跨域只能调用一次ajax(无法多次调用或者循环调用)

    jsonp 跨域只能掉用一次ajax(无法多次调用或者循环调用) 百度搜索关键字:jsonp 只能调用一次ajax 解决方法 //回调函数设置,给后台执行        window[callback ...

  3. JSONP跨域jQuery处理整理（附天气数据实例）

    写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...

  4. jsonP跨域调用

    -------------------------------------jsonP跨域调用------------------------------------- <div class=&q ...

  5. 使用JSONP进行跨域Ajax 调用

    JSONP 是啥 JSONP 全称是JSON with Padding. 当需要进行跨域Ajax 调用的时候, 需要用到JSONP 协议. 客户端 $.ajax({ url: 'http://xxx' ...

  6. jsonp跨域获取数据小解

    jsonp跨域获取数据小解 由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访 ...

  7. 通用jsonp跨域技术获取天气数据

    1. 前言 在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题可以使用jsonp技术 2.代码 <!DOCT ...

  8. jquery中的jsonp跨域调用

                                                    jquery jsonp跨域调用接口

  9. jquery中的jsonp跨域调用（接口）

                                                                           jquery jsonp跨域调用接口

随机推荐

  1. android开发之单选按钮

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...

  2. 使用GDB进行调试

    下面是几篇非常好的GDB使用指南: http://www.cs.cmu.edu/~gilpin/tutorial/ http://oss.org.cn/ossdocs/gnu/linux/gdb.ht ...

  3. 使用jquery获取url以及jquery获取url参数的方法

    使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下 1.window.location.href; 其实只是用到了javas ...

  4. Visual paradigm Db Archtecture Database config

  5. 第一零四天上课 PHP TP框架下的文件上传

    控制器代码(TestController.class.php) <?php namespace Home\Controller; use Home\Controller\EmptyControl ...

  6. checkinstall打包工具使用

    checkinstall官网: http://asic-linux.com.mx/~izto/checkinstall/ 下载安装checkinstall: # git clone http://ch ...

  7. WinExec

    WinAPI: WinExec - 运行外部程序 //声明 WinExec(   lpCmdLine: LPCSTR; {文件名和参数; 如没指定路径会按以下顺序查找: 程序目录/当前目录/Syste ...

  8. Func的介绍

    经常看到  Func<int, bool>...这样的写法,看到这样的就没有心思看下去了.我们学技术还是需要静下心来. 对Func<int,bool>的Func转到定义看它的解 ...

  9. widows下jieba分词的安装

    在切词的时候使用到jieba分词器,安装如下: 切入到结巴包,执行 python setup.py install 安装后,可以直接在代码中引用: import jieba

  10. (五) 一起学 Unix 环境高级编程 (APUE) 之 进程环境

    . . . . . 目录 (一) 一起学 Unix 环境高级编程 (APUE) 之 标准IO (二) 一起学 Unix 环境高级编程 (APUE) 之 文件 IO (三) 一起学 Unix 环境高级编 ...