卖表网站源码,品牌营销推广,厦门百度推广开户,WordPress阿柳云一、概述
XMLHttpRequest简称XHR#xff0c;它是一个可以在JavaScript中使用的对象#xff0c;用于在后台与服务器交换数据#xff0c;实现页面的局部更新#xff0c;而无需重新加载整个页面#xff0c;也是Ajax#xff08;Asynchronous JavaScript and XML#xff09;…一、概述
XMLHttpRequest简称XHR它是一个可以在JavaScript中使用的对象用于在后台与服务器交换数据实现页面的局部更新而无需重新加载整个页面也是AjaxAsynchronous JavaScript and XML技术的核心组成部分。通过XHR对象开发者可以在不干扰用户当前操作的情况下向服务器请求数据并动态更新网页内容。
二、对象的创建
1、在浏览器中的创建方式
根据浏览器的类型与版本差异可能存在不同的创建方式。
1.1、现代流行的浏览器(如谷歌、火狐、Safari等等)中可使用new关键字来进行创建语法如下所示 let xhr new XMLHttpRequest(); 1.2、旧版IE浏览器IE6、IE7)等特立独行的浏览器中需要使用ActiveXObject对象来进行创建语法如下 var xhr new ActiveXObject(Microsoft.XMLHTTP); 因此若是在浏览器中创建该对象通常需要编写如下所示创建函数
function createXMLHttpRequest() {let xhr;if (window.XMLHttpRequest) {//假设全局对象中存在 XMLHttpRequest 对象xhr new XMLHttpRequest();} else if (window.ActiveXObject) {xhr new ActiveXObject(Microsoft.XMLHTTP);} else {throw new Error(您的浏览器不支持XMLHttpRequest对象);}return xhr;
}
2、在wps编辑器中的创建方式
在WPS的编辑器中它是作为一个全局对象而存在的因此创建方式与现代浏览器中一致使用new关键字即可创建。
3、在node.js中的创建方式
在Node.js中通常不会直接使用XMLHttpRequest对象通常是作为第三方库而存在的因此需要先行安装命令如下 npm install xmlhttprequest 随后通过require掉包语法如下 const XMLHttpRequest require(xmlhttprequest).XMLHttpRequest 三、常用属性
1、表示请求状态的readyState属性
它是一个整数共有五个值分别是
readyState的值作用0请求未初始化尚未调用 open 方法1请求已初始化已调用 open 方法尚未调用 send 方法2请求已发送已调用 send 方法尚未收到响应3请求处理中已接收部分响应数据4请求已完成已接收全部响应数据 2、表示服务器响应的HTTP状态码的status属性
它是一个整数表示响应状态码常见的状态码如下所示最为常见的以标红
2.1、信息性状态码
信息性状态码通常是1开头的整数如100表示服务器已经接收到请求头客户端应当继续发送请求的剩余部分或者如果请求已经完成则忽略这个响应101表示服务器已经理解了客户端的请求并将通过Upgrade消息头通知客户端采用不同的协议来完成这个请求。
2.2、成功响应状态码
表示响应成功的状态码通常是以2开头的整数如200OK表示请求已成功请求所希望的响应头或数据体将随此响应返回201(created)表示请求成功并且服务器创建了新的资源202accepted表示请求已经接受但处理尚未完成204no content表示服务器成功处理了请求但没有返回任何内容206表示服务器成功处理了部分GET请求。
2.3、重定向
表示重定向的状态码通常是3开头的状态码如301表示请求的网页已永久移动到新位置302表示请求的网页已临时移动到新位置304表示自从上次请求后请求的网页未修改过客户端可以直接从本地缓存中获取数据307表示临时性的重定向与302类似但与POST请求一起使用时有所不同。
2.4、客户端错误响应
此类状态码通常是以4开头的整数如400表示服务器无法理解请求的格式客户端不应当尝试再次使用相同的内容发起请求401表示请求未授权需要用户通过表单提交一个包含适当的认证令牌来访问该网页403表示服务器理解请求但拒绝执行此请求404表示服务器无法根据客户端的请求找到资源网页408表示请求超时服务器等待客户端发送请求时等待时间过长。
2.5、服务器错误响应
这类状态码通常是5开头的整数如500表示服务器遇到了一个未曾预料的情况导致它无法完成对请求的处理502表示作为网关或代理工作的服务器尝试执行请求时从上游服务器接收到无效的响应503表示由于临时的服务器维护或过载服务器当前无法处理请求这个状况是临时的504表示网关在等待来自另一个服务器的响应时超时。
3、表示服务器响应的HTTP状态码对应的文本信息的statusText属性
它是一个字符串与status一致表示响应状态只是它是一个文本信息例如状态码200对应的文本就是OK如果你发送的请求成功且statuts的值是200那么statusText的值就是OK。
4、表示服务器响应的文本内容的responseText属性
当且仅当readyState的值等于4时才可以读取responseText的值。其类型一般来说是一个JSON字符串也可能时网页源码等。
5、表示服务器响应的XML内容responseXML属性
当且仅当readyState的值等于4且响音内容的格式是XML时才可以读取responseXML的值。
四、常用方法
1、打开一个url的open方法
open(method, url, async, username, password)
method请求方式是一个字符串如POST、GET、PUT等
url请求地址是一个字符串如https://www.baidu.com
async一个布尔值表示请求是否为异步请求
username可选用户名用于身份验证
password可选用户密码用于身份验证
该方法的作用是初始化一个请求调用后readyState属性的值会设置为1
2、发送请求到服务器send方法
send(data)
data表示要发送的数据对于GET请求可以设置为空因为get请求要发送的数据可以直接拼接在网址的后面对于POST请求应视网页情况而定有可能是From Data、Blob等如下图所示 3、设置请求头setRequestHeader方法
setRequestHeader(header, value)
header请求头名称
value请求头的值 4、获取响应头的值getResponseHeader方法
getResponseHeader(headerName)
headerName要获取的响应头的名称
注意必须在readyState4时才能获取
5、获取响应头信息getAllResponseHeader方法
getAllResponseHeaders()
同样的必须在readyState4时才能获取
6、取消请求abort方法
直接调用.abort()即可主要作用是取消当前请求。
五、事件函数
1、onreadystatechange
它是一个函数当readyState属性发生变化时调用的回调函数。开发者可以在此函数中检查readyState的值以确定请求的状态并据此执行相应的操作。
xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {console.log(请求成功, xhr.responseText);}
};
2、addEventListener
与onreadystatechange类似但它是一个更为灵活的监听事件函数可惜WPS编辑器不支持。
xhr.addEventListener(readystatechange, function() {if (xhr.readyState 4 xhr.status 200) {console.log(请求成功, xhr.responseText);}
});xhr.addEventListener(load, function() {console.log(数据加载完成, xhr.responseText);
});xhr.addEventListener(error, function() {console.log(请求发生错误);
});
3、其他监听事件函数
//当请求成功完成时触发即readyState变为4且status为200或等效的成功状态码时
xhr.onload function() {console.log(数据加载完成, xhr.responseText);
};//在请求过程中发生错误时触发例如网络错误。
xhr.onerror function() {console.log(请求发生错误);
};//当请求被中止时触发例如通过调用abort()方法。
xhr.onabort function() {console.log(请求被中止);
};//当请求超时时触发。这需要在请求初始化时设置timeout属性。
xhr.ontimeout function() {console.log(请求超时);
};//在请求开始时触发。
xhr.onloadstart function() {console.log(请求开始);
};//在接收响应数据时持续触发可以用于实现进度条。
xhr.onprogress function(event) {if (event.lengthComputable) {console.log(已接收: ${event.loaded} 字节总大小: ${event.total});}
};//在请求完成或中止后触发无论请求成功或失败。
xhr.onloadend function() {console.log(请求结束);
};
上述监听事件函数通常结合onreadystatechange一起使用也可以只用onreadystatechange这一个事件来获取数据。
六、小试牛刀
function loadData() {var xhr new XMLHttpRequest();// 设置响应处理函数xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {// 请求成功处理响应数据console.log(xhr.responseText);}};// 初始化请求xhr.open(GET, https://www.baidu.com, true);// 发送请求xhr.send(null);
}
效果如下所示 七、注意事项
1、跨域
如果是在浏览器中通常是不允许跨域请求的。因此默认情况下该对象只能请求与当前页面同源的资源。如果必要需使用CORS机制。然在WPS编辑器中没有这种限制。
2、同步
虽然该对象支持同步请求但是不建议在生产环境中使用。因为同步请求会阻塞浏览器的UI线程导致用户体验极差也可能造成更为严重的后果。
3、错误处理
使用该对象进行请求时需检查status属性以确定请求是否成功。如果请求失败应当采取适当的错误处理措施。
八、总结
XMLHttpRequest对象是一种强大的工具用于在后台与服务器交换数据实现页面的局部更新。通过合理使用XMLHttpRequest对象可以显著提升网页的交互性和用户体验。然而随着技术的发展现代Web开发更倾向于使用更高级别的库如fetch API或框架如React、Vue等来处理HTTP请求这些工具提供了更简洁、更现代的API简化了开发过程。
注明wps中也支持fetch API
