Javascript 内置方法之 - XMLHttpRequest

最新推荐文章于 2024-05-23 09:30:17 发布
最新推荐文章于 2024-05-23 09:30:17 发布
阅读量771 收藏 5
点赞数
分类专栏： Javascript编程知识

XMLHttpRequest 类

XMLHttpRequest 为 ajax 的核心。

  • 使用
var xhr = new XMLHttpRequest()
  • XMLHttpRequest 本质及构成

本质为一个函数；

typeof XMLHttpRequest ; // 'function'

原型链关系：XMLHttpRequest “继承”于 XMLHttpRequestEventTarget，XMLHttpRequestEventTarget “继承”于 EventTarget；

var xhr = new XMLHttpRequest();
xhr instanceof XMLHttpRequest; // true
xhr instanceof XMLHttpRequestEventTarget ; // true
xhr instanceof EventTarget ; // true
  • 实例化时属性，xhr 上属性

事件绑定

        onabort =》中止请求时触发
        onerror =》请求错误时触发
        onload =》请求成功时触发
        onloadend =》请求不管成功失败中止都将最后触发
        onloadstart => 客户端开始发出请求，readyState=1，status=0，
        onprogrress =》服务器已经响应，处理请求中触发
        onreadystatechange =》 readyState 改变时触发
        ontimeout =》超时触发

响应体相关

        readyState =》初始值为0，在 new XMLHttpRequest() 的时候
        response
        responseText
        responseType
        responseURL
        responseXML

状态相关

        status
        readyState
        statusText

其他

        timeout =》设置超时请求的时间，默认为0，不计超时
        upload =》 XMLHttpRequestLoad 实例
        withCredentials =》Request Header 是否带 cookie，需服务端配合。

第一层原型，XMLHttpRequest 属性和方法

属性
状态

            UNSENT ：0
            OPENED：1
            HEADERS_RECEIVED：2
            LOADING：3
            DONE：4

方法

        abort =》中止请求
        getAllResponseHeaders =》 获取所有 headers 头部信息，并非所有都能获取
        getResponseHeader(‘key’) =》获取 key 的 header 信息，并非所有都能获取
        open(method，url，async) 打开一个请求，此时 xhr.readyState 为 1
        overrideMimeType
        send(data?) =》发送请求

其他

设置了 xhr 的所有属性的 getter 和 setter

第二层原型，XMLHttpRequestEventTarget

仅设置了 xhr 的 事件绑定中的方法的 getter 和 setter

第三层原型，EventTarget

        addEventListener
        dispatchEvent
        removeEventListener

流程解析

前端测试代码如下：

var xhr = new XMLHttpRequest()
console.log(xhr.readyState); // 此时的 readyState 为0

var eventKeys = [
    'abort',
    'error',
    'load',
    'loadend',
    'loadstart',
    'progress',
    'readystatechange',
    'timeout'
]

eventKeys.forEach(key => {
    xhr[`on${key}`] = function () {
        console.log(`-------request is ${key}-------`)
        console.log(`request is on${key}`)
        log()
        console.log('\n\n')
    }
});

xhr.open('get', 'http://localhost:9000/', true);
xhr.send()

function log() {
    console.log('readyState=', xhr.readyState);
    console.log('status=', xhr.status);
    console.log('statusText', xhr.statusText);
}

nodejs 服务端代码如下：

const Koa = require('koa');
const app = new Koa();

function response() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('hello world')
    }, 10000);
  })
}

