ajax和jsonp跨域的原理本质详解

为什么会有跨域问题? - 因为有同源策略

同源策略是浏览器的一种安全策略,所谓同源指的是 请求URL地址中的 协议, 域名 和 端口 都相同,只要其中之一不相同就是跨域

同源策略主要为了保证浏览器的安全性

在同源策略下,浏览器 不允许 Ajax跨域获取服务器数据

http://www.example.com/detail.html

跨域请求:

  • http://api.example.com/detail.html 域名不同
  • http://www.example.com:8080/detail.html 端口不同
  • http://api.example.com:8080/detail.html 域名、端口不同
  • https://api.example.com/detail.html 协议、域名不同
  • https://www.example.com:8080/detail.html 端口、协议不同

ajax的基本概念

了解这个概念,首先得先知道同步交互与异步交互

  • 同步交互:客户端浏览器给服务器发送一个请求,服务器返回一个页面,返回的页面会把之前的页面覆盖掉,我们把这种交互方式称为同步交互
  • 异步交互:就是可会断浏览器给服务器发送一个请求,服务器返回数据,返回的数据不会把之前的页面覆盖掉,我们把这种交互方式称之为异步交互

ajax主要的应用场景:页面不刷新,就可以与服务器进行动态的数据交互

交互的原理

  • 同步交互原理:我们在浏览器,怎么给服务器发送请求呢?可以点击超链接,提交表单,浏览器地址栏输入地址,都是给服务器发送请求,实际上是浏览器帮助我们给服务器去发送请求
  • 异步交互的原理:JavaScript给我们提供了一个新的API接口,帮我们去发送http请求,由XMLHttpRequest 对象来帮助我们发送请求

我们所有的交互操作都可以通过这个对象来完成,发送请求,接受服务器的数据

ajax的具体应用场景

  • 前台可以通过XMLHttpRequest 给服务器发送请求,然后再通过XMLHttpRequest 对象来接受服务器返回的数据,最后通过dom操作把数据写到页面上
  • ajax:可以用来表单输入规范验证
  • ajax:也可以用来做性能优化,比如一个页面非常庞大,这个页面不可能一次加载完毕,实现一个滚动加载

XMLHttpRequest 交互的四个步骤

1,实例化XMLHttpRequest 对象

2,想和服务器进行交互,必须和服务器打开一个连接

3,给服务器发送数据,发送参数数据到服务器

4,接受服务器返回的数据,服务器在返回给客户端的时候会返回一些状态,可以通过监听服务器状态的改变,来更好的操控整个交互流程

ajax跨域

跨域:假设我访问 a 站点,后台返回给我一个页面,然后我又想在 a 站点的这个页面去访问 b 站点的资源,这就是一个跨域的效果,跨域浏览器是有安全限制的

解决·跨域的方式:jsonp方式

JSONP 全称是 JSON with Padding ,是基于 JSON 格式的为解决跨域请求资源而产生的解决方案。他实现的基本原理是利用了 HTML 里 <script></script> 元素标签,远程调用 JSON 文件来实现数据传递。如要在 a.com 域下获取存在 b.com 的 JSON 数据( getUsers.JSON ):

jsonp解决跨域的本质原理:由于浏览器有同源限制,不同站点之间不能相互访问,但是有时候我们就是想要获取其他站点的数据,比如加入我们想要获取一下急速数据的天气预报数据,这肯定跨域了,那么我们该怎么办呢?

原理:就是动态创建<script>标签,然后利用<script>的src 不受同源策略约束来跨域获取数据。

这样在后台就可以获取到前台传过来的那个回调函数,,最后后台返回这个函数的调用,参数为前台请求的数据

js代码

<script type="text/javascript">
 function handleResponse(response){
   console.log(response);
 }
</script>

