ajax与jsonp的区别及用法


Posted in Javascript onOctober 16, 2018

首先我们应该知道ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新。

接下来我们就来看一下ajax和jsonp的区别。

ajax和jsonp的区别:

ajax是一种发送http请求与后台进行异步通讯的技术。其原理是实例化xmlhttp对象,使用此对象与后台通信。

一个完整的AJAX请求一般包括以下步骤:

(1)实例化XMLHttpRequest对象

(2)连接服务器

(3)发送请求

(4)接收响应数据

jsonp是一种可以实现跨域发送http请求的数据通信格式,可以嵌在ajax中使用。其原理是利用script标签可以跨域链接资源的特性。

JSONP由两部分组成:回调函数和数据,回调函数一般是在浏览器控制,作为参数发往服务器端(当然,你也可以固定回调函数的名字,但客户端和服务器端的名称一定要一致)。当服务器响应时,服务器端就会把该函数和数据拼成字符串返回。

JSONP的请求过程如下:

请求阶段:浏览器创建一个 script 标签,并给其src 赋值。

发送请求:当给script的src赋值时,浏览器就会发起一个请求。

数据响应:服务端将要返回的数据作为参数和函数名称拼接在一起(格式类似”jsonpCallback({name: 'abc'})”)返回。当浏览器接收到了响应数据,由于发起请求的是 script,所以相当于直接调用 jsonpCallback 方法,并且传入了一个参数。

最后:jsonp只支持get请求,ajax支持get和post请求。

Javascript 相关文章推荐
jQuery解决iframe高度自适应代码
Dec 20 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
Aug 15 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 #Javascript
QRCode.js二维码生成并能长按识别
Oct 16 #Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 #Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 #Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 #Javascript
jQuery轻量级表单模型验证插件
Oct 15 #jQuery
详解ESLint在Vue中的使用小结
Oct 15 #Javascript
You might like
我的论坛源代码(二)
2006/10/09 PHP
PHP cron中的批处理
2008/09/16 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
php购物车实现代码
2011/10/10 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
jquery animate动画持续运动的实例
2017/11/29 jQuery
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
Python测试模块doctest使用解析
2019/08/10 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
解决python replace函数替换无效问题
2020/01/18 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
python unichr函数知识点总结
2020/12/16 Python
项目经理岗位职责
2013/11/11 职场文书
申报职称专业技术个人的自我评价
2013/12/12 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
python基础之文件操作
2021/10/24 Python
SQL Server 中的事务介绍
2022/05/20 SQL Server