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之解决IE下不渲染的bug
Jun 29 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
微信小程序 触控事件详细介绍
Oct 17 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
Vue绑定用户接口实现代码示例
Nov 04 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
制作美丽的拉花
2021/03/03 冲泡冲煮
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
浅谈php和.net的区别
2014/09/28 PHP
跟我学Laravel之路由
2014/10/15 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
常用jQuery选择器总结
2014/07/11 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
保时捷设计:Porsche Design
2019/03/30 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
网游商务专员求职信
2013/10/15 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
教师年度考核评语
2014/04/28 职场文书
计算机毕业生求职信
2014/06/10 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书