华为云速建站教程,Wordpress设置只读,wordpress 遮罩图片,北京网站外包概述
传统的web交互是用户触发一个http请求服务器#xff0c;然后服务器收到之后#xff0c;在做出响应到用户#xff0c;并且返回一个新的页面#xff0c;每当服务器处理客户端提交的请求时#xff0c;客户都只能空闲等待#xff0c;并且哪怕只是一次很小的交互、只需从…概述
传统的web交互是用户触发一个http请求服务器然后服务器收到之后在做出响应到用户并且返回一个新的页面每当服务器处理客户端提交的请求时客户都只能空闲等待并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据都要返回一个完整的HTML页而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽由于每次应用的交互都需要向服务器发送请求应用的响应时间就依赖于服务器的响应时间这导致了用户界面的响应比本地应用慢得多。
AJAX 的出现,刚好解决了传统方法的缺陷AJAX 是一种用于创建快速动态网页的技术通过在后台与服务器进行少量数据交换AJAX 可以使网页实现异步更新这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新。
XMLHttpRequest对象
AJAX的核心是XMLHttpRequest对象所有现代浏览器都支持该对象。XMLHttpRequest对象用于在后台与服务器进行数据交换可以实现网页的部分更新而无需重新加载整个页面。
所有现代浏览器Chrom、IE7、Firefox、Safari 以及 Opera都有内建的 XMLHttpRequest 对象。
创建 XMLHttpRequest 的语法是
let xhr new XMLHttpRequest();创建完成后我们可以通过该对象执行各种操作如发送HTTP请求、接收服务器响应等。 方法和属性
以下是一些常用的XMLHttpRequest方法和属性
方法
open(method, url, async): 初始化一个HTTP请求。参数method指定请求的方法如GET、POST等url指定请求的URL地址async指定请求是否为异步默认为true。new XMLHttpRequest():创建新的 XMLHttpRequest 对象。abort()取消当前请求send(data): 发送请求并从服务器获取数据可选地传递数据作为参数。通常在POST请求中使用。send():将请求发送到服务器用于 GET 请求setRequestHeader(header, value): 设置请求头。用于设置HTTP请求的请求头通常在发送之前调用该方法。getResponseHeader(header): 获取服务器响应的指定头部信息。getAllResponseHeaders(): 获取服务器响应的所有头部信息。 2.属性
onreadystatechange: 事件处理程序在请求状态改变时被调用。可以通过该事件处理程序来检测请求的不同阶段和状态。status: 包含HTTP状态码表示服务器响应的状态。状态号:200: OK403: Forbidden404: Not Found。 statusText:返回状态文本比如 “OK” 或 “Not Found”responseText: 以字符串形式返回服务器响应的文本内容。responseXML: 如果响应的内容类型是text/xml或application/xml则返回解析后的XML文档。readyState: 表示XMLHttpRequest对象的状态包括以下数值 0: 未初始化。表示XMLHttpRequest对象已创建或已被abort()方法重置。1: 打开。表示调用了open()方法但尚未调用send()方法。2: 已发送。表示已调用send()方法但未收到响应。3: 接收中。表示正在接收响应数据。4: 完成。表示已经接收到完整的响应数据并可以在客户端使用。
这些方法和属性可以被用来配置请求、发送请求、获取响应数据以及处理响应信息。
示例一:
!DOCTYPE html
html
headtitleAJAX XMLHttpRequest 示例/title
/head
bodyh1AJAX XMLHttpRequest 示例/h1button onclickl()加载数据/buttondiv idli/divscript
// 创建XMLHttpRequest对象
var xhr new XMLHttpRequest();// 定义onreadystatechange事件处理函数
xhr.onreadystatechange function() {// 当readyState为4完成且status为200成功响应时表示请求已完成并处理响应数据if (xhr.readyState 4 xhr.status 200) {// 获取响应的文本内容var responseText xhr.responseText;// 在页面上显示响应的数据var resultDiv document.getElementById(li);resultDiv.textContent responseText;}
};// 加载数据的函数
function l() {// 打开新的请求使用GET方法获取数据xhr.open(GET, data.txt, true);// 发送请求xhr.send();
}
/script/body
/html通过点击按钮触发l()函数来加载数据。使用XMLHttpRequest对象发送GET请求并获取数据。响应的文本内容将显示在div idli元素中。
示例二:
!DOCTYPE html
html
headtitleAJAX Fetch 示例/title
/head
bodyh1AJAX Fetch 示例/h1button onclickl()加载数据/buttondiv idli/divscript
// 加载数据的函数
function l() {// 使用Fetch API发送GET请求获取数据fetch(data.txt).then(function(response) {// 确保响应成功if (response.ok) {// 将响应转换为文本格式return response.text();} else {throw new Error(网络请求失败 response.status);}}).then(function(data) {// 在页面上显示响应的数据var resultDiv document.getElementById(li);resultDiv.textContent data;}).catch(function(error) {console.log(发生错误, error);});
}
/script/body
/html注释说明
通过点击按钮触发 l()函数来加载数据。使用Fetch API发送GET请求并获取数据。确保响应成功后将响应转换为文本格式。在页面上显示响应的数据。如果请求失败或发生错误会在控制台打印错误信息。
