ajax jq 图片上传请求头-凯发ag旗舰厅登录网址下载

链接：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 与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的ajax jq 图片上传请求头_全面分析前端的网络请求方式:ajax ,jquery ,axios,fetch的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。