ajax jq 图片上传请求头_全面分析前端的网络请求方式:Ajax ,jQuery ,axios,fetch
链接:https://juejin.im/post/5c9ac607f265da6103588b31
一、前端进行网络请求的关注点
大多数情况下,在前端发起一个网络请求我们只需关注下面几点:
- 传入基本参数(url,请求方式)
- 请求参数、请求参数类型
- 设置请求头
- 获取响应的方式
- 获取响应头、响应状态、响应结果
- 异常处理
- 携带cookie设置
- 跨域请求
二、前端进行网络请求的方式
- form表单、ifream、刷新页面
- Ajax - 异步网络请求的开山鼻祖
- jQuery - 一个时代
- fetch - Ajax的替代者
- axios、request等众多开源库
三、关于网络请求的疑问
- Ajax的出现解决了什么问题
- 原生Ajax如何使用
- jQuery的网络请求方式
- fetch的用法以及坑点
- 如何正确的使用fetch
- 如何选择合适的跨域方式
带着以上这些问题、关注点我们对几种网络请求进行一次全面的分析。
四、Ajax的出现解决了什么问题
在Ajax出现之前,web程序是这样工作的:
这种交互的的缺陷是显而易见的,任何和服务器的交互都需要刷新页面,用户体验非常差,Ajax的出现解决了这个问题。Ajax全称Asynchronous JavaScript + XML(异步JavaScript和XML),使用Ajax,网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。
Ajax本身不是一种新技术,而是用来描述一种使用现有技术集合实现的一个技术方案,浏览器的XMLHttpRequest是实现Ajax最重要的对象(IE6以下使用ActiveXObject)。
尽管X在Ajax中代表XML, 但由于JSON的许多优势,比如更加轻量以及作为Javascript的一部分,目前JSON的使用比XML更加普遍。
五、原生Ajax的用法
这里主要分析XMLHttpRequest对象,下面是它的一段基础使用:
下面分别对XMLHttpRequest对象常用的的函数、属性、事件进行分析。
函数
open
用于初始化一个请求,用法:
xhr.open(method, url, async);
- method:请求方式,如get、post
- url:请求的url
- async:是否为异步请求
send
用于发送HTTP请求,即调用该方法后HTTP请求才会被真正发出,用法:
xhr.send(param)
- param:http请求的参数,可以为string、Blob等类型。
abort
用于终止一个ajax请求,调用此方法后readyState将被设置为0,用法:
xhr.abort()
setRequestHeader
用于设置HTTP请求头,此方法必须在open()方法和send()之间调用,用法:
xhr.setRequestHeader(header, value);
getResponseHeader
用于获取http返回头,如果在返回头中有多个一样的名称,那么返回的值就会是用逗号和空格将值分隔的字符串,用法:
var header = xhr.getResponseHeader(name);
属性
readyState
用来标识当前XMLHttpRequest对象所处的状态,XMLHttpRequest对象总是位于下列状态中的一个:
status
表示http请求的状态, 初始值为0。如果服务器没有显式地指定状态码, 那么status将被设置为默认值, 即200。
responseType
表示响应的数据类型,并允许我们手动设置,如果为空,默认为text类型,可以有下面的取值:
response
返回响应的正文,返回的类型由上面的responseType决定。
withCredentials
ajax请求默认会携带同源请求的cookie,而跨域请求则不会携带cookie,设置xhr的withCredentials的属性为true将允许携带跨域cookie。
事件回调
onreadystatechange
xhr.onreadystatechange = callback;
当readyState属性发生变化时,callback会被触发。
onloadstart
xhr.onloadstart = callback;
在ajax请求发送之前(readyState==1后, readyState==2前),callback会被触发。
onprogress
xhr.onprogress = function(event){ console.log(event.loaded / event.total);}
回调函数可以获取资源总大小total,已经加载的资源大小loaded,用这两个值可以计算加载进度。
onload
xhr.onload = callback;
当一个资源及其依赖资源已完成加载时,将触发callback,通常我们会在onload事件中处理返回值。
异常处理
onerror
xhr.onerror = callback;
当ajax资源加载失败时会触发callback。
ontimeout
xhr.ontimeout = callback;
当进度由于预定时间到期而终止时,会触发callback,超时时间可使用timeout属性进行设置。
六、jQuery对Ajax的封装
在很长一段时间里,人们使用jQuery提供的ajax封装进行网络请求,包括$.ajax、$.get、$.post等,这几个方法放到现在,依然很实用。
$.ajax只接收一个参数,这个参数接收一系列配置,其自己封装了一个jqXHR对象,有兴趣可以阅读一下jQuary-ajax 源码
常用配置:
url
当前页地址。发送请求的地址。
type
类型:String 请求方式 ("POST" 或"GET"), 默认为 "GET"。注意:其它HTTP请求方法,如PUT和 DELETE也可以使用,但仅部分浏览器支持。
timeout
类型:Number设置请求超时时间(毫秒)。此设置将覆盖全局设置。
success
类型:Function 请求成功后的回调函数。
jsonp
在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分。
error 类型:Function 。请求失败时调用此函数。
注意:源码里对错误的判定:
isSuccess = status >= 200 && status < 300 || status === 304;复制代码
返回值除了这几个状态码都会进error回调。
dataType
data
类型:String 使用JSON.stringify转码
complete
类型:Function请求完成后回调函数 (请求成功或失败之后均调用)。
async
类型:Boolean 默认值:true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
contentType
类型:String默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
键值对这样组织在一般的情况下是没有什么问题的,这里说的一般是,不带嵌套类型JSON,也就是 简单的JSON,形如这样:
{ a: 1, b: 2, c: 3}
但是在一些复杂的情况下就有问题了。 例如在 Ajax中你要传一个复杂的 json 对像,也就说是对象嵌数组,数组中包括对象,你这样传:application/x-www-form-urlencoded 这种形式是没有办法将复杂的JSON组织成键值对形式。
{ data: { a: [{ x: 2 }] }}
可以用如下方式传递复杂的json对象
$.ajax({ dataType: 'json', contentType: 'application/json', data: JSON.stringify({a: [{b:1, a:1}]})})
七、jQuery的替代者
近年来前端MV*的发展壮大,人们越来越少的使用jQuery,我们不可能单独为了使用jQuery的Ajax api来单独引入他,无可避免的,我们需要寻找新的技术方案。
尤雨溪在他的文档中推荐大家用axios进行网络请求。axios基于Promise对原生的XHR进行了非常全面的封装,使用方式也非常的优雅。另外,axios同样提供了在node环境下的支持,可谓是网络请求的首选方案。
未来必定还会出现更优秀的封装,他们有非常周全的考虑以及详细的文档,这里我们不多做考究,我们把关注的重点放在更底层的APIfetch。
Fetch API是一个用用于访问和操纵HTTP管道的强大的原生 API。
这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展。
可见fetch是作为XMLHttpRequest的替代品出现的。
使用fetch,你不需要再额外加载一个外部资源。但它还没有被浏览器完全支持,所以你仍然需要一个polyfill。
八、fetch的使用
一个基本的 fetch请求:
Fetch API提供了一个全局的fetch()方法,以及几个辅助对象来发起一个网络请求。
- fetch()
fetch()方法用于发起获取资源的请求。它返回一个promise,这个 promise 会在请求响应后被 resolve,并传回 Response 对象。
- Headers
可以通过Headers()构造函数来创建一个你自己的headers对象,相当于 response/request 的头信息,可以使你查询到这些头信息,或者针对不同的结果做不同的操作。
var myHeaders = new Headers();myHeaders.append("Content-Type
ajax jq 图片上传请求头_全面分析前端的网络请求方式:Ajax ,jQuery ,axios,fetch相关推荐
- ajax jq 图片上传请求头_Jquery ajaxsubmit上传图片实现代码
这是数月前的事情了,场景是这样的: 在进行图片上传的时,我发现开发人员使用的上传图片方式是Iframe + 传统的 http post 来处理的. 而且未建立统一上传函数.于是将代码改造了.心想来个a ...
- php+jquery实现图片上传预览_和拖动位置值,PHP教程:thinkphp jquery实现图片上传和预览效果...
<PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...
- 6748如何设置edma为事件触发方式_全面分析前端的网络请求方式
作者|ConardLi 编辑|覃云 来源|code 秘密花园公众号 一.前端进行网络请求的关注点 大多数情况下,在前端发起一个网络请求我们只需关注下面几点: 传入基本参数(url,请求方式) 请求参数 ...
- ajax jq 图片上传请求头_如何使用js或jQuery向Ajax请求添加自定义HTTP头?
下面是一个使用XHR 2的示例:function xhrToSend(){ // Attempt to creat the XHR2 object var xhr; try{ xhr = new XM ...
- ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
- html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...
- php模板多图上传插件,PHP+jQuery+Ajax多图片上传插件
注:本地预览无效,需要在服务断运行 使用方法 HTML 首先我们在页面上放置个上传按钮,使用POST提交到ajax.php.#ul_pics 用来显示上传完毕后的图片.关于按钮.进度条.图片垂直居中样 ...
- Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
- c ajax 上传图片插件,ajax实现图片上传和预览
图片上传功能 html结构: ![](6f4fbfb7/addimg.png) 在html中input的type=file就可以实现文件的上传功能,在其属性中也包含一个accept='':可以限制文件 ...
最新文章
- python excel行数_使用python计算excel中的行数
- Windows 7搜索功能讲解
- 图解TCP/IP(第5版)PDF
- iOS 仿支付宝刮刮乐效果
- 第53课 化功大法 《小学生C++趣味编程》
- oracle 讲师费用,20080929--ORACLE培训笔记未整理版(讲师:ORA-600)
- Kali渗透测试工具库(二)beef--Web浏览器攻击框架
- Unity3D基础20:游戏打包发布
- 深入浅出通信原理pdf_「PLC」精品资料包,西门子+三菱+AB+台达,50本高清PDF
- iOS测试包安装途径实践
- 华为小程序怎么弄出来_华为手机窗口小程序 华为窗口小程序怎么弄出来
- python中msg是什么意思_MSG是什么意思?
- 威联通搭建Frp实现内网穿透
- 拒绝纷繁复杂 快速制表软件分享
- sina股票接口更新:Kinsoku jikou desu
- 亲测,idea切换分支异常:error: The following untracked working tree files would be overwritten by checkout
- modelsim仿真加速注意点
- Linux的bind服务
- OA办公系统能为企业带来什么好处?
- 使用ajaxupload.js插件上传图片不成功问题----RTFSC
热门文章
- 好玩的deep dream(清晰版,pytorch完整代码)
- MCtalk教育快报 | 0820
- 【经典】5种IO模型 | IO多路复用
- group by 练习
- 设计模式初探之设计模式六大原则(4):接口隔离原则
- 硬盘安装Fedora16
- 20162321王彪 2017-2018-1 《程序设计与数据结构》第三周学习总结
- Java堆(heap)、栈(stack)和队列的区别
- python (16) 如何在linux下安装lxml(pip安装,ubuntu下,centos下)
- 论文创新,可以看看这几篇去雨文章是怎么做的