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 相关文章推荐
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 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
使用数据库保存session的方法
2006/10/09 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
详解jQuery设置内容和属性
2019/04/11 jQuery
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
python如何处理程序无法打开
2020/06/16 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
幼儿园毕业寄语
2014/04/03 职场文书
综合实践活动报告
2015/02/05 职场文书
2015年教师节主持词
2015/07/03 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