前端跨域问题,以及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每天叫醒小七的不是闹钟而是梦想!

原文地址:https://www.cnblogs.com/MagicZhao123/p/6011872.html