jsonp解决ajax跨域问题,用JSONP解决ajax跨域问题

JSONP:JSON With Padding

要点:

1.script标签

2.用script标签加载资源是没有跨域问题的

概要:

在资源加载进来之前先定义一个函数,这个函数接受一个参数(数据),函数里面利用这个参数做一些事情。

然后在需要的时候通过script标签加载对应远程文件资源,当远程的文件资源被加载进来的时候,就会执行我们前面定义好的函数,并且把我们想拿到的数据当做这个函数的参数传入进去。

小例子:

function fn(data){

alert(data);

}

/*

* 1.txt中的内容:fn([1,2,3]);

* 也就是执行了上面定义的fn函数

* script的src属性可以加载任何类型的文件,但文件里存放的必须是js语句

*/

程序运行结果:

当然这只是最基本的理解,对于JSONP的运用还有很多特定的规则

下面再通过两个例子说明:

首先我在自己的个人服务器上放置一个txt文件,以便跨域读取用:

注意里面的test函数,是运用JSONP的核心。

function test(data) {

var html = "";

for(var i = 0; i < data.s.length; i++) {

html += '

' + data.s[i] + '';

document.getElementById("god").innerHTML = html;

}

}

function cli() {

var oScript = document.createElement("script");

oScript.src = "ftp://linhuo:*********@hk3035.hndan.com/web/test/1.txt";

document.body.appendChild(oScript);

}

JSONP

我们再来看百度的实时推荐效果:

这也是利用了跨域加载技术,实现起来也不难:

function test(data) {

var oUl = document.getElementById("list");

var html = "";

if(data.s.length) {

oUl.style.display = "block";

for(var i = 0; i < data.s.length; i++) {

html += '

' + data.s[i] + '';

}

oUl.innerHTML = html;

} else {

oUl.style.display = "none";

}

}

window.onload = function() {

var in_put = document.getElementById("in");

var oUl = document.getElementById("list");

in_put.onkeyup = function() {

if(this.value != "") {

var oScript = document.createElement("script");

oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.value + "&cb=test";

document.body.appendChild(oScript);

}else{

oUl.style.display = "none";

}

}

}

总结

以上是编程之家为你收集整理的用JSONP解决ajax跨域问题全部内容,希望文章能够帮你解决用JSONP解决ajax跨域问题所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

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

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

相关文章

[渝粤教育] 广东-国家-开放大学 21秋期末考试社会学概论10082k1

1、社会问题是由多种因素复合而成的&#xff0c;这体现了社会问题的&#xff08;&#xff09;。&#xff08;4 分&#xff09; A&#xff0e;复杂性 B&#xff0e;时空性 C&#xff0e;破坏性 D&#xff0e;普遍性 2、从&#xff08;&#xff09;角度出发可以将社会关系划分为血…

AC-DC电源模块设计原理及10个常见疑问

01 输入和输出-地 输入接地&#xff1a;AC-DC模块电源输入端一般有3个引脚&#xff0c;火线L、零线N、保护地FG&#xff0c;FG通常和设备的机壳或电网中的地线连接。 输出接地&#xff1a;隔离型模块的输入地和输出地是不能直接相连&#xff0c;这样会失去隔离模块的意义&#…

java 8 新功能详解_Java 8的8个新功能

java 8 新功能详解注意&#xff1a;确保还检查了我们的详细教程Java 8 Features – ULTIMATE Guide 。 Jdk 1.8&#xff08;又名Java 8&#xff09;今天发布&#xff0c;这意味着它的通用发布版本已经公开发售&#xff0c;开发人员可以从早期版本转换为经过测试的版本以用于生…

什么是串口服务器?串口服务器都用在哪些领域?

我们知道串口服务器在实际应用中是很广泛的&#xff0c;那么&#xff0c;你知道什么是串口服务器吗&#xff1f;串口服务器该如何使用呢&#xff1f;今天&#xff0c;就由飞畅科技的小编来为大家详细介绍下什么是串口服务器以及串口服务器怎么使用&#xff1f;一起来看看吧 一…

[渝粤教育] 广东-国家-开放大学 互联网营销概论

1、品牌最基本的含义是品牌代表着特定的&#xff08;&#xff09;。&#xff08;2 分&#xff09; A&#xff0e;消费者类型 B&#xff0e;商品属性 C&#xff0e;利益 D&#xff0e;文化 2、网上竞价模式主要有&#xff08; &#xff09;。&#xff08;2 分&#xff09; A&…

超全超详细AC-DC电源模块测试教程!

一、 AC-DC电源模块典型应用电路 *备注&#xff1a;我司产品内部EMC相关电路&#xff0c;用户无需在外设额外增加器件&#xff0c;应用简单。 二、AC-DC电源模块基本测试方法 基本性能测试 测试仪器-参考&#xff1a;输入电压范围足够大的交流可调稳压电源&#xff0c;电流表A&…

fate服务器维护,活动维护公告(2020年4月1日 14时)

我们将于以下时间&#xff0c;对游戏服务器实施临时维护&#xff0c;在维护期间&#xff0c;将暂时无法进行游戏。因此给各位御主带来不便&#xff0c;敬请谅解。今后也请继续支持「Fate/Grand Order」。【维护时间】2020年4月1日 14:00 &#xff5e; 4月1日 19:00(预计)【维护…

HDMI切换器的各种版本能不能互通?

