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创建快捷方式的简单实例
Aug 09 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
基于postman获取动态数据过程详解
Sep 08 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和Cookie的区分与解释
2007/03/16 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
js 上传图片预览问题
2010/12/06 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
实例讲解python函数式编程
2014/06/09 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Python3中的bytes和str类型详解
2019/05/02 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
django列表筛选功能的实现代码
2020/03/27 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
致标枪运动员广播稿
2014/02/06 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
外国人聘用意向书
2014/04/01 职场文书
教师继续教育反思周记
2015/06/25 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
Tomcat配置访问日志和线程数
2022/05/06 Servers