XHR的方法

1.XMLHttpRequest.open()

XMLHttpRequest.open() 方法初始化一个请求。该方法要从JavaScript代码使用;从原生代码初始化一个请求,使用openRequest()替代

注意一点:为已激活的请求调用此方法(open()openRequest()已被调用)相当于调用abort()

语法:

xhrReq.open(method, url);
xhrReq.open(method, url, async);
xhrReq.open(method, url, async, user);
xhrReq.open(method, url, async, user, password);

(1)method

要使用的HTTP方法,比如「GET」、「POST」、「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。

(2)url

一个DOMString表示要向其发送请求的URL。

(3)async 

如果值为falsesend()方法直到收到答复前不会返回。如果true,已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true,否则将引发异常。

(4)user 可选

可选的用户名用于认证用途;默认为null

(5)password 可选

可选的密码用于认证用途,默认为null

 

2.XMLHttpRequest.abort()

如果该请求已被发出,XMLHttpRequest.abort() 方法将终止该请求。当一个请求被终止,它的 readyState 属性将被置为0( UNSENT )。

语法:

xhrInstance.abort();

位置: 

var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";
xhr.open(method,url,true);

xhr.send();

xhr.abort();

 

3.XMLHttpRequest.setRequestHeader()

1.位置

XMLHttpRequest.setRequestHeader() 是设置HTTP请求头部的方法。此方法必须在  open() 方法和 send()   之间调用。如果多次对同一个请求头赋值,只会生成一个合并了多个值的请求头。

如果没有设置 Accept 属性,则此发送出send() 的值为此属性的默认值*/* 。

安全起见,有些请求头的值只能由user agent设置:forbidden header namesforbidden response header names.

自定义一些header属性进行跨域请求时,可能会遇到"not allowed by Access-Control-Allow-Headers in preflight response",你可能需要在你的服务端设置"Access-Control-Allow-Headers"。(即不能使用跨域头请求。ajax是不能进行设置跨域头部的设置!!!)

2.语法

myReq.setRequestHeader(header, value);

header

属性的名称。

value

属性的值。

 

4.XMLHttpRequest.getAllResponseHeaders()

XMLHttpRequest.getAllResponseHeaders() 方法返回所有的响应头,以 CRLF 分割的字符串,或者 null 如果没有收到任何响应。 注意: 对于复合请求 ( multipart requests ),这个方法返回当前请求的头部,而不是最初的请求的头部。

语法:

var headers = XMLHttpRequest.getAllResponseHeaders();

位置:

在send()之后

 

5.XMLHttpRequest.getResponseHeader()

XMLHttpRequest.getResponseHeader() 方法返回包含指定头文本的字符串。

如果在返回头中有多个一样的名称,那么返回的值就会是用逗号和空格将值分隔的字符串。getResponseHeader()方法以UTF字节序列的形式返回值。搜索标题名称是不区分大小写的。

语法:

var myHeader = getResponseHeader(name);

参数

名称

ByteString表示要返回文本值的标题的名称。

返回值

表示标头文本值的ByteString;如果响应尚未收到,或者响应中不存在标头,则返回null。

位置:

var client = new XMLHttpRequest();
client.open("GET", "unicorns-are-teh-awesome.txt", true);
client.send();
client.onreadystatechange = function() {
  if(this.readyState == this.HEADERS_RECEIVED) {
    console.log(client.getResponseHeader("Content-Type"));
  }
}

是在send() 之后。

 

6.XMLHttpRequest.overrideMimeType()

XMLHttpRequest 的 overrideMimeType 方法是指定一个MIME类型用于替代服务器指定的类型,使服务端响应信息中传输的数据按照该指定MIME类型处理。例如强制使流方式处理为"text/xml"类型处理时会被使用到,即使服务器在响应头中并没有这样指定。此方法必须在send方法之前调用方为有效。

语法:

XMLHttpRequest.overrideMimeType(mimeType)

Parameters

mimeType

一个 DOMString 指定具体的MIME类型去代替有服务器指定的MIME类型. 如果服务器没有指定类型,那么 XMLHttpRequest 将会默认为 "text/xml".

Return value

undefined.

位置:

req = new XMLHttpRequest();
req.overrideMimeType("text/plain");
req.addEventListener("load", callback, false);
req.open("get", url);
req.send();

 

7.XMLHttpRequest.send()

XMLHttpRequest方法send()将请求发送到服务器。如果请求是异步的(默认设置),则此方法将在发送请求并使用事件传递结果后立即返回。如果请求是同步的,则在响应到达之前该方法不会返回。

send()接受一个可选参数,该参数可让您指定请求的正文;这主要用于诸如之类的请求PUT。如果request方法为GETor HEAD,则将body忽略参数并将请求正文设置为null

如果没有Accept使用设置头,则发送具有类型(任何类型)setRequestHeader()Accept"*/*"

