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 相关文章推荐
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 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
php使用类继承解决代码重复的问题
2015/02/11 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
理解Javascript_05_原型继承原理
2010/10/13 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
javascript回调函数详解
2018/02/06 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
Vue js 的生命周期(看了就懂)(推荐)
2019/03/29 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
python对于requests的封装方法详解
2019/01/03 Python
Django之模型层多表操作的实现
2019/01/08 Python
Java程序员面试题
2016/09/27 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
教育专业自荐书范文
2013/12/17 职场文书
销售总监岗位职责
2014/01/04 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
招标授权委托书样本
2014/09/23 职场文书
综治维稳工作汇报
2014/10/27 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers