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

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

实现原理:
    1.客户端html写一个函数,其中形参就是所需要的数据;
    2.发送函数名称给服务器,告诉服务端一会需要调用的函数;
    3.服务端获取函数名参数,设置编码格式为 text/javascript    
    4.服务器端打印如  response.getWriter().write("a({id:1})");

客户端代码:

javascript:

 <script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
    };
    // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 创建script标签,设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head,此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script);
    </script>

Jquery:

 <script type="text/javascript" src=jquery.min.js"></script>
      <script type="text/javascript">
     jQuery(document).ready(function(){
        $.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",
                        jQuery会自动为你处理数据
             success: function(json){
                 alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。');
             },
             error: function(){
                 alert('fail');
             }
         });
     });
     </script>
 

服务器端代码:

java :

boolean jsonP = false;
String cb = request.getParameter("callback");
if (cb != null) {
    jsonP = true;
    response.setContentType("text/javascript");
} else {
    response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (jsonP) {
    out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (jsonP) {
    out.write(");");
}

C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace TC.JsonService.Handler
{
    /// <summary>
    /// FlightHandler 的摘要说明
    /// </summary>
    public class FlightHandler : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/javascript";
            context.Response.Cache.SetNoStore();
            string strJson = "localHandler({'code': 'CA1998','price': 1780,'tickets': 5});";
            context.Response.Write(strJson);
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 参考文章:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html

JS跨域请求 JSONP B/S全代码的更多相关文章

  1. js跨域请求jsonp解决方案-最简单的小demo

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  2. js跨域请求方式 ---- JSONP原理解析

    这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下     跨域请求数据解决方案主要有如下解决方法:   1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...

  3. jquery跨域请求jsonp

    服务端PHP代码  header('Content-Type:application/json; charset=utf-8'); $arr = array('a'=>1, 'b'=>2, ...

  4. js跨域请求数据的3种常用的方法

    由于js同源策略的影响,当在某一域名下请求其他域名,或者同一域名,不同端口下的url时,就会变成不被允许的跨域请求.那这个时候通常怎么解决呢,对此菜鸟光头我稍作了整理:1.JavaScript   在 ...

  5. 浏览器同源策略,跨域请求jsonp

    浏览器的同源策略 浏览器安全的基石是"同源政策"(same-origin policy) 含义: 1995年,同源政策由 Netscape 公司引入浏览器.目前,所有浏览器都实行这 ...

  6. JS跨域:jsonp、跨域资源共享、iframe+window.name

    JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...

  7. 【JS跨域请求】Ajax跨域请求JSONP

    前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白 ...

  8. JS跨域请求之JSONP

    在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. JSONP的产生 1.众所周知,Ajax请 ...

  9. js跨域请求(jsonp)

    jsonp是跨域请求的手段之一. jsonp的原理: 先来看看下面这段代码 <!DOCTYPE html> <html lang="en"> <hea ...

随机推荐

  1. NYOJ--325--深度优先搜索--zb的生日

    /* Name: NYOJ--325--zb的生日 Author: shen_渊 Date: 15/04/17 08:18 Description: 输入时计算总质量,DFS搜索和总质量差值一般最接近 ...

  2. 1.配置vsftp服务器

    1.安装 vsftp yum -y install ftp vsftpd 2.查看配置文件所在路径 rpm -qc vsftpd 3.备份vsftpd文件 cp vsftpd.conf vsftpd. ...

  3. PAT1074 Reversing Linked List (25)详细题解

    02-1. Reversing Linked List (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue ...

  4. 【机器学习笔记之七】PCA 的数学原理和可视化效果

    PCA 的数学原理和可视化效果 本文结构: 什么是 PCA 数学原理 可视化效果 1. 什么是 PCA PCA (principal component analysis, 主成分分析) 是机器学习中 ...

  5. ubuntu下apache2-php-mysql的环境配置

    基本的支持环境.暂时还不应用zend优化,因此这里就不涉及到zend optimizer的安装了.其实在ubuntu系统中中安装远比在windows系统中设置更为容易,而且在终端下设置更省事. 1.安 ...

  6. Django更新后的配置修改

    问题: Django 升级至1.7.1后,出现urls配置错误. 解决方法总结: 修改urls: 1,加入admin.autodiscover()函数. 2,除了地址admin不做修改外,其余全部删除 ...

  7. error MSB8008: 指定的平台工具集(v110)未安装或无效。请确保选择受支持的 PlatformToolset 值

    如果你的电脑上有两个不同版本的VS,或者你的程序拷贝到别人的电脑上去运行,或者你是从别人那里拷贝来的项目,而你们俩用的VS版本不一样,就会在运行的时候出现这个问题,这个错误中的v110是VS2012使 ...

  8. struts2整合JFreechart 饼图、折线图、柱形图

    struts2整合JFreechart 饼图.折线图.柱形图 上效果图: 当然可以将数据导出图片格式存储.具体下的链接里的文件有保存成图片的操作. 因为是strust2整合JFreechart,所以s ...

  9. RoutePrefix和Route 路由前缀

    使用应用到某个控制器中所有操作的路由前缀来批注该控制器. web api /// <summary> ////// </summary> [RoutePrefix(" ...

  10. 【Linux】Apache Httpd 服务管理

    基本的操作方法: 本文假设你的apahce安装目录为/usr/local/apache2,这些方法适合任何情况 apahce启动命令: 推荐 [user@master1 ~]$  /usr/local ...