jsonp

Posted lyx1014

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jsonp相关的知识,希望对你有一定的参考价值。

一.什么是jsonp

(1).跨域请求的一种方式

(2).只支持GET请求;

(3).jsonp跟ajax半毛钱关系没有

二.jsonp的执行过程(前端可以从后端拿到数据)

jsonp通过GET请求,通过地址将参数传递到后端,所有jsonp中只支持GET格式

(补充:在<script src=""></script>这种情况不受同源策略的影响)

三.jsonp与ajax的区别:

——jsonp工作原理

 

动态创建一个script标签,利用script标签src属性访问没有限制来实现跨域

 

web客户端通过与调用的脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.josn),服务器动态生成json文件目的是把客户端需要的数据装进去。

 

允许用户传递一个callback参数给服务器,然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据,这个客户端可以随意带定制自己的函数来自动处理返回的数据

——ajax工作原理

过程:

第一步:创建一个ajax对象,IE6的是new ActiveObject ,其他浏览器是new 一个xmlHttpRequest对象

第二步:调用open方法启动一个请求以备发送,open方法传入三个参数:请求类型,请求URL,和一个bool值

第三步:调用send方法

第四步:处理回调函数onreadystatechange,当readState=4(响应数据完成);并且status=200(请求成功)时候处理响应数据

(注意:回调函数要写在open()和send(之前))

(1).ajax和jsonp的调用的方式很像,目的一样,都是请求URL;

(2).实质不同

ajax的核心是通过xmlHttpRequest获取非本页内容

jsonp的核心是动态添加script标签调用服务器提供的js脚本

(3).区别联系

 

不在于是否跨域

ajax通过服务器代理一样跨域

jsonp也并不排斥同域的数据获取

(4).jsonp是一种方式或者说非强制性的协议

ajax也不一定非要用json格式来传递格式;

 

以上是关于jsonp的主要内容,如果未能解决你的问题,请参考以下文章

Jsonp 原理

JSONP使用

jsonp实现原理

vue视频学习笔记02

AJAX入门

ajax 跨域请求