app.use(async ctx => {
  ctx.set("Access-Control-Allow-Origin", "*");
  ctx.set('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  ctx.set("Access-Control-Allow-Headers", "X-Requested-With");
  ctx.set('Access-Control-Allow-Headers', 'Content-Type');
  var res = await response()
  ctx.body = res;
})

app.listen(9000)

根据打印信息，成功的普通请求概括如下：

    readyState 经历四个值： 0 -》1 -》 2 -》 3 -》 4
    绑定事件触发顺序及对应的 readyState 是：onreadystatechange（1） -》onloadstart（1） -》 onreadystatechange（2） -》onreadystatechange（3）-》onprogress（3）-》onreadystatechange（4）-》onload（4）-》onloadend（4）
    status ：0 和 200
    statusText：空 和 OK

通过 readyState 看请求周期

    var xhr = new XMLHttpRequest(); // xhr.readyState = 0
    xhr.open(‘get’,’url’,true); // readyState = 0 =》 readyState = 1 ，ononreadystatechange 触发
    xhr.send(); // => xhr.onloadstart() 触发，readyState 不变为1
    readyState = 1 =》 readyState = 2，onreadystatechange 触发，服务器端已经接收到请求。
    readyState = 2 =》 readyState = 3，onreadystatechange 触发，并触发 onprogress 事件，表示响应正在加载中。。。
    readyState = 3 =》 readyState = 4，onreadystatechange 触发，并触发 onload 事件。
    触发 onloadend 事件。

实例解析

普通的 get 请求

var xhr = new XMLHttpRequest()
xhr.onload = function () {
    console.log(xhr.response, xhr.responseText)
}
xhr.open('get', 'http://localhost:9000/', true)
xhr.send();

普通的 post 请求（Form Data，请求参数为 key value 形式）

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    console.log(xhr.response, xhr.responseText)
}
xhr.open('post', 'http://localhost:9000/', true)
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send('name=tom&age=18');

设置请求的格式为 x-www-form-urlencoded , 且传递的数据为字符串，用 & 连接不同的字段。

设置请求头，xhr.setRequestHeader( key,val )

普通的 post 请求 （请求体为 json 格式）

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    console.log(xhr.response, xhr.responseText)
}
xhr.open('post', 'http://localhost:9000/', true)
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify({ name: 'tom', age: 18 }));

设置超时请求（ xhr.timeout=2000 ）

var xhr = new XMLHttpRequest()
xhr.ontimeout = function(){
    console.log(xhr.status,xhr.readyState,xhr.responseText)
    console.log('请求超时')
}
xhr.onloadend = function(){
    console.log(xhr.status,xhr.readyState,xhr.responseText)
    console.log('请求结束')
}
xhr.onreadystatechange =function(){
    console.log('readyState change',xhr.readyState)
}
xhr.timeout = 2000
xhr.open('get', 'http://localhost:9000/', true);
xhr.send();

超出设置的 timeout 时间的请求，结束时，并不会触发 onerror 和 onabort 以及 onload ，只会触发ontimeout 和 onloadend；

readyState 从 0-》1-》4

onload 和 onloadend 的区别是，onloadend 不管请求成功与否都会触发，而 onload 只有请求成功结束时触发。

setRequestHeader 的用法，可以在 Request Header 中添加字段及值

客户端

var xhr = new XMLHttpRequest()
xhr.onload = function () {
    console.log('请求成功')
}
xhr.open('post', 'http://localhost:9000/', true);
xhr.setRequestHeader('X-user','tom')
xhr.setRequestHeader('X-token','ACDFWE@123123')
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send();

服务器端（nodejs），设置允许传递的请求头字段，多个字段用逗号隔开。

