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 相关文章推荐
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 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
关于IIS php调用com组件的权限问题
2012/01/11 PHP
php解决约瑟夫环示例
2014/04/09 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php实现微信公众号无限群发
2015/10/11 PHP
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
令按钮悬浮在(手机)页面底部的实现方法
2017/05/02 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
实例讲解JavaScript截取字符串
2018/11/30 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Python中super的用法实例
2015/05/28 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
python实现归并排序算法
2018/11/22 Python
浅谈Python 函数式编程
2020/06/20 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
全国爱牙日活动总结
2015/02/05 职场文书
500字小学生检讨书
2015/02/19 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
原告代理词范文
2015/05/25 职场文书
无故旷工检讨书
2015/08/15 职场文书
员工升职自我评价
2019/03/26 职场文书
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python