全面分析前端的网络请求方式

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

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({  
    dataType: 'json', // 配置返回值范例  
    contentType: 'application/json', // 配置参数范例  
    headers: {'Content-Type','application/json'},// 配置哀求头  
    xhrFields: { withCredentials: true }, // 跨域携带cookie  
    data: JSON.stringify({a: [{b:1, a:1}]}), // 转达参数  
    error:function(xhr,status){  // 错误处理赏罚  
       console.log(xhr,status);  
    },  
    success: function (data,status) {  // 获取功效  
       console.log(data,status);  
    }  
})  

$.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 。哀求失败时挪用此函数。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!