app.use(async ctx => {
  let origin = ctx.request.header.origin
  ctx.set("Access-Control-Allow-Origin", origin);
  ctx.set('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  ctx.set("Access-Control-Allow-Headers", "X-user,X-token,Content-Type");
  var res = await response()
  ctx.body = res;
})

跨越时，需要设置 Access-Control-Allow-Origin 为发送请求的客户端的域名。

字段不区分大小写。

withCredentials 的用法，请求头中带 cookie 信息

客户端设置 xhr 实体 withCredentials 属性为 true

var xhr = new XMLHttpRequest()
xhr.onload = function () {
    console.log('请求成功')
}
xhr.open('post', 'http://localhost:9000/', true);
xhr.withCredentials = true; // here
xhr.send();

服务端，设置允许

app.use(async ctx => {
  let origin = ctx.request.header.origin
  ctx.set("Access-Control-Allow-Origin", origin);
  ctx.set('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  ctx.set("Access-Control-Allow-Headers", "x-user,x-token,content-type");
  ctx.set("Access-Control-Allow-Credentials", true); // here
  var res = await response()
  ctx.body = res;
})

效果则是：

  1. Response Headers 中多了一条：Access-Control-Allow-Credentials: true
  2. Request Headers 中多了一条：Cookie：本地的 cookie 字符串

而且此时跨域的 options 请求好像也不发了

abort 手动终止请求

var xhr = new XMLHttpRequest()
xhr.open('post', 'http://localhost:9000/', true);
xhr.send();
setTimeout(() => {
    xhr.abort();
}, 3000);

手动 abort 必须在请求完成（onloadend）之前。

周期中能触发的事件有：onreadystatechange，onloadstart，onprogress，onabort，onloadend

overrideMimeType 和 自定义返回类型

var xhr = new XMLHttpRequest()
xhr.onload = function(){
    console.log(xhr.response)
}
xhr.open('post', 'http://localhost:9000/', true);
xhr.overrideMimeType('text/plain; charset=x-user-defined');
// 或
// xhr.responseType = 'blob';
xhr.send();

upload 实体使用，实现上传进度获取

xhr.onprogress = updateProgress;
xhr.upload.onprogress = updateProgress;
function updateProgress(event) {
    if (event.lengthComputable) {
      var completedPercent = event.loaded / event.total;
    }
 }

简单地封装 ajax 请求

// ajax 方法定义
function ajax(options) {
    var { url, method, data, headers } = options;
    var lowerMethod = method.toLowerCase();

    var _isGet = lowerMethod === 'get';
    var _isPost = lowerMethod === 'post';

    function _dataStringify(_data) {
        return Object.keys(_data).map(key => `${key}=${_data[key]}`).join('&')
    }

    // 拼接 data
    let requestData = null
    if (_isGet) {
        url += `?${_dataStringify(data)}`
    }
    else if (_isPost) {
        requestData = options.format === 'json'
            ? JSON.stringify(data)
        : _dataStringify(data)
    }

    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.withCredentials = Boolean(options.withCredentials);

        xhr.onload = function () {
            if (xhr.status == 200 || xhr.status == 304) {
                resolve(xhr.responseText);
            }
            else {
                reject('请求错误')
            }
        }

        // 绑定自定义 handler
        for (var ev in options.handlers) {
            var _prevHandler = xhr[ev];
            xhr[ev] = function () {
                _prevHandler();
                options.handlers[ev]();
            }
        }

        xhr.open(method, url, true);

        // 设置 header
        for (var attr in headers) {
            xhr.setRequestHeader(attr, headers[attr]);
        }

        xhr.send(requestData);
    })

}

// ajax 使用
ajax({
    url: 'http://localhost:9000',
    method: 'POST',
    format: 'json',
    data: {
        name: 'tom'
    },
    headers: {
        // 'Content-Type': 'application/x-www-form-urlencoded',
        'Content-Type': 'application/json',
        'x-token': 'xxxxx'
    },
    withCredentials: true,
    handlers: {
        'onload': function () {
            console.log('自定义onload')
        }
    }
})
    .then(res => {
    console.log(res,222222)
})
    .catch(err => {
    console.log(err)
})

示例并不完整，可以把文件上传的 FormData 方式添加进去，还有超时等功能。

