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实现Enter键跳转及控件获得焦点
Aug 12 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
常规表格多表头查询示例
Feb 21 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
js如何打印object对象
Oct 16 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
前端如何实现动画过渡效果
Feb 05 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
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
vue按需加载实例详解
2019/09/06 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
python实现识别相似图片小结
2016/02/22 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
代码详解django中数据库设置
2019/01/28 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
大学生应聘自荐信
2013/10/11 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
单独二胎证明
2015/06/24 职场文书
mysql函数全面总结
2021/11/11 MySQL
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