前端跨域问题,以及ajax,jsonp,json的区别
看了很多网上的资料,小七感觉都没有完全解决我的疑惑以及问题,所以特意拿出通俗易懂的话讲解跨域问题,以及ajax,jsonp,json的区别。
首先先说跨域问题
什么时候需要跨域?
【1】域名不同(即网址不同, www.yangwei.com 和www.wuyu.com 即为不同的域名)
什么?你不懂什么叫域名,好,满足你:域名就是网址,域名有顶级域名,一级域名,二级域名...不管是几级域名都是其顶级域名的子域名,拿 www.yangwei.com举例,.com是顶级域名 www.yangwei.com是一级域名 www.xxx.yangwei.com是二级域名 www.yangwei.com和www.xxx.yangwei.com都是.com的子域名)
【2】协议不同 ( http://www.yangwei.com 和https://www.yangwei.com属于跨域)https是保密的而http是公开的
【3】端口不同(www.yangwei.con:8888和www.yangwei.con:8080)
怎么跨域的问题?
1.前端的方式: possMessage,window.name,document.domain,image.src(得不到数据返回),jsonP(script.src后台不配合得不到数据返回),style.href(得不到数据返回)
2.纯后端方式: CORS,服务器代理(PHP请求头方式)CORS 是w3c标准的方式,通过在web服务器端设置:响应头Access-Cntrol-Alow-Origin 来指定哪些域可以访问本域的数据,服务器代理,同源策略只存在浏览器端,通过服务器转发请求可以达到跨域请求的目的,劣势:增加服务器的负担,且访问速度慢。
3.前后端结合:JsonP(这种是最长见的方式)。
4.webSocke(了解性拓展)
在这里小七只介绍PHP请求头和jsonp两种方式,其他的自行百度,首先先明确一下:
【1】ajax(自己)是不能跨域的,ajax直接请求普通文件存在跨域无权限访问的问题,只要是跨域请求,一律不准;但是配合后台可以跨域因为同源策略限制的是浏览器但是对服务器不限制,服务器可以跨域,下面以PHP请求头为例讲解,
【2】ajax和jsonp本质上是不同的东西。Ajax是异步的js他的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
【3】ajax和jsonp这两种技术很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery类库把jsonp作为ajax的一种形式进行了封装(其实并不是一种东西)怪jq唠?用着爽就好;
好了重头戏开始了,提好你的裤带,设定情景你想跨域获取聚合数据上的数据(人家写好的接口数据这个不重要理解精髓就好)先介绍jsonp的使用方法:
好人做到底源码给你唠
$(function(){
$.ajax({
type: "get",
url: "http://apis.juhe.cn/cook/query.php?menu=鱼香肉丝&key=dfed9d599318b17aa073a9337d057e5f",
dataType: "jsonp"
}).done(function (data) {
console.log(data)
})
});
服务器运行的结果完美跨域获取到数据
再介绍PHP配合ajax跨域:
先建立一个后缀名为.php的文件名字自己想,不会吧名字也让我起,啊,再见朋友我的叫search.php!
内容为:
<?php
$data =$_POST['data'];
//服务器来接收客户端发送的数据
//服务器允许 该请求头进行跨域
header("Access-Control-Allow-Origin:http://apis.juhe.cn/cook/query.php?".$data."&key=dfed9d599318b17aa073a9337d057e5f");
// 服务器获取数据的方式
header('Access-Control-Allow-Methods:GET');
// 动态获取数据地址
$ulr ="http://apis.juhe.cn/cook/query.php?".$data."&key=dfed9d599318b17aa073a9337d057e5f";
// 服务器讲获取的数据转换成JSON格式 返回给客户端
$html=file_get_contents($ulr);
// 返回客户端 echo 返回一个字符串
echo $html; //服务器来返回一个 string的 数据
?>
Index.html的内容为:
运行结果:
最后小七再说一下json和jsonp的区别json是一种数据格式而jsonp是一种跨域的方式根本不是一回事只是名字差不多,小七要睡了,zzzzzz每天叫醒小七的不是闹钟而是梦想!
前端跨域问题,以及ajax,jsonp,json的区别的更多相关文章
- 004. 前端跨域资源请求: JSONP/CORS/反向代理
1.什么是跨域资源请求? https://www.cnblogs.com/niuli1987/p/10252214.html 同源: 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有 ...
- spring boot + spring security +前后端分离【跨域】配置 + ajax的json传输数据
1.前言 网上各个社区的博客参差不齐 ,给初学者很大的困扰 , 我琢磨了一天一夜,到各个社区找资料,然后不断测试,遇到各种坑,一言难尽啊,要么源码只有一部分,要么直接报错... 最后实在不行,直接去看 ...
- 前端跨域(二):JSONP
上一篇文章 前端跨域(一):CORS 实现了跨域的一种解决方案,IE8 和其他浏览器分别通过 XDomainRequest 和 XHR 对象原生支持 CORS.这次我将补一补 Web 服务中也非常流行 ...
- 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
- 前端跨域解决方案: JSONP的通俗解说和实践
对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...
- ajax跨域访问http服务--jsonp
在前面一篇文章<Spring Cloud 前后端分离后引起的跨域访问解决方案>里我们提到使用ajax跨域请求其他应用的http服务,使用的是后台增加注解@CrossOrigin或者增加Co ...
- 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...
- 跨域cors方法(jsonp,document.domain,document.name)及iframe性质
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 前端跨域(一):CORS
上周做了一个移动端表单提交的页面,其中涉及到了跨域问题,想来也是惭愧,因为之前一直都没有遇到过这个问题,因此都没有深入探索过,只是知道有哪几种方式,这次终于借这个机会可以把遗留的知识点补一补了. 1. ...
随机推荐
- Raspberry Pi开发之旅-同步时间
使用htpdate同步时间 由于树莓派板子上没有 RTC 硬件和电池,因此树莓派上的系统时间重启是保存不了的.网上已经有人想到应对 NTP 被防火墙封掉类似的需求了,开源的 htpdate 命令直接使 ...
- @MarkFan 口语练习录音 20140518 [超凡蜘蛛侠2-格温的演讲[中文]&驯龙骑士选节口语录音]
一个人看不到未来,就把握不了现在 生命中最值得珍惜的,其实并不是永恒的 正因为它会结束,使其变得弥足珍贵,而且将一去不复返 让我们谨记时间就是运气,所以不要把它浪费在别的生活上 让你的生活过得更有价值 ...
- 自定义美化UL OL发光列表
在线演示 本地下载
- Docker 数据管理-tmpfs mounts
Use tmpfs mounts Volumes and bind mounts are mounted into the container’s filesystem by default, and ...
- hive -e 时转义需要再加一个\
hive窗口中使用转义字符: select split(concat_ws('|','123','456','789'),'\\|')from dual; 参考 http://jingyan.baid ...
- java基础(8)-集合类
增强for循环 /* *增强for循环 * for(元素类型 变量:数据或Collection集合){ * 使用变量即可,该变量就是元素 * } * 优点:简化了数组和集合的遍历 * 缺点:增强for ...
- Qt qobject_cast用法 向下转型
函数原型: T qobject_cast ( QObject * object ) 本方法返回object向下的转型T,如果转型不成功则返回0,如果传入的object本身就是0则返回0. 在使用时有两 ...
- 解决fasterxml中string字符串转对象json格式错误问题
软件152 尹以操 springboot中jackson使用的包是fasterxml的.可以通过如下代码,将一个形如json格式string转为一个java对象: com.fasterxml.jack ...
- Linux软件安装常用方法
1.软件安装卸载,分几种情况: A:RPM包,这种软件包就像windows的EXE安装文件一样,各种文件已经编译好,并打了包,哪个文件该放到哪个文件夹,都指定好了,安装非常方便,在图形界面里你只需要双 ...
- b树的实现(c++)
转自:http://blog.chinaunix.net/uid-20196318-id-3030529.html B树的定义 假设B树的度为t(t>=2),则B树满足如下要求:(参考算法导论) ...