AJAX-跨域解决之 JSONP
(一)AJAX
ajax 就是从某个文件中去找相关的数据,把数据拿过来以后,利用数据 分析数据 去做我们想做的事情
分两部分:拿数据
用数据
oUsername1.onblur = function() {
//(以get方式 接口地址 配参数 m,a, 当前输入的用户名 回调函数 )
拿数据--> ajax('get', 'guestbook/index.php', 'm=index&a=verifyUserName&username=' + this.value, function(data) {
alert(data);
解析数据--> var d = JSON.parse(data);//解析
用数据--> oVerifyUserNameMsg.innerHTML = d.message;
if (d.code) {
oVerifyUserNameMsg.style.color = 'red';
} else {
oVerifyUserNameMsg.style.color = 'green';
}
});
}
(二)AJAX-跨域解决之 JSONP
跨域的问题
域:域名
跨域请求(访问):一个域名下的文件请求另外一个域名下的资源,就产生了跨域
跨域的解决
Jsonp : json with padding
<script>标签
src的作用 : 加载(包含指定的外部文件)
-可以跨域包含
-被包含的资源可以是任何类型的文件(可以是txt,php等)
-他只关注被包含的文件的内容是否是合法的JS
原理
定义函数
包含外部文件,在被包含的文件中执行调用定义好的函数
参数的(数据)的实现
-问题:包含就调用,通过动态创建<script>实现按需调用
-问题:包含动态文件时可以通过一个接口实现按需生成调用函数名称
1、JSONP : JSON with Padding
1.script标签
2.用script标签加载资源是没有跨域问题的
在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情
然后需要的时候通过script标签加载对应远程文件资源,当远程的文件资源被加载进来的时候,就会去执行我们前面定义好的函数,并且把数据当作这个函数的参数传入进去
<script>
function fn(data) {
alert(data);
}
</script>
<!--<script src="2.txt"></script>-->
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
//当按钮点击的时候再去加载远程资源,让他执行
var oScript = document.createElement('script');
oScript.src = '2.txt';
document.body.appendChild(oScript);//添加到页面当中
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="按钮" />
</body>
AJAX-跨域解决之 JSONP的更多相关文章
- JAVAEE——宜立方商城11:sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求(jsonp)
1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...
- 转载的别人的ajax跨域解决方法
http://dynamic.vip.xxxxxx.com/active/<controllers>/<active>/<id> 放在浏览器地址栏中访问可以得到正确 ...
- 【PHP】Ajax跨域解决方案 、jsonp、cors
参考文章: 1.https://blog.csdn.net/u014727260/article/details/72793459 (后台java,实际上差不多) 2. 如何解决ajax跨域传输 数据 ...
- ajax 跨域解决方法
最近在开发过程中,使用ajax去异步调取图片.在开发中这个功能没什么问题,可以后来提测,重新部署之后就有问题了,这就是ajax的跨域问题. ajax核心对象XMLHttpRequest本身是不支持跨域 ...
- 跨域解决之JSONP和CORS的详细介绍
JSONP跨域和CORS跨域 什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行Jav ...
- ajax 跨域解决 网上资料
PHP中运用jQuery的Ajax跨域调用实现代码,需要的朋友可以参考下 可以在页面定义一个调用方法,如下: 复制代码代码如下: function getData(){ $.getJSON(&qu ...
- PHP Ajax跨域解决
PHP Ajax 跨域问题最佳解决方案 本文通过设置Access-Control-Allow-Origin来实现跨域. 例如:客户端的域名是client.runoob.com,而请求的域名是serve ...
- ajax跨域原理以及jsonp使用
jsonp介绍: JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. 由于同源策略,一般来说位于 server1.example. ...
- jquery ajax跨域解决
双十一开发了一个抽奖API,最近上线了,各个事业部的大神们需要前台页面,异步调用我的抽奖API,要我提供js. js 提供之后发现不对,跨域了.之前也碰到过跨域的问题,研究过这个问题,三种方法解决. ...
- ajax跨域解决办法
在使用jquery的ajax作请求时,http://127.0.0.1:8080,类似这样的一个本地请求,会产生跨域问题, 解决办法一: jsonp: var url= "http://12 ...
随机推荐
- poj 3984:迷宫问题(广搜,入门题)
迷宫问题 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7635 Accepted: 4474 Description ...
- Android 线程更新UI报错 : Can't create handler inside thread that has not called Looper.prepare()
MainActivity中有一个按钮,绑定了save方法 public void save(View view) { String title = titleText.getText().toStri ...
- Analysis Services OLAP 概述
1. 什么是OLAP •定义1 :OLAP(联机分析处理)是针对特定问题的联机数据访问和分析.通过对信息(维数据)的多种可能的观察形式进行快速.稳定一致和交互性的存取,允许管理决策人员对数据进行深入观 ...
- js 随机星星 document.createElement(); setAttribute()
js 随机星星 document.createElement(); setAttribute() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- python 文件操作总结
Python 文件I/O 本章只讲述所有基本的的I/O函数,更多函数请参考Python标准文档. 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你 ...
- Http协议提要
HTTP协议提要 简单来说,HTTP就是一个基于应用层的通信规范:双方要进行通信,大家就要遵守一个规范---HTTP协议.HTTP协议从WWW服务器超文本到本地浏览器 ,可以使浏览器更加高效.HTTP ...
- jQuery实现等比例缩放大图片
在布局页面时,有时会遇到大图片将页面容器“撑破”的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们 ...
- VS链接过程中与MSVCRT.lib冲突
vs代码生成有/MT,/MTd,/Md,/MDd四个编译选项,分别代表多线程.多线程调试.多线程DLL.多线程调试DLL. 编译时引用的lib分别为libcmt.li.libcmtd.lib.msvc ...
- list操作 foreach和for的区别
foreach只是简单的遍历读取,不能在循环中进行remove等操作. for可以
- iOS 获取当前用户的用户路径并写入文件
NSString *path = [[@"~" stringByExpandingTildeInPath] stringByAppendingString: @"/tmp ...