原生js实现简单JSONP

JSONP是一种非常常见的实现跨域请求的方法。其基本思想是利用浏览器中可以跨域请求外链的JS文件,利用这一特性实现数据传输。

用原生JS实现JSONP非常简单,无非几点:

1)定义一个函数,用于处理接收到的跨域数据。

2)生成一个dom节点(script节点),然后src属性上面记入发送的目的URL以及参数。

3)在跨域服务器端接收GET请求,返回数据(返回之前定义函数的调用的字符串)。

4)删除之前生成的script节点。

演示如下:

1)首先需要一个是同源服务器,一个跨域访问的服务器。

最简单的方式就是使用apache配置两个虚拟主机。

//浏览器器端
<script type="text/javascript">//定义一个发送Jsonp请求的函数function jsonp(obj) {//定义一个处理Jsonp返回数据的回调函数window["callback"] = function(object) {obj.success(JSON.parse(object));}var script = document.createElement("script");//组合请求URLscript.src = obj.url   "?fn=callback";for(key in obj.data){script.src  ="&"   key   "="   obj.data[key];}//将创建的新节点添加到BOM树上document.getElementsByTagName("body")[0].appendChild(script);	}
</script><script type="text/javascript">//调用Jsonp函数发送jsonp请求jsonp({url:"http://localhost/index.php",data:{name:"小明",},success:function(obj) {alert("性别"   obj.sex);}});
</script>

  

 

//服务器端
<?php
header('Content-Type: application/json; charset=UTF-8');$fn = $_GET["fn"];$name = $_GET["name"];
$result = array();
if($name == "小明"){
$result["sex"] = "男";
} else if($name == "小红"){
$result["sex"] = "女";
}else {
$result["sex"] = "未知";
}echo $fn . "('" . json_encode($result) ."')";

  

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361623.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 8流:Micro Katas

编程kata是一种练习&#xff0c;可以帮助程序员通过练习和重复练习来磨练自己的技能。 本文是“ 通过Katas进行Java教程 ”系列的一部分。 本文假定读者已经具有Java的经验&#xff0c;熟悉单元测试的基础知识&#xff0c;并且知道如何从他最喜欢的IDE&#xff08;我是Intelli…

Effective Java第七条:避免使用终结方法

第七条&#xff1a;避免使用终结方法 1&#xff0c; 终结方法&#xff08;finalizer&#xff09;会让程序不稳定&#xff0c;性能降低&#xff0c;出现可移植性的问题。 2&#xff0c; Finalizer在c中师析构器&#xff08;destructors&#xff09;的一部分&#xff0c;用作回…

python3基础:字符串、文本文件

字符串&#xff1a; 练习1&#xff1a; str "大胖三百磅不是二百磅陪着一百磅的小胖" print(str.replace("磅", "斤")) # 替换所有 print(str.replace("磅", "斤", 2)) # 替换两次len len(str) # 这句话的字数长度 pri…

[Python][小知识][NO.3] Python 使用系统默认浏览器打开指定URL的网址

1、前言 一般用到的地方&#xff1a; GUI交互界面下&#xff0c;单击某个按钮实现打开指定网址。 某帮助菜单项目&#xff0c;需要跳转网页显示时。 O.O 某XX程序&#xff0c;需要植入网页弹窗广告时... 2、方法 调用 webbrowser 包中的 open 函数即可。 (没安装该包的 CMD命令…

全部关于测试–第1部分

这是三个系列文章中的第一篇。 测试思路 技术技巧 工具和提示 心态 测试代码是需要学习的东西。 需要花费时间来吸收如何做好。 这是一种应该始终练习和改进的技巧。 过去&#xff0c;开发人员没有进行测试&#xff0c;而是检查了他们的代码。 这是一个很好的技巧&#xf…

利用数据库创建webservice

http://www.cnblogs.com/yungboy/archive/2011/11/07/2239642.html转载于:https://www.cnblogs.com/mingyongcheng/archive/2012/03/08/2385242.html

ASP.NET AJAX Debugging and Tracing

Moved to http://blog.tangcs.com/2008/09/30/asp-net-ajax-debugging-and-tracing/转载于:https://www.cnblogs.com/WarrenTang/archive/2008/09/30/1302328.html

JS中编码操作

常见的网页设计编码&#xff1a;Unicode的UCS-2 UCS-4 UTF-8 UTF-16 UTF-32以及ASCII和ANSI。 要知道JS最初定稿时使用的编码是UCS-2&#xff08;因为那时候还没UTF-16&#xff0c;本质&#xff1a;UTF-16就是对UCS-2的扩展&#xff0c;前面的65536个字符就是UCS-2本身&#x…

