看了很多网上的资料,小七感觉都没有完全解决我的疑惑以及问题,所以特意拿出通俗易懂的话讲解跨域问题,以及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. Linux用户和用户组管理 用户配置和管理的相关文件

    用户信息文件 /etc/passwd 这个文件中保存的就是系统中所有的用户及其对应的用户主要信息. 文件格式 :  第1字段 第2字段 第3字段 第4字段 第5字段 第6字段 第7字段 用户名称 密码 ...

  2. 使用git从本地上传至git码云远程仓库

    从 http://git-scm.com/download  下载window版的客户端.下载好,一步一步安装即可. 使用前的基本设置 git  config --global user.name & ...

  3. 20145240 《Java程序设计》第六周学习总结

    20145240 <Java程序设计>第六周学习总结 教材学习内容总结 InputStream与OutputStream 10.1.1串流设计的概念 Java将输入/输出抽象化为串流,数据 ...

  4. INSPIRED启示录 读书笔记 - 第39章 打造平台产品的经验

    最具挑战性的工作 产品管理中难度最大,也最能体现产品经理实力的是定义成功的平台产品.所谓平台产品是指一类基础软件,应该开发者能在其基础上开发应用程序 平台产品要面对三种不同的客户 1.应用软件供应商: ...

  5. c# 图片 与 BASE64 字符串 互相转换。

    using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System. ...

  6. python的pexpect详解

    Pexpect 是一个用来启动子程序并对其进行自动控制的纯 Python 模块. Pexpect 可以用来和像 ssh.ftp.passwd.telnet 等命令行程序进行自动交互.继第一部分< ...

  7. PHP(Zend Studio)入门视频

    视频地址: http://www.ev-get.com/article/2014/5/9/20962.html (去掉地址中的减号-:可以看视频) Zend Studio教学视频之Zend Studi ...

  8. 先有Class还是先有Object?

    先有Class还是先有Object? Java的对象模型中: 所有的类都是Class类的实例,Object是类,那么Object也是Class类的一个实例. 所有的类都最终继承自Object类,Cla ...

  9. COUNT(DISTINCT a.TransportOrderID)的用法

    DECLARE @StartDate DATETIME= '2017-12-20 00:00:00';DECLARE @EndDate DATETIME= '2017-12-26 00:00:00'; ...

  10. 用SQL语句删除除了id不同,其他都相同的学生表信息

    delete from <table_name> wehere id not in (select max(id) from <table_name> group by < ...