看了很多网上的资料,小七感觉都没有完全解决我的疑惑以及问题,所以特意拿出通俗易懂的话讲解跨域问题,以及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的区别的更多相关文章

  1. 004. 前端跨域资源请求: JSONP/CORS/反向代理

    1.什么是跨域资源请求? https://www.cnblogs.com/niuli1987/p/10252214.html 同源: 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有 ...

  2. spring boot + spring security +前后端分离【跨域】配置 + ajax的json传输数据

    1.前言 网上各个社区的博客参差不齐 ,给初学者很大的困扰 , 我琢磨了一天一夜,到各个社区找资料,然后不断测试,遇到各种坑,一言难尽啊,要么源码只有一部分,要么直接报错... 最后实在不行,直接去看 ...

  3. 前端跨域(二):JSONP

    上一篇文章 前端跨域(一):CORS 实现了跨域的一种解决方案,IE8 和其他浏览器分别通过 XDomainRequest 和 XHR 对象原生支持 CORS.这次我将补一补 Web 服务中也非常流行 ...

  4. 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

  5. 前端跨域解决方案: JSONP的通俗解说和实践

     对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...

  6. ajax跨域访问http服务--jsonp

    在前面一篇文章<Spring Cloud 前后端分离后引起的跨域访问解决方案>里我们提到使用ajax跨域请求其他应用的http服务,使用的是后台增加注解@CrossOrigin或者增加Co ...

  7. 搞懂:前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

  8. 跨域cors方法(jsonp,document.domain,document.name)及iframe性质

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. 前端跨域(一):CORS

    上周做了一个移动端表单提交的页面,其中涉及到了跨域问题,想来也是惭愧,因为之前一直都没有遇到过这个问题,因此都没有深入探索过,只是知道有哪几种方式,这次终于借这个机会可以把遗留的知识点补一补了. 1. ...

随机推荐

  1. <script>放在head内和body内有什么区别

    加载的顺序不一样,你可以把HTML看成从上往下加载的. 例如在网速慢的情况下把js代码放在body底部用户会先看到网页结构,等js加载完成后才出现特效 区别简述: 在HTML body部分中的Java ...

  2. HP小型机维护

    (一)文件系统维护 . 监控文件系统的使用 # bdf . 监控文件目录的使用 # du -sk /myfs2/* (二)网络系统维护 1. 相关配置文件 1). 主机名定义文件:/etc/hosts ...

  3. Python编程-异常处理

    一.错误和异常 1.程序中难免出现错误,而错误分成两种 (1)语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) #语法错误示范一 if #语法错误示范二 def t ...

  4. js原生插件格式解析

    一个合格的插件必须满足以下要求: 1.拥有独立作用域与用户作用域隔离,插件内的私有变量不可影响用户定义的变量 2.拥有默认参数 3.提供配置方法让用户可改变参数 4.提供监听接口,以监听页面操作 5. ...

  5. JAVAWeb学习总结(二)

    JavaWeb学习总结(二)——Tomcat服务器学习和使用(一) 一.Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的server.xml文件是配置的核心文件. ...

  6. 修改jpivot源码实现分页

    使用jpivot过程中,如果查询到的结果行数超过一个阈值,后面的显示就会丢失,这时需要分页显示. 假设应用中组装的MDX语句已经含有NON EMPTY,把空行直接过滤掉了. 这时需要修改的jpivot ...

  7. hadoop 伪分布模式环境搭建

    一 安装JDK 下载JDK      jdk-8u112-linux-i586.tar.gz 解压JDK     hadoop@ubuntu:/soft$ tar -zxvf jdk-8u112-li ...

  8. windows DPAPI加密解密学习

    #include "stdafx.h" #include <windows.h> #include <Wincrypt.h> #include <io ...

  9. 在eclipse中使用Github进行单元测试

    时间分配是找资料60%,动手实践40%.因为之前一直没怎么好好学习,导致看到使用Gunit进行单元测试的时候感觉像是看到了一行符号一样不知所措,还好现在搜索引擎很强大,找资料学习中间有找到一个现成的傻 ...

  10. c3p0 数据库连接池相关知识

    c3p0数据库连接池的配置文件放在eclipse的src目录下,代码就可以识别. c3p0的配置文件的内容如下: <!-- Uncomment and set any of the option ...