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. Intelj IDEA的pom.xml显示错误can not reconnect

    从GitHub上边down下来的开源项目,报错莫名其妙,后来发现是跟本地hosts文件有关系 hosts文件加上 127.0.0.1 localhost 然后pom文件reload一下就

  2. HDU 2138 How many prime numbers (判素数,米勒拉宾算法)

    题意:给定一个数,判断是不是素数. 析:由于数太多,并且太大了,所以以前的方法都不适合,要用米勒拉宾算法. 代码如下: #include <iostream> #include <c ...

  3. 有关在 Word 中撰写博客的帮助

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  4. Python 运行 Python hello.py 出错,提示: File "<stdin>" , line 1

    写了一个hello.py,仅有一句,print 'hello world', 运行 Python hello.py 出错,提示: File "<stdin>" , li ...

  5. 使用WinSCP在Windows和Linux系统之间传输文件

    小梅哥编写,未经许可,严禁用于任何商业用途 2018年6月30日 在日常SoC开发中,我们经常需要在Windows和Linux系统之间传输文件,例如在Windows系统上的DS-5集成开发环境中编写好 ...

  6. sun.jersey使用Jackson转换数据

    差点被com.sun.jersey自身的json转换吓死,遇到List等类型,会把这些也转换为json对象,而不是jsonarray. 被园里的同行拯救了,在web.xml中配置一下就ok. < ...

  7. 在每页(分页)报表中重复显示标题 - SQL Server Reporting Service (SSRS)

    问题描述 TFS系统提供多种报表,有图表(Chart).Web面板(Dashboard).SharePoint面板.Excel报表,SQL Server Reporting Serivce(SSRS) ...

  8. LeetCode141:Linked List Cycle

    题目: Given a linked list, determine if it has a cycle in it. Follow up: Can you solve it without usin ...

  9. ubuntu Mono+Jexus 部署到 ASP.NET MVC 5

    之前搞了很多次都是卡在了razor那个异常哪里,今天心血来潮就在试一试,一试竟然成功了,激动的我赶紧记录下历程.废话不说,走起... ubuntu 16.04 安装mono(最新版 5.14.0) 官 ...

  10. The service definition selected is invalid

    吐槽下 最近在学Java 听闻Java生态很好 社区很多 但实际操作起来确实另一番风景 不多说了 说正事 添加WebService服务Client时有密码认证得服务 Eclipse抛出 The ser ...