摘要:通过监听 window.onload 和 window.onunload事件, 使用 Navigator.sendBeacon() 进行HTTP请求:
阅读全文
摘要:比如有需求是要让页面关闭时, 在数据库中记录用户的一些数据或log日志. 这时就需要在用户关闭页面时发起HTTP请求. 做法是对window.onunload设置事件监听函数, 在函数内发起AJAX请求. 不过有时候页面已经卸载了, 但请求还没有发出, 这时就失败了, 解决这一问题的思路有两种: 1
阅读全文
摘要:使用 xhr.abort() 注意: xhr.abort() 会直接终止请求, xhr.readyState值变为4, xhr.onreadystatechange事件触发.
阅读全文
摘要:1. 使用 xhr.getResponseHeader()可以获取指定响应头字段值. 2. 使用 xhr.getAllResponseHeader() 可以获取所有响应字段值 注意: 1. 如果没有接收到服务器返回的头信息, 则两个方法都返回null; 2. xhr.getResponseHeade
阅读全文
摘要:一般情况下, 我们会通过 xhr.responseType 告诉服务器我们想要什么类型的返回数据. 然后xhr.response 会根据xhr.responseType属性值来自动解析返回值. 但有时候服务器无法返回我们需要的数据类型, 但客户端不知道服务器无法返回, 所以就算xhr.respons
阅读全文
摘要:使用: xhr.setRequestHeader(); 注意: xhr.setRequestHeader() 必须在xhr.open()之后, xhr.send()之前调用;
阅读全文
摘要:1. 获取表单(form)节点 2. 对FormData实例做相关操作 3. 发起HTTP请求
阅读全文
摘要:需要使用 xhr.send(); 参数为请求数据体, 如果没有就传入null, 一般来说, GET请求是不用传参的, POST就视情况而定, 理论上所有GET请求都可以改为POST, 反之则不行. 下面是POST请求的示例: 注意: 1. 所有xhr的监听事件都必须在xhr.send()方法调用之前
阅读全文
摘要:xhr.open() 接收5个参数, 用于初始化一个http请求, 它接收5个参数: 1. method: 请求类型; 2. url: 请求的url; 3. async: 是否为异步, 默认为true; 默认为true 4. user: 认证用户名; 可选 5. password: 认证密码; 可选
阅读全文
摘要:使用: xhr.upload.onprogress事件监听属性. 注意: 除了可以监听上传进度之外, 还可以监听: loadstart、loadend、load、abort、error、timeout.
阅读全文
摘要:第一步: 服务器必须在Response Header中设置: Access-Control-Allow-Credentials: true 第二步: 客户端发起请求时需要将 xhr.withCredentials设为: true; 注意: 1. 按照上面设置后, 不仅Cookie会被附带上, 认证的
阅读全文
摘要:1. 监听请求成功: xhr.onload 2. 监听请求失败: xhr.onerror 3. 监听请求数据下载中: xhr.onprogress 注意: xhr.onprogress是其中仅有的一个具有事件参数的事件监听属性, e.loaded表示下载了多少数据, e.total表示数据总量, e
阅读全文
摘要:1. 监听HTTP请求发出的事件是: xhr.onloadstart 2. 监听HTTP请求结束的事件是: xhr.onloadend 注意: onloadend 事件不管请求失败或成功, 只要xhr.readyState等于4时就会触发.
阅读全文
摘要:1. 设置请求超时时间: xhr.timeout, 如果超时, 请求会自动终止; 参数是毫秒; 2. 设置请求超时监听函数: xhr.ontimeout, 如果请求超时, 则会触发ontimeout事件的监听函数;
阅读全文
摘要:1. 获取HTTP状态码: xhr.status; 2. 获取HTTP状态提示文本: xhr.statueText; 以下是以下常见的HTTP状态码: 200, OK, 访问正常; 301, Moved Permanently, 永久移动; 302, Moved temporarily, 暂时移动;
阅读全文
摘要:使用: xhr.responseURL; 注意: 1. xhr.responseURL和xhr.open()中的URL可能是不一样的, 因为服务器也可能发生跳转, 前者返回的是最后实际返回数据的URL; 2. 如果原始请求URL包含锚点(#), 则该属性会将锚点抽离;
阅读全文
摘要:使用 xhr.responseXML; 通过这个属性正常获取XML或HTML文档对象有两个前置条件: 1. Content-Type头信息的值等于: text/xml 或 application/xml 2. xhr.responseType 需要赋值为: "document" 注意: 如果Cont
阅读全文
摘要:使用: xhr.responseText; 注意: xhr.responseType等于空字符或"text"时, 可以使用xhr.responseText获取
阅读全文
摘要:使用: xhr.responseType; 这个属性可读写, 也就是说, 我们可以在xhr.open()之后, 在xhr.send()之前, 设置 xhr.responseType属性, 使其告诉服务器客户端需要什么类型的数据; xhr.responseType 的属性值可以是: 1. 空字符串:
阅读全文
摘要:使用: xhr.response 属性, 可获得response body 内的数据, 注意, 这些数据类型不一样, 比如字符串 / 对象 / 二进制文件 等. 注意: 1. 如果返回的是xml或html, xhr.response会自动解析成网页文档, 而xhr.responseText 不会;
阅读全文