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滚动条回到顶部的代码
Dec 06 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
详解Vue路由自动注入实践
Apr 17 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
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
原生js实现form表单序列化的方法
2018/08/02 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
Python使用combinations实现排列组合的方法
2018/11/13 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
python统计字符的个数代码实例
2020/02/07 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
化学专业毕业生自荐信
2013/11/15 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
2014年招商工作总结
2014/11/22 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
安全生产奖惩制度
2015/08/06 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书