ajax跨域原理以及jsonp使用
jsonp介绍：
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。
利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。
用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
默认是由与浏览器的原因使得ajax不能跨域访问：
本站域名：http://www.py_test1.com:8080/index，
跨站域名：http://www.py_test2.com:8081/index
<body>
<div>
<input type="button" onclick="ajax_test();" value="跨域"/>
<p>响应：</p>
<div class="content"> </div>
</div>
</body>
</html>
<script>
function ajax_test(){
$.ajax({
url:'http://www.py_test2.com:8081/index',
dataType:'text',
type:'post',
data:{'k1':'v1'},
success:function(data){
$(".content").text(data);
}
})
}
</script>
XMLHttpRequest cannot load http://www.py_test2.com:8081/index. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.py_test1.com:8080' is therefore not allowed access.
实际上信息已经发送到跨站域名网站中，若是信息正确，可以被处理，只是在消息回复到本站时，被浏览器进行了处理报错（同源策略）
浏览器对于ajax阻止跨域，对于script块，img块，iframe块等，其中具有src属性是允许跨域（相当于发送get请求获得资源），在许多网站中资源引入都使用跨域来完成
所以可以通过这些src属性进行跨域访问
办法一：JSONP方法
<input type="button" onclick="jsonP_test();" value="jsonP跨域"/>
function jsonP_test(){
var ele=document.createElement('script');
ele.setAttribute('src','http://www.py_test2.com:8081/index');
//添加以后就进行跨域操作
document.head.appendChild(ele);
//然后就不需要存在这个标签了
document.head.removeChild(ele);
}
但是这里面获取的资源只是简单的在script中进行了添加
<script>
// t2.get 通过get方法跨域到http://www.py_test2.com:8081/index中请求到的某些数据，无法使用
</script>
但是如果服务端，即跨域端发送某些函数
<script>
// alert(123) 会在页面直接调用弹出窗口
</script>
于是可以尝试客户端与服务端进行协商：
客户端定义好函数，服务端在传递的数据中调用该函数，并且在函数接口中传递参数
客户端定义函数：
function func(dt){
console.log(dt);
}
服务端调用并传参：
self.write('func([11,22,33]);')
即可在客户端对传递的数据进行处理。
方法二：对ajax进行修改
function jsonPajax2(){
$.ajax({
url:'http://www.py_test2.com:8081/index',
dataType:'jsonp',
jsonpCallback:'func',//发送成功后会自动执行这个函数，不写也会执行,只不过有时候会用到jsonp，需要和jsonpcallback联合使用
//jsonp:'callback',//会把jsonpCallBack中的数据传送到服务端，服务端就可以对接收的数据进行动态处理，不需要知道客户端的函数名，直接对接收的数据和需要传递的数据进行拼接就可以
});
}
这里需要客户端和服务端进行函数名称保持一致，二服务端似乎对于这个函数名并不是非常感冒，要是传入其他函数名那么久不可用了，复用性太差。所以考虑通过传参将前端的函数名传入服务端，进行灵活调用，来组成字符串
就有了
function jsonPaJax(){
//是jquery对上述jsonp方法的实现和扩展
$.ajax({
url:'http://www.py_test2.com:8081/index',
dataType:'jsonp',
jsonp:'callback',//会把jsonpCallBack中的数据传送到服务端，服务端就可以对接收的数据进行动态处理，不需要知道客户端的函数名，直接对接收的数据和需要传递的数据进行拼接就可以
jsonpCallback:'funcx',//发送成功后会自动执行这个函数，不写也会执行,只不过有时候会用到jsonp，需要和jsonpcallback联合使用
});
}
客户端随便定义一个函数，服务端在使用的时候只需要知道这个函数名是在参数callback中，进行调用组合，返回即可
def get(self):
#print(self.request.arguments)获取全部参数
callback=self.get_argument('callback',None)
self.write('%s([11,22,33]);'%func)
注意若是客户端jsonpCallback大小写写错，在服务端的callback中会出现'callback': [b'jQuery20004196553791305502_1520586446327']这种情况。
总结：实际上方法二就是在传入参数中进行了修改，我们也可以写成
function jsonPaJax(){
//是jquery对上述jsonp方法的实现和扩展
$.ajax({
url:'http://www.py_test2.com:8081/index?callback=func',
dataType:'jsonp',
//jsonp:'callback',//会把jsonpCallBack中的数据传送到服务端，服务端就可以对接收的数据进行动态处理，不需要知道客户端的函数名，直接对接收的数据和需要传递的数据进行拼接就可以
jsonpCallback:'func',//发送成功后会自动执行这个函数，不写也会执行,只不过有时候会用到jsonp，需要和jsonpcallback联合使用
});
}
或者改变方法一：
function jsonP_test(){
var ele=document.createElement('script');
ele.setAttribute('src','http://www.py_test2.com:8081/index?callback=func');
//添加以后就进行跨域操作
document.head.appendChild(ele);
//然后就不需要存在这个标签了
document.head.removeChild(ele);
}
ajax跨域原理以及jsonp使用的更多相关文章
- Ajax跨域原理及JQuery中的实现
浅析Ajax跨域原理及JQuery中的实现分析 AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请 ...
- JAVAEE——宜立方商城11：sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求（jsonp）
1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...
- 浅析Ajax跨域原理及JQuery中的实现分析
AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请求数据,就会出现错误.如果能控制数据驻留的远程服务器 ...
- ajax跨域原理以及解决方案
说明 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 强烈推荐阅读参考来源中的文章,能够快速帮助了解跨域的原理 参考来源 本文参考了以下来源 浏览器同源政 ...
- 【PHP】Ajax跨域解决方案 、jsonp、cors
参考文章: 1.https://blog.csdn.net/u014727260/article/details/72793459 (后台java,实际上差不多) 2. 如何解决ajax跨域传输 数据 ...
- [妙味Ajax]第三课：AJAX跨域解决方案：JSONP
知识点总结: JSONP(JSON with Padding): 1.script标签 2.用script标签加载资源是没有跨域问题的 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据), ...
- 前端筑基篇(一)->ajax跨域原理以及解决方案
说明 跨域主要是由于浏览器的“同源策略”引起,分为多种类型,本文主要探讨Ajax请求跨域问题 前言 参考来源 什么是跨域 ajax跨域的表现 跨域的原理 如何解决跨域问题 JSONP方式解决跨域问题 ...
- 黑马学习Ajax 跨域资源共享 jQuery+jsonp实现
- 利用jsonp进行Ajax跨域请求
在进行Ajax请求的时候经常会遇到跨域的问题,这个时候一般就会用到jsonp. 关于json和jsonp,网上有很多原理解释,这里就不多赘述,需要的自行搜索. 下面是一个简单的ajax跨域请求示例: ...
随机推荐
- 第三个sprint冲刺第三阶段
公测版:
- atcoder A - Frog 1（DP）
A - Frog 1 Time Limit: 2 sec / Memory Limit: 1024 MB Score : 100100 points Problem Statement There a ...
- [2017BUAA软工]第0次博客作业
第一部分:结缘计算机 1.你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢? 当初选择计算机专业作为自己报考大学的第一志愿,主要是看重了市场对于计算机行业人士的巨大需求,同时也感慨于计算机行 ...
- 修复PLSQL Developer 与 Office 2010的集成导出Excel 功能
Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.htm]"PerceivedType"="text&qu ...
- [转帖]Nginx 的 TCP 负载均衡介绍
Nginx 的 TCP 负载均衡介绍 https://www.cnblogs.com/felixzh/ 前几天同事问 nginx的代理 当时以为只有http的 现在看起来还有tcp的可以使用tcp 代 ...
- Oracle重新获取统计信息以及SQLSERVER重建索引
Oracle重新获取统计信息 exec dbms_stats.gather_schema_stats(ownname =>'LCoe739999',options => 'GATHER', ...
- hdu 4685(强连通分量+二分图)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4685 题意:n个王子和m个公主,王子只能和他喜欢的公主结婚,公主可以和所有的王子结婚,输出所有王子可能 ...
- pandas文件写入读取操作
#encoding:utf8 import pandas as pd import numpy as np from pylab import * df=pd.read_csv("./pat ...
- PHP的安装，编译，扩展工具
1.基本容易混淆的概念 pecl php的社区贡献扩展库,全称为PHP Extension Community Library, 是php的底层库, 使用C语言编写 pear php的应用扩展库,全称 ...
- Delphi编程中动态菜单要点归纳
一.创建菜单并添加项目 在设计程序时,有时需要动态创建菜单, 通常使用以下的语句: PopupMenu1 := TPopupMenu.Create(Self); Item := TMenuIte ...