<script type="text/javascript">
 window.onload = function() {

 var oBtn = document.getElementById('btn');

 oBtn.onclick = function() { 

  var script = document.createElement("script");
  script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
  document.body.insertBefore(script, document.body.firstChild);
 };
};
</script>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • 原生js的ajax和解决跨域的jsonp(实例讲解)

    最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了. 不说废话,先上一个用ajax请求下本地的一个.txt文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload =function(){ var oBtn = d

  • jsonp跨域获取数据的基础教程

    前言 由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访问非同源的js脚本,所以通过src属性访问服务器会返回函数的js代码,而我们想要的数据就作为函数参数返回,而我们会先定义这个函数,返回的js代码就可执行 (2) jsonp实现代码 请求页面 <!DOCTYPE html> <html> <head> <title></titl

  • 快速解决跨域请求问题:jsonp和CORS

    网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 CORS 的都是行不通的,老是缺那么一两个关键的配置.本文只想解决问题,所有的代码经过亲自实践. 本文解决跨域中的 get.post.data.cookie 等这些问题. 本文只会说 get 请求和 post 请求,读者请把 post 请求理解成除 get 请求外的所有其他请求方式. JSONP JSONP是利用浏览器对script的资源引用没有同源限制,通过动态插入一个script标签,当资源加载到页面后会立即执行的原

  • 跨域解决之JSONP和CORS的详细介绍

    JSONP跨域和CORS跨域 什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行JavaScript脚本时,会检查这个脚本属于那个页面,如果不是同源页面,就不会被执行. JSONP跨域 只支持GET请求,不支持POST等其它请求,也不支持复杂请求,只支持简单请求. CORS跨域 支持所有的请求,包含GET.POST.OPTOIN.PUT.DELETE等.既支持复杂请求,也支持简单请求

  • 跨域请求两种方法 jsonp和cors的实现

    在网站后台跨域访问另一服务器时,若被访问服务器未设置response['Access-Control-Allow-Origin'] = '*' 那么将无法获取. jsonp方法 伪造ajax提交请求 请求端 // 基于jsonp // 原理: ajax 不能直接跨域 . //向html中加入script标签 含有访问路径,script标签直接访问路径达到效果 $('.get_service2').click(function () { // 伪造ajax提交请求 $.ajax({ url:'ht

  • 基于vue-resource jsonp跨域问题的解决方法

    最近在学习vue.js 碰到个ajax跨域请求的问题,之前知道可以用jsonp解决,但是一直没实践过,这次用发现里面好多问题,所以现在记录下来,希望可以给刚接触使用jsonp的同学一点帮助! 关于什么是jsonp,以及为什么要用jsonp我就不多说了,不明白的同学自行百度一下. 我们先来说一下jQuery里面的jsonp请求,这搞懂了 vue-resource 里面的jsonp就容易明白了. 这里我以json数据为例,首先我们通过 $.get可以直接得到一个我们想要的对象,但是用 jsonp 就

  • 利用jsonp与代理服务器方案解决跨域问题

    前言 本文将从实践角度介绍如何使用jsonp和代理服务器方案解决跨域问题,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 浏览器为了保护用户安全,引入了同源策略,即一个服务器页面无法访问另一个协议.域名.端口不同的服务器数据.当页面需要跨服务器访问另一个服务器的数据时,即产生跨域行为.以豆瓣的公开API(https://api.douban.com/v2/book/1220562)为例,当前我的服务器处于http://127.0.0.1:5000下,豆瓣的服务器很显然跟我的服务

  • 利用jsonp解决js读取本地json跨域的问题

    前言 本文主要给大家介绍了关于使用jsonp解决js读取本地json跨域的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 一 .问题描述 通过ajax方式读取本地json文件,谷歌浏览器会提示跨域错误,导致获取不到json数据. 跨域报错.png ajax获取json数据代码: $.ajax({ url: "file/employeejson.json",//json文件位置 type: "GET",//请求方式为get dataType:

  • 轻松搞定jQuery+JSONP跨域请求的解决方案

    JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSONP 抓到的资料

  • 使用jquery的jsonp如何发起跨域请求及其原理详解

    前言 本文主要给大家介绍的是关于jquery jsonp发起跨域请求及其原理的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具有相同的源,否则就是不同源的. 如果要在js里发起跨域请求,则要进行一些特殊处理了.或者,你可以把请求发到自己的服务端,再通过后台代码发起请求,再将

随机推荐