1.XMLHttpRequest对象

  • 创建XHR对象:let xhr = new XMLHttpRequest();
  • open():启动一个请求准备发送

open()接收3个参数:请求类型('GET'、'POST')、请求的URL、是否异步发送请求(true or false)。

  • send():发送请求

    send()接受一个参数:作为请求主体要发送的数据,如果不需要发送数据,传入一个null, 以防止出现未知错误。

  • setRequestHeader():设置自定义的请求头部信息

    setRequestHeader()接收两个参数:头部字段的名称和头部字段的值;调用此方法必须要在调用open()方法之后,send()之前。

  • getResponseHeader():获取响应信息中的某个指定头部信息

  • getAllResponseHeaders():获取响应信息的所有头部信息

    getResponseHeader()接收一个参数:需要知道的头部信息的名称;但W3C标准对这两个方法有限制,它们不能获取如Set-CookieSet-Cookie2等的头部信息;所以getAllResponseHeaders()只能拿到限制以外(即被视为safe)的头部信息,而不是全部;而调用getResponseHeader(string)方法时,传入的参数必须是限制以外的头部名称,否则会报错。

  • XHR对象属性:

    1. responseText:作为响应主体被返回的文本。

    2. responseXml:如果相应的内容类型为XML, 此属性保存响应数据的XML DOM文档; 如果为非XML数据,则为null。

    3. status: 响应的HTTP状态。

    4. statusText:HTTP的状态说明。

    5. readyState:表示请求/响应过程的阶段

      • 0:未初始化;未调用open()方法。

      • 1:启动;已调用open()方法,但未调用send()方法。

      • 2:发送;已调用send()方法,但未接收到响应。

      • 3:接收;已接收到部分响应数据。

      • 4:完成;已接收到所有响应数据。

        备注:readyState的值每改变一次,都会触发readystatechange事件。

  • XHR兼容性(2018-11 from www.caniuse.com

2.创建具有兼容性的XMLHttpRequest对象

 function getXHR() {
let xhr = null;
if (window.XMLHttpRequest) {
//IE10+以及其他主流浏览器
xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) {
//IE9及以下、MSXML3、MSXML2.6及以下
let versions = [
'MSXML2.XMLHttp.6.0',
'MSXML2.XMLHttp3.0',
'MSXML2.XMLHttp',
'Microsoft.XMLHttp'
];
for (let i=0; i<versions.length; i++) {
try {
//创建成功结束循环,创建失败抛出错误
xhr = new ActiveXObject(versions[i]);
break;
} catch (e) {
//skip_跳过
}
} }
return xhr;
}

3.封装Ajax请求数据函数

 function ajax(opts) {
let xhr = getXHR();
if (xhr) {
//检查参数
let async = opts.async === undefined ? true:opts.async;
let method = opts.method.toUpperCase();
let data = opts.data === undefined ? null:opts.data; xhr.open(method, opts.url, async); //回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
let status = xhr.status;
if (status >= 200 && status < 300 || status == 304) {
opts.success && opts.success(xhr.responseText, xhr.responseXML); } else {
opts.fail && opts.fail(status);
}
}
} if (method == 'POST') {
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
}
xhr.send(data); } else {
let error = {
message: 'not support ajax.',
code: -1;
}
opts.fail && opts.fail(error);
}
} //使用
ajax({
url: /example,
method: POST,
data: {...},
success: function(){...},
fail: function(){...},
async:true
});

4.备注

最近在看网页向服务端请求数据相关的内容,忽然记起自己还有个blog,于是把markdown中的笔记改改发上来,太懒了,XMLHttpRequest level 2就不写了,现在应该都是用fetch()了。

5.参考

stackoverflow上的答案:https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery?answertab=votes#

