美文网首页
Ajax方式和jsonp的实现区别

Ajax方式和jsonp的实现区别

作者: 3hours | 来源:发表于2017-06-03 19:46 被阅读0次

大多数情况下,无论是框架还是自己实现都是通过Ajax的方式来向后端请求数据的,而Ajax之间是通过传输json格式的文件来进行数据的传输的,大家对Ajax也很熟悉了,那么为什么我又要使用jsonp呢?这就要从什么是jsonp,什么是json来说一说了。

json是一种格式,而jsonp是一种调用方式,那么在大家都使用Ajax的情况下为什么我不用呢?因为Ajax作为脚本出于安全的考虑,是不允许访问非同源的内容的。那么如果我的前端活动页面和后端的服务器不在一个域名下该如何请求数据呢?这个时候就需要jsonp的方式来解决跨域的问题了。

那么为什么jsonp可以跨域呢?其中的原理又是什么呢?我们下面就来介绍一下jsonp跨域的原理。

因为同源策略的的原因,对于一个浏览器的页面只有来自一个源的脚本才可以被执行,这样的目的是为了安全性,可是却阻止了数据的请求,所以我们就要从绕开同源策略来入手,什么情况下允许跨域请求呢?那就是静态资源!静态资源是不受域策略限制的,可以加载任意域的脚本、样式、图片等静态资源,JSOP就是利用这种原理来实现跨域获取数据的。

我们将需要的json数据放在js文件中进行传输,这样就可以将需要的数据通过静态文件的形式传过来了,那么我们就来讲讲具体是如何实现的呢?

由于是静态文件,所以我们在请求的时候首先需要建立一个静态资源的DOM元素,例如这样的标签:

那么我们就来一步步的构建这个DOM标签吧,首先通过document.createElement(‘script’);来建立一个script标签,然后设置它的src属性指向需要请求的URL地址,然后将这个元素添加在body中,最后出于安全我们要将刚刚新建的标签在完成请求后删除掉。

在这里我把我写的一个封装好的函数贴出来,很简单的一个函数就说明了一切~

相关文章

  • Ajax方式和jsonp的实现区别

    大多数情况下,无论是框架还是自己实现都是通过Ajax的方式来向后端请求数据的,而Ajax之间是通过传输json格式...

  • 前端基础知识-示例代码

    1、ajax 2、jsonp a、原生实现方式 b、jquery ajax: c、vue.js d、npm包jso...

  • jsonp基础原理

    jsonP实现的效果和ajax非常类似,但jsonP并不是ajax的一部分。 jsonP主要用于解决跨站数据请求,...

  • vue起步(2)之数据交互

    vue中的交互(ajax,jsonp) vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,但是...

  • ajax和jsonp区别

    ajax和jsonp的调用方式很像,目的一样,都是请求url,然后把服务器返回的数据进行处理,因此jquery和e...

  • ajax

    一、ajax概念: 异步与同步 实现 ajax:1.各种类库和框架实现 后端jsonp处理: 例如: echo ...

  • AJAX POST请求实现/AJAX封装/node/RESTfu

    AJAX POST请求实现 AJAX封装 JSONP node.js 扩展

  • 跨域的几种演示

    几种跨域方式的代码演示 JSONP 优点: 它不像XMLHttpRequest 对象实现 Ajax 请求那样受到同...

  • Ajax请求跨域问题

    遇到ajax请求跨域问题,解决方式,改dataType为jsonp json和jsonp返回数据格式json格式 ...

  • Ajax的跨域请求

    1)前端Ajax部分代码 2)后端路由部分代码 3)附加链接,解释json和jsonp的区别

网友评论

      本文标题:Ajax方式和jsonp的实现区别

      本文链接:https://www.haomeiwen.com/subject/vgemfxtx.html