Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域...

1、认识跨域---跨域获取数据是客观存在的

  实际开发中跨域下还要获取服务端数据这种需求也是很常见的, 因为资源(即使是同一项目,不同子模块)也可能部署在不同的设备上(服务器,不同设备有不同域名或IP地址)。

  Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第1张图片

  比如:域名为a的文件通过ajax请求想访问域名为b下的文件---此时发生了跨域请求,浏览器不允许ajax跨域获取服务器数据

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第2张图片

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第3张图片

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第4张图片

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第5张图片

 2、跨域的解决方式

  Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第6张图片

  a、jsonp(jquery中提供了jsonp来解决跨域问题)---主流解决方案(开发接口比较简单,没有兼容性问题)

     Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第7张图片

   b、jsonp原理---jsonp致命问题  :只支持get请求(所以最后一般是后台通过技术解决跨域请求问题)

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第8张图片

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第9张图片

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第10张图片

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第11张图片

    静态的不常用,了解就行,一般用动态创建标签的形式

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第12张图片

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第13张图片

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第14张图片

    -------------------------------------------------------------------------------------------------------------------

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第15张图片

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第16张图片

    jsonp的本质并不是Ajax,而是。。。

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第17张图片

  c、jquery封装好了jsonp跨域获取数据

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第18张图片

    

    

 

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第19张图片

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第20张图片

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第21张图片

    若后端不叫callback,那前端可以自定义名称,jquery里面写的很灵活(前端迎合后端)

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第22张图片

       Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第23张图片

   c、jsonp应用场景

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第24张图片

    典型的jsonp接口:标准的第3方接口

     Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第25张图片

    用jquery封装好的jsonp调第3方接口(jsonp接口)查数据

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第26张图片

    Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第27张图片

    接口: 后台返回的是数据而不是完整的页面,此时的url就可以说是接口作用,接口类型可按后台返回数据类型类型来分,比如jsonp接口  json格式接口 等

    以下这个网站的接口一般都是json接口,数据都是给后台语言用的,前台想拿到这种json格式数据一般找后台给包装下,再返回给前台使用。

   Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第28张图片

     Ajax_ajax请求中的跨域问题---浏览器不允许ajax跨域获取服务器数据,那我们就用jsonp来实现跨域..._第29张图片

 

 

     

 

 

    

   

   

   

  

转载于:https://www.cnblogs.com/yangyutian/p/10961754.html

你可能感兴趣的:(javascript,后端,前端)