sonp是跨域通信的一个协议

具体来说jsonp实现跨域请求其实是使用js文件引用(js文件不一定是.js结尾)可跨域的性质,将请求的结果包裹在客户端需要调用的js方法内部。需要前后端配合使用。

前段代码:

<script type="text/javascript">

//1.声明方法

var handler = function (data) {

alert(data.text);

};

//2.后端提供jsonp服务的地址,输出结果必须为handler(data)形式

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

var url = "http://localhost:58073/jsonpServer.aspx?text=CA1998&callback=handler";

// 创建script标签,设置其属性,利用script文件引用可跨域的特性

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

script.setAttribute('src', url);

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

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

</script>

jquery使用:

<script>

jQuery(document).ready(function(){

$.ajax({

type: "get",

async: false,

url: "http://localhost:58073/jsonpServer.aspx?text=CA1998",

dataType: "jsonp",

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

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

success: function (data) {

console.log(data);

alert(data.text);

},

error: function(){

alert('fail');

}

});

});

</script>

后端代码:

protected void Page_Load(object sender, EventArgs e)

{

string callBack = Request.QueryString["callback"];

string text = Request.QueryString["text"];

var jsonItem = new

{

code = 1,

text = text

};

var data = JsonConvert.SerializeObject(jsonItem);

Response.Write(callBack+"("+data+")");

}

jsonp实现js跨域请求的更多相关文章

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

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

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

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

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

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

  4. JS跨域请求 JSONP B/S全代码

    Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准:Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有 ...

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

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

  6. js跨域请求(jsonp)

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

  7. 关于试用jquery的jsonp实现ajax跨域请求数据的问题

    我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

  8. JSONP方法解决跨域请求

    Ajax跨域请求的问题 跨域:跨域名, 一个域名下的文件去请求了和他不一样的域名下的资源文件(注意是请求文件,而不是数据接口),那么就会产生跨域请求,下面来写一个ajax来跨域请求的例子 <!D ...

  9. 4 伪ajax:jsonp、cors 跨域请求

    一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...

随机推荐

  1. Redis的各个数据的类型基本命令

    什么是Redis: 概念: Redis (REmote DIctionary Server) 是用 C 语言开发的一个开源的高性能键值对(key-value)数据库. 特征:1. 数据间没有必然的关联 ...

  2. ES6数组去重方法

    Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员),操作方法有:add(value).delete(value).has(value).clear():遍历方法有:keys ...

  3. 移动Web开发-WebApp(flex布局+移动端导航案例)

    实际开发中的像素:css像素设备像素比dpr=设备像素/css像素标清屏dpr=1 高清屏dpr=2缩放改变的是css像素大小PPI(每英寸的物理像素点)=根号(屏幕横向分辨率²+屏幕纵向分辨率²)/ ...

  4. 【spring】spring源码阅读之xml读取、bean注入(BeanFactory)

    前言 此源码其实是在4月中旬就看了,而且当初也写了一份word文档,但不打算直接把word发上来.还是跟着以前的笔记.跟踪代码边看边写吧. 其实当初看源码的理由很简单,1.才进新公司,比较有空闲.2. ...

  5. javascript 权威指南1

    JavaScript是面向web的编程语言 web(World Wide Web)即全球广域网,也称为万维网,它是一种基于超文本和HTTP的.全球性的.动态交互的.跨平台的分布式图形信息系统.是建立在 ...

  6. openlayers画区域

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. ASP.NET Identity系列教程-2【Identity入门】

    https://www.cnblogs.com/r01cn/p/5177708.html13 Identity入门 Identity is a new API from Microsoft to ma ...

  8. 【Python】求n!

    阶乘是基斯顿·卡曼(Christian Kramp,1760-1826)于1808年发明的运算符号,是数学术语.一个正整数的阶乘(factorial)是所有小于及等于该数的正整数的积,并且0的阶乘为1 ...

  9. 无法解析的外部符号 _snprintf

    VS2010下: 在使用第三方静态库 遇到无法解析的外部符号 _snprintf . 编译第三方库的时候 看到有 warning C4013: 'snprintf' undefined; assumi ...

  10. kubernetes nodePort、targetPort、port、containerPort图解

    1. nodePort 外部机器可访问的端口. 比如一个Web应用需要被其他用户访问,那么需要配置type=NodePort,而且配置nodePort=,那么其他机器就可以通过浏览器访问scheme: ...