加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

全面说明前端的收集哀求方法

发布时间:2019-03-28 18:35:56 所属栏目:建站 来源:ConardLi
导读:一、前端举办收集哀求的存眷点 大大都环境下,在前端提倡一个收集哀求我们只需存眷下面几点: 传入根基参数(url,哀求方法) 哀求参数、哀求参数范例 配置哀求头 获取相应的方法 获取相应头、相应状态、相应功效 非常处理赏罚 携带cookie配置 跨域哀求 二、前

用于初始化一个哀求,用法:

  1. xhr.open(method, url, async); 
  • method:哀求方法,如get、post
  • url:哀求的url
  • async:是否为异步哀求

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返转头,假如在返转头中有多个一样的名称,那么返回的值就会是用逗号和空格将值脱离的字符串,用法:

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

  1. xhr.onreadystatechange = callback; 

当readyState 属性产生变革时,callback会被触发。

onloadstart

  1. xhr.onloadstart = callback; 

在ajax哀求发送之前(readyState==1后, readyState==2前),callback会被触发。

onprogress

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

回调函数可以获取资源总巨细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. $.ajax({  
  2.     dataType: 'json', // 配置返回值范例  
  3.     contentType: 'application/json', // 配置参数范例  
  4.     headers: {'Content-Type','application/json'},// 配置哀求头  
  5.     xhrFields: { withCredentials: true }, // 跨域携带cookie  
  6.     data: JSON.stringify({a: [{b:1, a:1}]}), // 转达参数  
  7.     error:function(xhr,status){  // 错误处理赏罚  
  8.        console.log(xhr,status);  
  9.     },  
  10.     success: function (data,status) {  // 获取功效  
  11.        console.log(data,status);  
  12.     }  
  13. })  

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

(编辑:湖南网)

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

热点阅读