近几年来&#xff0c;随着高清技术的发展&#xff0c;HDMI渐渐被人们所熟知&#xff0c;受到青睐&#xff0c;许多电子产品都用到了HDMI接口&#xff0c;对于HDMI版本的更新&#xff0c;烨然很多人产生这样的疑问&#xff0c;HDMI切换器的版本能不能互通。接下来我们就跟随飞畅…

【渝粤教育】 广东开放大学21秋期末考试劳动和社会保障法10682k2

1、《集体合同规定》第3条的规定&#xff0c;集体合同是指用人单位与本单位职工根据法律、法规、规章的规定&#xff0c;就劳动报酬、工作时间、休息休假、劳动安全卫生、职业培训、保险福利等事项通过集体协商签订的书&#xff08;&#xff09;。 &#xff08;3 分&#xff09…

AC-DC电源模块怎么选择?有哪些注意事项?

一、AC-DC电源模块产品选型 首先确定电源的规格&#xff0c;根据实际需求的指标进行筛选&#xff0c;确定使用标准电源模块还是非标&#xff0c;非标电源可按需求定制生产。 *备注&#xff1a;选型框架图会随成都亿佰特电子科技有限公司的持续发展并更新 01 、选择输入电压类型…

Java equals()和hashCode()

介绍&#xff1a; Java Object类提供了方法的基本实现– hashCode&#xff08;&#xff09;和equals&#xff08;&#xff09;。 这些方法非常有用&#xff0c;尤其是在使用Collection框架时。 哈希表实现依赖于这些方法来存储和检索数据。 在本教程中&#xff0c;我们将学习h…

基于CSMA -CA协议的无线星型网络的应用案例介绍

1、CSMA/CA特点 在无线网络通信中&#xff0c;一种被称为CSMA/CA的协议解决了上诉数据冲突问题&#xff0c;CSMA&#xff08;Carrier Sense Multiple Access&#xff09;&#xff0c;中文为冲突避免的载波侦听多路访问&#xff0c;具体工作方式为&#xff0c;发送数据前&#x…

4G物联网网关和工业路由器的区别

网关和路由器是数据通信行业被广泛使用的通信设备&#xff0c;它们都是网络连接的组成部分。那么&#xff0c;4G物联网网关和传统工业路由器有哪些区别呢&#xff1f;接下来飞畅科技的小编就来为大家详细介绍下4G物联网网关和工业路由器的区别&#xff0c;一起来看看吧&#xf…

服务器系统日志有哪些centos,CentOS 分析服务器日志命令

# 分析日志文件下 2012-05-04 访问页面最高 的前20个 URL 并排序cataccess.log |grep 04/May/2012| awk {print $11}|sort|uniq -c|sort -nr|head -20# 查询受访问页面的URL地址中 含有 www.abc.com 网址的 IP 地址cataccess_log | awk ($11~/www.abc.com/){print $1}|sort|uni…

基于Modbus RTU协议的开关量控制采集简介

一、什么是开关量控制采集 所谓的开关量控制采集就是通过458/232接口发送控制命令&#xff0c;实现读取开关量输入或者控制开关量输出的通断。 二、开关量输入采集和开关量输出控制 1. 开关量输入采集就是将一个开关信号直接接入到开关量控制采集设备输入端口&#xff0c;而…

【渝粤教育】国家开放大学2018年春季 4992T农村文化建设 参考试题

试卷代号&#xff1a;4992 &#xff08;中央广播电视大学&#xff09;2018年春季学期“开放专科”期末考试 农村文化建设 试题 2018年7月 一、单项选择题&#xff08;每题3分&#xff0c;共30分&#xff09; 1&#xff0e;“观乎天文&#xff0c;以察时变&#xff1b;观乎人文&…

浅谈开关量采集回路的设计及交流干扰问题解决方案

开关量采集回路选用光耦隔离&#xff0c;光耦作为电路之间的信号传输&#xff0c;使前端与负载完全隔离&#xff0c;增加安全性&#xff0c;减少电路干扰。该回路的运行质量直接影响着保护动作的准确性&#xff0c;所以需要采取一些电路的保护措施增加开关量采集回路的安全可靠…

怎么讲服务器上的文件装进电脑,怎么把电脑文件放进云服务器

怎么把电脑文件放进云服务器 内容精选换一换Winscp无法连接到服务器。SSH连接工具例如Xshell可以正常连接云服务器。其他SSH工具连接云服务器正常&#xff0c;但是Winscp无法连接到服务器。说明SSH服务是没有问题的&#xff0c;Winscp连接基于的是SFTP协议。查看/etc/ssh/sshd_…

飞畅 8口RS-485集线器产品性能参数介绍

8口RS-485集线器&#xff0c;具有1路RS-485转8路RS-485功能&#xff0c;DC9~48V供电&#xff0c;DIN导轨安装&#xff0c;在工业自动通信中&#xff0c;可以解决多个距离比较远的R485设备连接。那么&#xff0c;什么是八口RS-485集线器&#xff1f;8口RS-485集线器产品性能参数…

【渝粤教育】国家开放大学2018年春季 7407-21T药物治疗学(本) 参考试题

试卷代号&#xff1a;7407 座位号 2017-2018学年度第二学期期末考试 药物治疗学&#xff08;本&#xff09;试题 2018年5月 一.填空题&#xff08;每空2分&#xff0c;共40分&#xff09; 1.药物进行生物转化的主要器官为___________、催化转化的酶简称______________ 。 2. 胃…