XMLHttpRequest

一直使用axios进行http配置,发现自己最基础的AJAX的内容忘记了。复习下。

1.XMLHttpRequest

  • XMLHTTP最初是由微软公司发明的,在Internet Explorer 5.0中用作ActiveX对象,可通过JavaScript、VBScript或其它浏览器支持的脚本语言访问。Mozilla的开发人员后来在Mozilla 1.0中实现了一个兼容的版本。之后苹果计算机公司在Safari 1.2中开始支持XMLHTTP,而Opera从8.0版开始也宣布支持XMLHTTP。 ----- 维基百科
  • XMLHttpRequest (XHR)对象是Web API的一个接口。使用XHR对象可以与服务器交互,从URL中获取数据,而无需让整个页面刷新,因此成为Ajax编程的基础
  • 层级关系:
  • XHR可以用于获取任何类型的数据,而不仅仅是XML,还支持HTTP以外的协议(包括文件和ftp)
  • 如果需要从服务器接受事件或消息数据,可以考虑[EventSource](https://developer.mozilla.org/zh-CN/docs/Server-sent_events/Using_server-sent_events)接口适用serversent event。对于full-duplex通信,可以选择[WebSocket](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets_API)

2. Constructor 构造方法

  • XMLHttpRequest() 构造函数初始化一个XMLHttpRequest对象。必须在所有其他方法被调用前调用构造函数

3. 属性

此接口继承了XMLHttpRequestEventTargetEventTarget 的属性

  1. XMLHttpRequest.onreadystatechange
    • 语法: XMLHttpRequest.onreadystatechange = callback
    • readyState的值改变的时候, callback函数会被调用
  2. XMLHttpRequest.readyState
    • 只读,该属性返回一个XMLHttpRequest代理当前所处的状态的状态码
    • 一个XHR代理总是以下状态之一
      值 | 状态 | 描述
      -----|-----|-----
      0 | UNSENT | 代理被创建,尚未调用open()方法
      1 | OPENED | open()方法已经被调用。在这个状态中,可以通过setRequestHeader()方法来设置请求的头部,可以调用send()方法来发起请求
      2 | HEADERS_RECEIVED | send()方法已经被调用,响应头也已经被接收
      3 | LOADING | 下载中,响应体部分正在被接收。如果responseType属性是text或空字符串,responseText将会在载入过程中拥有部分响应数据
      4 | DONE | 请求操作已完成。意味着数据传输已彻底完成或失败
  3. XMLHttpRequest.response
    • 只读,返回响应的正文。可以是ArrayBuffer, Blob, Document, JavaScript对象或者一个DOMString 类型,取决于XMLHttpRequest.responseType属性的值。
    • 如果请求未完成或未成功,响应值为null。但如果responseType的值设为"text"或空字符串,则响应可以包含部分文本响应,而请求仍处于加载状态
  4. XMLHttpRequest.responseText
    • 只读,返回一个DOMString,包含对文本的请求的响应,如果请求不成功或尚未发送,返回null。
    • 如果XMLHttpRequest的值是text或空字符串,responseText属性在请求完成之前将会得到部分属性。如果不是,访问该属性会抛出异常。
  5. XMLHttpRequest.responseType
    • 返回及设置返回响应数据的类型。如果设为一个空字符串,将默认使用"text"类型。
    • 语法
          var type = XMLHttpRequest.responseType
          XMLHttpRequest.responseType = type
      
    返回数据的属性
    "" DOMString (默认值)
    "arraybuffer" ArrayBuffer
    "blob" Blob
    "document" Document
    "json" JSON字符串
    "text" DOMString
  6. XMLHttpRequest.responseURL
    • 只读,返回响应的基础链接, #后的参数会被删除。如果URL为空,返回空字符串。
  7. XMLHttpRequest.responseXML
    • 只读,返回一个包含请求检索的HTML或XML的Document。如果请求成功,尚未发送,或者检索的数据无法正确解析为XML或HTML,则为null。
  8. XMLHttpRequest.status
    • 只读,返回响应中的数字状态码(HTTP status codes)。在请求完成前,status的值为0,如果XMLHttpRequest出错,返回的status也是0.
    • e.g. status 200 代表一个成功的请求
  9. XMLHttpRequest.statusText
    • 只读,返回一个DOMString,其中包含HTTP服务器返回的响应状态。与XMLHttpRequest.status不同的是,它包括响应状态的整个文本("200 OK" /" 404 Not Found")
    • 如果请求的状态readyState的值为UNSENT 或 OPENED, 这个属性为一个空字符串。如果服务器未明确指定一个状态文本信息,则statusText的值会被自动赋值为"OK"
  10. XMLHttpRequest.timeout
    • 可用来设置一个请求在被自动终止前所消耗的毫秒数。默认值为0,意味着没有超时。不能给同步请求设置超时毫秒数。
    • 在IE中,超时属性只能在调用open() 方法之后并且在调用send()方法之前设置。
  11. XMLHttpRequest.upload
    • 只读, 该方法返回一个XMLHttpRequest对象,用来表示上传的进度。这个对象是不透明的,但是作为一个XMLHttpRequestEventTarget,可以通过对其绑定事件来追踪它的进度。
    • 可以被绑定在upload对象上的事件监听器如下:
      事件 | 相应属性的信息类型
      ---- | ----------------
      onloadstart | 获取开始
      onprogress | 数据传输进行中
      onabord | 获取操作终止
      onerror | 获取失败
      onload | 获取成功
      ontimeout | 获取超时
      onloadend | 获取完成(不论成功与否)
  12. XMLHttpRequest.widthCredentials
    • 值为Boolean类型,指示了是否该使用类似cookies,authorization headers或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制(cross-site Access-Control)请求。在同一个站点下使用withCredentials属性是无效的。
    • 此外,这个指示也会被用作响应中cookies被忽视的标志。默认值是false。
    • 如果在发送来自其他域的XMLHttpRequest请求之前,未设置withCredentials为true,那么就不能为它自己的域设置cookie值。而通过设置wihtCredentials为true获得电放cookies,将将会依旧享受同源策略,因此不能被通过document.cookie或者从头部相应请求的脚本访问。

4. 方法

  1. XMLHttpRequest.abort()
    • 如果请求已经被发送,就立刻中止请求
  2. XMLHTttpRequest.getAllResponseHeaders()
    • 以字符串的形式返回所有用CRLF分隔的响应头,如果没有收到相应,则返回null
  3. XMLHttpRequest.getResponseHeader()
    • 返回包含指定响应头的字符串,如果响应尚未收到或响应中不存在该报头,返回null
  4. XMLHttpRequest.open()
    • 初始化一个请求。该方法只能用JavaScript中使用。若要在native code中初始化请求,使用openRequest()
  5. XMLHttpRequest.overrideMimeType()
    • 重写由服务器返回的MIME type
  6. XMLHttpRequest.send()
    • 发送请求。如果请求是异步(默认)的,该方法将在请求发送后立即返回
  7. XMLHttpRequest.setRequestHeader()
    • 设置HTTP请求头的值,必须在open() 之后、send()之前调用。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容