Ajax与XMLHttpRequest随笔的更多相关文章

  1. AJAX初探,XMLHttpRequest介绍

    AJAX初探,XMLHttpRequest介绍 AJAX      AJAX = Asynchronous JavaScript and XML. 异步的JavaScript和XML.      AJ ...

  2. Egret和Http请求 (Ajax、XMLHttpRequest、Post、Get)

    一  Http请求 二  AJax和XMLHttpRequest 三  一个Ajax例子 四 Egret中的egret.HttpRequest 五 Post和Get区别 一 Http请求 Http深入 ...

  3. 原生Ajax(XMLHttpRequest)

    一.什么是Ajax: 全称Asynchronous JavaScript and XML: 异步的 JavaScript 和 XML: 可以在不重新加载整个页面的情况下(偷偷发数据),与服务器交换数据 ...

  4. AJAX(XMLHttpRequest)进行跨域请求方法详解

    AJAX(XMLHttpRequest)进行跨域请求方法详解(三) 2010年01月11日 08:48:00 阅读数:24213 注意:以下代码请在Firefox 3.5.Chrome 3.0.Saf ...

  5. 原生ajax、XMLHttpRequest和FetchAPI简单描述

    什么是ajax ajax的出现,刚好解决了传统方法的缺陷.AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个 ...

  6. js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可)

    js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...

  7. 原生实现ajax解析--XMLHttpRequest

    ajax基础: Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求. 如果仔细观察一个Form的提交,你就会发现,一旦用户点击“Submit ...

  8. js系列教程11-json、ajax(XMLHttpRequest)、comet、SSE、WebSocket全解

    js系列教程11-json.ajax(XMLHttpRequest).comet.SSE.WebSocket全解:https://blog.csdn.net/luanpeng825485697/art ...

  9. Ajax 与 XmlHttpRequest

    AJAX描述了确保Web应用在Web服务器请求新数据的情况下也能(几乎)实时反应的一种方法.具体地说,AJAX只是一些建立已久的技术的相互作用,从HTML.XHTML和HTTP,到JavaScript ...

随机推荐

  1. OC调用Swift

    Step by step swift integration for Xcode Objc-based project: Create new *.swift file (in Xcode) or a ...

  2. document.body和document.documentElement区别

    1.document.documentElement表示文档节点树的根节点,即<html> document.body是body节点 2. 页面具有 DTD,或者说指定了 DOCTYPE ...

  3. hdu-1063(大数)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1063 思路:1.大数乘法模板 2.考虑小数点的位置 3.乘法前后判断前后道0 参考文章:https:/ ...

  4. PyCharm2017破解版安装

    PyCharm2017破解版安装步骤: 1.右击软件压缩包选择解压到pycharm2017. 2.在解压文件夹里面找到pycharm-professional-171.3780.47,右击打开. 3. ...

  5. 转一个Visual Stuido 快捷键

    http://www.shortcutworld.com/en/win/Visual-Studio_2010.html 快捷键分类很详细.

  6. Java_得到GET和POST请求URL和参数列表

    一. 获取URL: getRequestURL()(还有个getRequestURI(),只取后面部分) 二. 获取参数列表: 1.getQueryString() 只适用于GET,比如客户端发送ht ...

  7. java浅拷贝和深拷贝

    转:http://blog.csdn.net/u014727260/article/details/55003402 实现clone的2点: 1,clone方法是Object类的一个方法,所以任何一个 ...

  8. HDU1175 连连看(bfs) 2016-07-24 13:27 115人阅读 评论(0) 收藏

    连连看 Problem Description "连连看"相信很多人都玩过.没玩过也没关系,下面我给大家介绍一下游戏规则:在一个棋盘中,放了很多的棋子.如果某两个相同的棋子,可以通 ...

  9. 关闭父类弹出的ifream窗口

    parent.document.getElementById('zhuce').style.display = 'none';

  10. [翻译Joel On Software]选择一门语言/Choosing a language

    Joel on Software Choosing a language 选择一门语言 by Joel Spolsky Sunday, May 05,2002 Why do developerscho ...