语法:

XMLHttpRequest.send(body)
XMLHttpRequest.send();
XMLHttpRequest.send(ArrayBuffer data);
XMLHttpRequest.send(ArrayBufferView data);
XMLHttpRequest.send(Blob data);
XMLHttpRequest.send(Document data);
XMLHttpRequest.send(DOMString? data);
XMLHttpRequest.send(FormData data);
var xhr = new XMLHttpRequest();
xhr.open("POST", '/server', true);

//发送合适的请求头信息
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.onload = function () { 
    // 请求结束后,在此处写处理代码 
};
xhr.send("foo=bar&lorem=ipsum"); 
// xhr.send('string'); 
// xhr.send(new Blob()); 
// xhr.send(new Int8Array()); 
// xhr.send({ form: 'data' }); 
// xhr.send(document);

 

03-09
### XMLHttpRequest (XHR) 概述 XMLHttpRequest 是浏览器内置的一个对象,用于在客户端与服务器之间传输数据。通过这个接口可以在不刷新页面的情况下向服务器发送请求并接收响应,从而实现局部更新网页的功能[^1]。 #### 创建和配置 XHR 实例 要发起一次 HTTP 请求,首先要创建 `XMLHttpRequest` 的实例: ```javascript var xhr = new XMLHttpRequest(); ``` 接着设置请求的方式(GET 或 POST)、目标 URL 和是否异步执行该操作: ```javascript xhr.open('GET', 'https://api.example.com/data', true); ``` 这里第三个参数通常设为 `true` 表示启用异步模式;如果将其设定为 `false` 则会变成同步请求,在某些情况下可能会阻塞主线程影响用户体验[^2]。 #### 处理响应 对于 GET 请求来说,可以通过监听 `onload` 事件来捕获成功的回调,并检查状态码确认请求是否正常完成。当接收到的状态码等于 200 时表示一切顺利,此时可以从 `responseText` 属性中提取到服务端返回的数据内容: ```javascript xhr.onload = function () { if (xhr.status === 200) { var response = xhr.responseText; console.log(response); } else { console.log('请求失败:' + xhr.status); } }; ``` 除了成功的情况外,还需要考虑可能出现的各种异常状况,比如网络连接中断或者跨域资源共享(CORS)策略阻止等问题。因此建议同时注册 `onerror` 事件处理器以便更好地处理这些意外情况。 #### 发起实际的请求 最后一步就是调用 `.send()` 方法正式发出请求给指定地址。如果是 POST 类型的话,则可能需要额外传递一些表单字段作为请求体的一部分。 ```javascript xhr.send(); ``` ### 使用场景对比 虽然现代开发更倾向于采用 Fetch API 进行资源获取,因为它的设计更加简洁直观且支持 Promise 结构化编程风格。但是 XMLHttpReques t仍然具有广泛的应用价值特别是在兼容旧版IE浏览器方面表现出色[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值