网络请求方式一

发表于 | 分类于

原生Ajax的用法

​ Ajax全称 AsynchronousJavaScript+XML（异步 JavaScript和 XML，网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。Ajax本身不是一种新技术，而是用来描述一种使用现有技术集合实现的一个技术方案，浏览器的 XMLHttpRequest是实现 Ajax最重要的对象（ IE6以下使用 ActiveXObject）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var xhr = new XMLHttpRequest();
xhr.open('post','www.xxx.com',true);
// 接收返回值
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status < 304){
            console.log(xhr.responseText)
        }
    }
}
// 处理请求参数
var postData = {"name1":"value1","name2":"value2"};
postData = (function(value){
    var oStr = ''
    for(var key in value){
        oStr += key + '=' + value[key] + '&'
    }
    return oStr;
})(postData)
// 设置请求头
xhr.setRequestHeader('Content-type','application/x-www-form-unlencoded');
// 异常处理
xhr.onerror = function(){
     console.log('Network request failed')
}
// 跨域携带cookie
xhr.withCredentials = true;

// 发出请求
xhr.send(postData)

下面分别对 XMLHttpRequest对象常用的的函数、属性、事件进行分析。

函数

open

用于初始化一个请求，用法：

1
xhr.open(method,url,async);
  • method：请求方式，如 get、post
  • url：请求的 url
  • async：是否为异步请求,默认true，异步

send

用于发送 HTTP请求，即调用该方法后 HTTP请求才会被真正发出，用法：

1
xhr.send(param)
  • param：http请求的参数，可以为 string、Blob等类型.

abort

用于终止一个 ajax请求，调用此方法后 readyState将被设置为 0，用法：

1
xhr.abort()

setRequestHeader

用于设置 HTTP请求头，此方法必须在 open()方法和 send()之间调用，用法：

1
xhr.setRequestHeader(header, value);

getResponseHeader

用于获取 http返回头，如果在返回头中有多个一样的名称，那么返回的值就会是用逗号和空格将值分隔的字符串，用法：

1
var header = xhr.getResponseHeader(name);

属性

readyState

用来标识当前 XMLHttpRequest对象所处的状态， XMLHttpRequest对象总是位于下列状态中的一个：

  • 0 : UNSENT |代理被创建，但尚未调用 open() 方法。
  • 1: OPENED | open() 方法已经被调用。
  • 2: HEADERS_RECEIVED | send()方法已经被调用，并且响应头部和状态已经可获得。
  • 3: LOADING | 下载中。接收响应内容，responseText 属性已经包含部分数据。
  • 4：DONE | 下载操作已完成。数据完整接收

status

表示 http请求的状态, 初始值为 0。如果服务器没有显式地指定状态码, 那么 status将被设置为默认值, 即 200。

responseType

表示响应的数据类型，并允许我们手动设置，如果为空，默认为 text类型，可以有下面的取值：

  • “”：将 responseType设为空字符串与设置为 "text"相同， 是默认类型 （实际上是 DOMString）
  • arraybuffer：response 是一个包含二进制数据的 JavaScriptArrayBuffer 。
  • blob：response是一个包含二进制数据的 Blob 对象 。
  • document：response 是一个 HTMLDocument或 XMLXMLDocument，这取决于接收到的数据的 MIME 类型。
  • json：response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON解析得到的。
  • text： response是包含在 DOMString对象中的文本。

response

返回响应的正文，返回的类型由上面的 responseType决定。

withCredentials

ajax请求默认会携带同源请求的 cookie，而跨域请求则不会携带 cookie，设置 xhr的 withCredentials的属性为 true将允许携带跨域 cookie。

事件回调

onreadystatechange

1
xhr.onreadystatechange = callback;

当 readyState属性发生变化时，callback会被触发。

onloadstart

1
xhr.onloadstart = callback;

在 ajax请求发送之前（ readyState==1后, readyState==2前）， callback会被触发。

onprogress

1
2
3
xhr.onprogress = function(e){
    console.log(e.loaded / e.total)
}

回调函数可以获取资源总大小 total，已经加载的资源大小 loaded，用这两个值可以计算加载进度。

onload

1
xhr.onload = callback;

当一个资源及其依赖资源已完成加载时，将触发 callback，通常我们会在 onload事件中处理返回值。

异常处理

onerror

1
xhr.onerror = callback;

当 ajax资源加载失败时会触发 callback。

ontimeout

1
xhr.ontimeout = callback;

当进度由于预定时间到期而终止时，会触发 callback，超时时间可使用 timeout属性进行设置。

jQuery对Ajax的封装

`jQuery`提供的 `ajax`封装进行网络请求，包括 `$.ajax、$.get、$.post`等，这几个方法放到现在，我依然觉得很实用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// $.ajax只接收一个参数，这个参数接收一系列配置，其自己封装了一个 jqXHR对象
$.ajax({
    dataType:'json', //设置返回值类型
	contentType:'application/json', // 设置参数类型
    headers:{ // 设置请求头
        'Content-Type':'application/json'
    },
    url:'....',
    type:'post',
    xhrFields:{
        withCredentials:true //跨域携带cookie
    },
    data:JSON.stringify({a:1,b;2}),  // 传递参数
    error:function(xhr,status){},
    success:function(xhr,status){
        
    }
})

常用配置

url

当前页地址。发送请求的地址。

type

类型：String 请求方式 ( "POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP请求方法，如PUT和 DELETE也可以使用，但仅部分浏览器支持。

timeout

类型：Number设置请求超时时间（毫秒）。此设置将覆盖全局设置。

success

类型：Function 请求成功后的回调函数。

jsonp

在一个 jsonp请求中重写回调函数的名字。这个值用来替代在 "callback=?"这种 GET或 POST请求中 URL参数里的 "callback"部分。

error

类型：Function 。请求失败时调用此函数。

dataType

1
2
3
4
5
6
7
8
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript代码。不会自动缓存结果。除非设置了 
"cache":参数。在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 
"myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串

data

类型：String 使用 JSON.stringify转码

complete

类型：Function请求完成后回调函数 (请求成功或失败之后均调用)。

async

类型：Boolean 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

contentType

类型：String默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

jQuery的替代者

​ axios基于 Promise对原生的 XHR进行了非常全面的封装，使用方式也非常的优雅。另外， axios同样提供了在 node环境下的支持，可谓是网络请求的首选方案。

​ FetchAPI是一个用用于访问和操纵HTTP管道的强大的原生 API。fetch是作为 XMLHttpRequest的替代品出现的。使用 fetch，你不需要再额外加载一个外部资源。但它还没有被浏览器完全支持，所以你仍然需要一个 polyfill。

-------------本文结束感谢您的阅读-------------