1. get请求 const xhr = new XMLHttpRequest() xhr.open('GET', '/api', false) xhr.onreadystatechange = ()...== 200) { console.log(xhr.responseText) } } } xhr.send(null) 2. post请求 const xhr = new XMLHttpRequest
1.1 什么是 XMLHttpRequest XMLHttpRequest(XHR) 对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。...XMLHttpRequest 在 AJAX 编程中被大量使用。XMLHttpRequest 可以用于获取任何类型的数据，不仅仅是 XML，还可以获取 JSON 或者纯文本。...1.2 XMLHttpRequest 说明 1.2.1 XMLHttpRequest 相关属性 ☞ readyState HTTP 请求的状态，当一个 XMLHttpRequest 初次创建时，这个属性的值从...的使用 ☞ 创建 XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); ☞ 初始化 HTTP 请求参数 xhr.open(method, url, async...)的监听函数 XMLHttpRequest.onabort：abort 事件(请求中止，比如用户调用了abort() 方法)的监听函数 XMLHttpRequest.onerror：error 事件
通用方法实例 AngularJS1.5 以上版本 - 实例 var app = angular.module('myApp', []); app.controller('siteCtrl',...response.data.sites; }, function errorCallback(response) { // 请求失败执行代码 }); }); 简写方法实例...AngularJS1.5 以上版本 - 实例 <li ng-repeat="x in names
readyState属性 标识当前的XMLHttpRequest对象处于什么状态 0表示为未初始化，1表示准备发送状态，2表示已发送状态，3正在接收，4完成响应 responseText属性 包含客户端接收到的...statusText属性 同上面一样只有在3、4才能用，描述了http状态代码文本 onreadystatechange事件 每次readyState的值变化都会触发这个事件，一般用于回调函数 open()方法 用于XMLHttpRequest...来初始化对象 send()方法 发送数据 abort()方法 可以暂停httprequest请求或者发送httpresponse的接收，并可以 把XMLHttpRequest对象改变成初始化状态 setRequestHeader
XMLHttpRequest之onreadystatechange function doReq(url, fn){ var req = new XMLHttpRequest(); req.onreadystatechange... = function(){ if(this.readyState == XMLHttpRequest.DONE){ return fn(this); ...myreq); console.log(res); 本文采用 「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息： 原文出处：Yiiven https://www.yiiven.cn/js-xmlhttprequest-onreadystatechange.html
概述 XMLHttpRequest是一个前端获取服务端数据的API对象。...代码示例 var request = new XMLHttpRequest(); request.onload = function() { if(this.status == 200...} } else { // handle error } } request.open("GET", "xxxUrl"); request.send(); 代码说明 示例中实例化了一个...XMLHttpRequest对象，通过为该对象绑定onload回调函数处理从xxxUrl返回来的数据。...XMLHttpRequest支持的事件主要有： onloadstart onprogress onabort onerror onload ontimeout onloadend onreadystatechange
一、XMLHttpRequest的由来 XMLHttpRequest是AJAX的核心技术，通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输...二、 XMLHttpRequest对象的五步使用法 1....创建XMLHttpRequest对象 初期由于各个浏览器在实现上有所不同： 1) IE6及以前的版本，是以ActiveX控件的方式来创建XMLHttpRequest对象。...在使用XMLHttpRequest对象之前需要将XMLHttpRequest对象实例化，因为各个浏览器对实例化过程的实现不同，所以不同浏览器实例化XMLHttpRequest对象的方式也不相同。...(); 由于这两种实例化XMLHttpRequest的形式不同，所以在判断浏览器到底采用的是哪种实例化XMLHttpRequest对象，我就要做出判断，代码如下： Js
一、初始化XMLHttpRequest对象 在使用XMLHttpRequest对象之前需要将XMLHttpRequest对象实例化，因为各个浏览器对这个实例化过程的实现不同，所以针对不同的浏览器实例化...XMLHttpRequest对象的方式也不尽相同。...(); 所以，综合了这两种实例化XMLHttpRequest的形式，就可以提取出一个实例化的公共方法，代码如下： Js代码 //实例化XMLHttpRequest对象 function...参数content是可选的，可以是一个DOM对象的实例、一个输入流或一个串。传入的内容会作为请求体的一部分发送。...xmlHttp.open("get/Post","URL",true/false); xmlHttp.send(null); } } //实例化
1、XMLHttpRequest的方法 -abort 停止发送当前请求 -getAllResponseHeaders() 获取服务器返回的全部相应头（字符串形式） -getResponseHeader(...-send(content) 发送请求，其中content是请求参数 -setRequestHeader("label", "value") 发送请求前，设置请求头 2、XMLHttpRequest的属性...-onreadystatechange 指定XMLHttpRequest对象状态改变时的事件处理函数 -readyState XMLHttpRequest对象的处理状态 -responseText 获取服务器的相应文本...responseXML 获取服务器响应的XML文档对象 status 服务器返回的状态码 statusText 服务器返回的状态文本信息，只有当服务器响应已经完成时才会有该状态文本信息 3.readyState的值（XMLHttpRequest...对象状态） 0：XMLHttpRequest对象还未初始化 1：开始发送请求 2：请求发送完成 3：开始读取服务器的响应 4：读取服务器响应结束 4.服务器状态码（status属性） 200：服务器响应正常
本文介绍关于XMLHttpRequest对象的基础知识（基于规范化的属性和方法），更深入的探讨在之后的文章中作为二级文章（“XMLHttpRequest对象详解二”，“XMLHttpRequest对象详解之使用...XMLHttpRequest对象用于在后台与服务器交互数据。...构造方法： The XMLHttpRequest() constructor initiates an XMLHttpRequest....可参考网址： https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/XMLHttpRequest 参数： 1. readyState...XMLHttpRequest也可以为User-Agent头部提供一个默认值，自己手动添加的值都会添加到默认值的后面 有些请求头部由XMLHttpRequest自动设置而不是由这个方法设置，以符合HTTP
XMLHttpRequest（简称xhr）是浏览器提供的JavaScript对象，通过它，可以请求服务器上的数据资源，jQuery中的Ajax函数就是基于xhr对象封装出来的。...使用xhr发起GET请求 //1.创建XHR对象 var xhr = new XMLHttpRequest() //2.调用open函数，指定请求方式与URL地址 xhr.open('GET','URL...= 200){ //4.2 打印服务器响应回来的数据 console.log(xhr.responseText) } } xhr对象的readyState属性 XMLHttpRequest...对象的readyState属性，用来表示当前Ajax请求所处的状态，每个Ajax请求必然处于以下状态中的一个： 值 状态 描述 0 UNSENT XMLHttpRequest对象已被创建，但尚未调用open...使用xhr发起POST请求 //1.创建XHR对象 var xhr = new XMLHttpRequest() //2.调用open函数 xhr.open('POST','URL地址') //3.设置
本文链接：https://blog.csdn.net/caomage/article/details/101906193 一、XMLHttpRequest XMLHttpRequest（XHR）是浏览器层面的...七、XHR使用场景及性能 XMLHttpRequest是我们从在浏览器中做网页转向开发web应用的关键。首先，它让我们在浏览器中实现了异步通信，但同样重要的是，它还把这个过程变得非常简单。
二、 XMLHttpRequest对象的属性和事件 XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处理和控制HTTP请求与响应。下面，我们将对此展开详细的讨论。...1 描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。...三、 XMLHttpRequest对象的方法 XMLHttpRequest对象提供了各种方法用于初始化和处理HTTP请求，下列将逐个展开详细讨论。 ...这个sendRequest()函数创建一个XMLHttpRequest对象。创建一个XMLHttpRequest对象的过程因浏览器实现的不同而有所区别。...如果浏览器支持XMLHttpRequest对象作为一个窗口属性(所有普通的浏览器都是这样的，除了IE 5和IE 6之外)，那么，代码可以调用XMLHttpRequest的构造器。
XMLHttpRequest XMLHttpRequest 在 1999 年首次作为非标准的 Internet Explorer 5.0 ActiveX 组件出现，微软开发它是为了支持基于浏览器的 Outlook...所有主流浏览器都支持 XMLHttpRequest，并在 2006 年成为官方的 web 标准。...它不是基于 XMLHttpRequest 构建的，并且用更简洁的语法提供了更好的一致性。...第二轮：XMLHttpRequest 获胜 尽管存在缺陷，XMLHttpRequest 还是有一些技巧可以超越 ajax Fetch()。...中止支持 运行中的请求可以通过 XMLHttpRequest 的 abort() 方法取消，如有必要，可以附加一个 abort 事件来处理： const xhr = new XMLHttpRequest
Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是属于不同维度的2个概念。...XMLHttpRequest的发展历程 XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口，再后来W3C对它进行了标准化，提出了XMLHttpRequest...XMLHttpRequest标准又分为Level 1和Level 2。...XMLHttpRequest兼容性 关于xhr的浏览器兼容性，大家可以直接查看“Can I use”这个网站提供的结果XMLHttpRequest兼容性，下面提供一个截图。 ?...XMLHttpRequest提供了timeout属性来允许设置请求的超时时间。
我们现在开发一直在使用ajax或者是axios与后台进行交互，这两个在浏览器工作的时候都是基于XMLHttpRequest，只不过是封装了便于使用。...今天我们主要了解一下XMLHttpRequest的过程。 建立对象： 首先建立一个XMLHttpRequest对象，就是new一个对象出来。...调用open方法： Open方法就是与服务器建立连接，有三个方法XMLHttpRequest.open(Method, URL, Asyn)，第一个是get、post等方法，第二个是地址，第三个是同步异步
XMLHttpRequest对象的方法 abort()方法 你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。...另外，uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。...注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。...仅当readyState值为1时，你才可以调用send()方法；否则的话，XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。...在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2(发送)。
这篇文章就是参考W3C的XMLHttpRequest标准和结合一些实践验证总结而来的。...Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是属于不同维度的2个概念。...XMLHttpRequest的发展历程 XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口，再后来W3C对它进行了标准化，提出了XMLHttpRequest...XMLHttpRequest标准又分为Level 1和Level 2。...XMLHttpRequest兼容性 关于xhr的浏览器兼容性，大家可以直接查看“Can I use”这个网站提供的结果XMLHttpRequest兼容性，下面提供一个截图。 ?
XMLHttpRequest对象的属性: （1）readyState属性 该属性代表请求的状态,当XMLHttpRequest对象把一个HTTp请求发送到服务器端时,会经历若干状态,一直等待直到请求被处理...,然后再接收一个响应,这样脚本才能正确地响应各种状态,XMLHttpRequest对象的readyState属性值如下表所示: 属性 说明 onreadystatechange 状态改变时都会触发这个事件处理器...通常为一个字符串 responseXML 服务器的响应,通常为一个XML,可以解析为一个DOM对象 readyState 请求状态 readyState属性值 说明 0 未初始化状态,此时已创建了一个XMLHttpRequest...（6）statusText属性 该属性描述了HTTP状态代码文本,仅仅当readyState值为3或4时,该属性才有效,当readyState值小于3时,试图存取status的值将会引发一个异常｡ XMLHttpRequest...对象把请求发送到与服务器相应的URI｡Async参数指定了请求是否是异步的,其默认值是true｡如果想发送一个同步请求,则需要把这个值设置为false｡在调用open()方法后,XMLHttpRequest
XMLHttpRequest和Javascript Javascript本身并未具备向服务器发送请求的能力，要么使用window.open()方法重新打开一个页面向服务器提交请求，要么使用XMLHttpRequest...XMLHttpRequest提供了一系列的属性和方法，来向服务器发送异步的http请求；在服务器处理用户请求的过程中，XMLHttpRequest通过属性的状态值来实时反映http请求所处的状态，并根据这些状态指示...XMLHttpRequest对象 一、XMLHttpRequest方法： 1、Open(string method,string url,boolean asynch,String username,string...对应的XMLHttpRequest对象会复位到未初始化的状态。 二、XMLHttpRequest属性： 1、readyState 表示XMLHttpRequest对象的状态：0：未初始化。...:18px;">//实例化XMLHttpRequest对象 2 function createXMLHttpRequest(){ 3 if(window.XMLHttpRequest){
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
