前端跨域问题,以及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. ...
随机推荐
- Docker容器技术-基础与架构
一.什么是容器 容器是对应用程序及其依赖关系的封装. 1.容器的优点 容器与主机的操作系统共享资源,提高了效率,性能损耗低 容器具有可移植性 容器是轻量的,可同时运行数十个容器,模拟分布式系统 不必花 ...
- jQuery仿苹果样式焦点图插件
在线演示 本地下载
- 20145239《网络对抗》- 逆向及Bof基础实践
1 逆向及Bof基础实践说明 1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件.该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串.该程序同 ...
- IOS中大文件拷贝算法
+ (void)copyFileFromPath:(NSString *)fromPath toPath:(NSString *)toPath { //每次读取数据大小 #define READ_SI ...
- JAVA使用Freemarker生成静态文件中文乱码
1.指定Configuration编码 Configuration freemarkerCfg = new Configuration(); freemarkerCfg.setEncoding(Loc ...
- 使用UNIDAC连接oracle时的参数设置
在uniconnection1里设置: server项位hostip:port:sid,如10.53.x.XX:1521:or10g 然后在Options里设置: charset:utf8 direc ...
- Oralce查询后修改数据,弹窗报提示these query result are not updateable,include the ROWID to get updateable
select t.*, (select a.ANNEXNAME from base_annex a where a.id = t.closeFile) closeFileName, (select a ...
- Qt中使用setStyleSheet对QPushButton按钮进行外观设置
Qt中使用setStyleSheet对按钮进行外观设置 字体颜色的设置一般时以下两种方案: (1)属于QWidget子类的一些控件 可以直接使用样式表,例如label->setStyleShee ...
- 使用struts2的iterator标签出现的错误
错误如下所示: 代码如下所示: <body> <s:debug></s:debug> 获取list的值第一种方式 <!-- 3 获取值栈list集合数据 -- ...
- 微信开放接口获取用户昵称保存到MySQL中为空白
微信昵称中包含emoji表情标签,某些标签是使用了4字节编码的UTF8. 而大多数MySQL数据库现在使用的是3字节UTF8编码,这样会导致保存为空,且不会提示失败. 解决方法有2个,一个是升级到My ...