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 圆形旋转图片滚动切换效果
Jan 19 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
window.location.hash知识汇总
Nov 09 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 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之Smarty入门
2007/01/04 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
Python实现全角半角字符互转的方法
2016/11/28 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
python操作yaml说明
2020/04/08 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
俄语专业毕业生推荐信
2013/10/28 职场文书
公司总经理岗位职责
2015/04/01 职场文书
行政复议答复书
2015/07/01 职场文书
经销商会议开幕词
2016/03/04 职场文书
postgresql中如何执行sql文件
2023/05/08 PostgreSQL