.NET跨平台
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
XMLHttpRequest 的基本用法
qiaokelibangwo的博客
06-18 3515
XMLHttpRequest是浏览器内置的一个构造函数。所以使用的时候需要 new ​ 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 ​ axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装主要的 4 个实现步骤：创建 xhr 对象调用 xhr.open() 函数调用 xhr.send() 函数监听 load 事件 1.3 GET请求携带参数 GET请求
ajax --XMLHttpRequest
03-06
此外，ASP.NET MVC和ASP.NET Core MVC也内置了对Ajax的内置支持，如`Ajax.BeginForm`和`Ajax.ActionLink`辅助方法。 **源码分析** 标签中提到的"源码"可能指的是对Ajax.dll的分析。Ajax.dll可能是一个封装了Ajax...
JS中基于XMLHttpRequest的Get 请求demo
08-28
JS中基于XMLHttpRequest的Get 请求demo,包含2请求方式的源代码，可直接用于项目开发。
推荐开源项目：Node.js的XMLHttpRequest实现
最新发布
gitblog_00023的博客
05-23 287
推荐开源项目：Node.js的XMLHttpRequest实现 项目地址:https://gitcode.com/driverdan/node-XMLHttpRequest 项目介绍 node-XMLHttpRequest 是一个巧妙的库，它为Node.js内置的HTTP客户端添加了一个包装器，以模拟浏览器中的XMLHttpRequest对象。这个项目旨在提高代码复用率，并让你能够将原本为浏览器设...
XMLHttpRequest发送网络请求的基本使用，和封装自己的ajax
小陈的博客
06-30 4659
作用： 基于出来的实例对象，可以发起ajax请求用法：代码示例： 2. 使用发起请求（带参数） 代码示例： 3. 使用发送请求（有请求体） 请求体格式：参数=值&参数=值代码示例： 以格式传参代码示例： 格式...
new XMLHttpRequest() 的作用和用法
weixin_72244090的博客
07-20 711
XMLHttpRequest是浏览器内置的一个构造函数。所以使用的时候需要 new ​ 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。​ axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装。原文链接：https://blog.csdn.net/qiaokelibangwo/article/details/125351945。
XMLHttpRequest
lzy2213811239的博客
09-23 727
Ajax 的核心是 XMLHttpRequest 对象
JavaScript个人博客网站 - 前端笔记网站
03-07
3. **AJAX异步通信**：使用XMLHttpRequest或现代浏览器的fetch API，可以实现页面无刷新的数据交换，更新部分内容，使博客加载更快，交互更流畅。 4. **前端路由**：在单页应用（SPA）中，前端路由是关键。通过...
AJAX学习总结（二）--XMLHttprequest实例
05-28
XMLHttpRequest（简称XHR）是浏览器内置的一个对象，它允许JavaScript在不刷新整个页面的情况下与服务器进行交互。这通常涉及发送HTTP请求并处理响应。尽管名字中包含XML，但实际使用中，我们可以处理各种类型的数据...
Javascript 基础---Ajax入门必看
10-22
Ajax的核心是XMLHttpRequest对象，它是浏览器内置的JavaScript对象，用于在后台与服务器进行通信。通过创建XMLHttpRequest实例，设置请求参数，监听状态变化，我们可以实现异步数据交互。以下是一个简单的Ajax请求...
XMLHttpRequest 对象
web前端开发
03-14 1291
作者 |阮一峰1、简介浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向...
XMLHttpRequest 对象(AJAX通信)
好好睡觉
01-07 2964
XMLhttprequest对象、AJAX通信基础知识
深入解析XMLHttpRequest：实现异步通信的利器
墨辰JC的博客
06-11 3238
在网络应用程序开发中，XMLHttpRequest（XHR）方法是一种用于向服务器发送HTTP请求和接收服务器响应的技术。它为开发者提供了一种使用JavaScript进行服务器通信的简单和灵活的方式。本篇博客将详细介绍XMLHttpRequest的使用方法和注意事项，并通过代码示例进行调试和演示。XMLHttpRequest是一个在JavaScript中使用的对象，它可以与服务器进行通信，发送HTTP请求并获取服务器的响应。通过XHR，我们可以在不刷新整个页面的情况下更新部分页面内容，实现动态交互。
XMLHttpRequest基本使用
只写有用的笔记
06-08 2745
原生JS中请求服务器数据所需XHR详解，虽然用不到但是要足够了解！！！
JS——XMLHttpRequest 对象
qq_57289939的博客
02-02 2942
JS——XMLHttpRequest 对象
掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
浪子天涯行世录
02-18 3364
掌握 Ajax，第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 在 Web 请求中使用 XMLHttpRequest
js_XMLHttpRequest学习总结
weixin_64311421的博客
01-09 2799
XMLHttpRequest实例属性及实例方法
XMLHttpRequest对象
weixin_68915174的博客
12-04 2700
用于初始化一个XMLHttpRequest实例对象 初始化化一个新创建的请求，或重新初始化一个请求 参数： 设置http“请求头”，给服务器更多信息。此方法必须在open()和send()之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头 参数： 例子： 1.添加一个x-requested-with，便于服务器判断请求是否为Ajax发起： 2.通常post时，还要设定con
Node.js 发起HTTP请求的5种方式
m0_51629135的博客
05-28 4101
HTTP(百度百科): 超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII形式给出；
Node js中无法使用JavaScript的哪些内置方法或关键字
06-10
在Node.js中无法使用JavaScript的一些内置方法或关键字包括： 1. alert()：在浏览器中弹出一个警告框，但在Node.js中不可用。 2. document：表示HTML文档的根节点，但在Node.js中没有浏览器DOM，因此不可用。 3. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值