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 相关文章推荐
onpropertypchange
Jul 01 Javascript
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 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访问查询mysql数据的三种方法
2006/10/09 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
php制作文本式留言板
2015/03/18 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
实例讲解php实现多线程
2019/01/27 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
为什么说python适合写爬虫
2020/06/11 Python
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
复古服装:RetroStage
2019/05/10 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
会议邀请函范文
2014/01/09 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
酒店厨房管理制度
2015/08/06 职场文书
学困生转化工作总结
2015/08/13 职场文书
协议书格式模板
2016/03/24 职场文书