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 相关文章推荐
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
javascript event 事件解析
Jan 31 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
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
cmd下运行php脚本
2008/11/25 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
PHP钩子实现方法解析
2019/05/21 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
解决AJAX中跨域访问出现'没有权限'的错误
2008/08/20 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
js运动事件函数详解
2016/10/21 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
JS实现拖动模糊框特效
2020/08/25 Javascript
Python splitlines使用技巧
2008/09/06 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
python生成圆形图片的方法
2020/03/25 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
Django中多种重定向方法使用详解
2019/07/17 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
python中数字是否为可变类型
2020/07/08 Python
python 实现批量图片识别并翻译
2020/11/02 Python
python 制作磁力搜索工具
2021/03/04 Python
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
酒店中秋节活动方案
2014/01/31 职场文书
会务接待方案
2014/02/27 职场文书
学习交流会主持词
2014/04/01 职场文书
大学运动会通讯稿
2015/07/18 职场文书