Apache Commons IO教程:初学者指南

Apache Commons IO是由Apache Foundation创建和维护的Java库。 它提供了许多类&#xff0c;使开发人员可以轻松地完成常见任务&#xff0c;并且减少样板代码 &#xff0c;而每个项目都需要一遍又一遍地编写此类库的重要性是巨大的&#xff0c;因为它们已经成熟由经验丰富的开发…

MyEclipse 10优化技巧

MyEclipse 10优化速度方案仍然主要有这么几个方面&#xff1a;去除无需加载的模块、取消冗余的配置、去除不必要的检查、关闭更新。第一步: 去除不需要加载的模块一个系统20%的功能往往能够满足80%的需求&#xff0c;MyEclipse也不例外&#xff0c;我们在大多数时候只需要20%的…

为什么应该避免JSF

长期以来&#xff0c;对我来说&#xff0c;JSF只是另一个我不太在乎的Web框架。 这改变了。 在被迫使用了几个月之后&#xff0c;我认为在几乎所有情况下&#xff0c;这都是重大的项目风险。 在这里&#xff0c;我提出此判决的理由。 UI和处理逻辑的纠缠不清。 官方教程声称以…

HTML知识点总结之img、scirpt、link标签

<img>元素 使用<img>可以在网页插入一个图片&#xff0c;但实际上<img>标签并不会在网页中直接插入图像&#xff0c;而是从网页上链接图像。 <img>的主要属性 &#xff08;1&#xff09;src属性&#xff1a;图片的路径。 &#xff08;2&#xff09;alt…

更多 Kinect for Windows 项目揭示

虽然Kinect for Windows的发布不过才过去一个月而已&#xff0c;但是到目前为止这个Xbox 360游戏设备辅助产品似乎已经赶上了一些商业企业项目了。其中包括一个让机器人自动购物车成为现实的项目。在Microsoft Power and Utilities博客 的一篇博文中&#xff0c;微软列举了一些…

CSS3的常用属性(一)

选择器 属性选择器&#xff08;通过标签属性来选择&#xff09; E[attr]&#xff1a; 表示只要元素<E>存在属性attr就能被选中 如&#xff1a; div[class]E[attrval]&#xff1a; 表示元素<E>存在属性attr的值等于val&#xff0c;即可被选中 如&#xff1a; di…

问题集锦

1、viewpager 用到了ViewPager&#xff0c;Android5.0.1&#xff0c;却额外在Build Path中引入了v4jar包&#xff0c;并且在“Order and Export”中勾选了此jar包&#xff0c;编译时出现错误&#xff1a; [2014-09-28 23:49:30 - Dex Loader] Unable to execute dex: Multiple …

ImageField,FileField上传文件命名问题

django 的models.ImageFiled,FileField有属性upload_to&#xff0c;该属性是指定将文件上传到服务器的位置&#xff0c;及存储在哪个文件夹下&#xff0c;你可以很方便甚至很少的代码就可以实现文件上传操作了。 但是默认的存储的文件名是没有改变的&#xff0c;也就是说所存储…

Spring靴子战争包装

Spring Boot建议在构建期间使用嵌入式容器&#xff08;tomcat或码头&#xff09;创建一个可执行jar&#xff0c;并在运行时将此可执行jar作为独立进程使用。 但是&#xff0c;通常将应用程序部署到外部容器上是很常见的&#xff0c;Spring Boot提供了打包应用程序的方式&#x…

递归函数

递归函数实在一个函数通过名字调用自身的情况下构成的。 1 window.onload function() {2 var a factorial;3 factorial null;4 alert(a(4));5 };6 7 /**8 * 叠乘9 * param {叠乘的基数} num n 10 * return {叠乘结果} n*(n-1)*(n-2)*...*1 11 */…

正则表达式及测试工具

1. 正则表达式 正则表达式&#xff1a;一种匹配文本中的字符序列的字符模式。在很多文本编辑器或其他工具里&#xff0c;正则表达式通常被用来检索或替换那些符合某种模式的文本内容。许多程序设计语言都支持利用正则表达式进行字符串操作。 一个正则表达式就是由普通字符&…

CCD与CMOS摄像头的区别

首先说一下在闭路电视监控中摄像机的CCD 和CMOS 的结构&#xff0c;ADC的位置和数量是最大的不同。简单的说&#xff0c;CCD每曝光一次&#xff0c;在快门关闭后进行像素转移处理&#xff0c;将每一行中每一个像素&#xff08;pixel&#xff09;的电荷信号依序传入“缓冲器”中…