Ajax及其应用
Ajax 工作原理
- Ajax
Ajax 是前后端异步交互的工具,异步更新,ajax 包含 XMLHttpRequests 对象(异步地与服务器交换数据,AJAX 核心)
JavaScript/DOM(信息显示/交互)
CSS(给数据定义样式)
XML 或 JSON(作为转换数据的格式)
- 工作原理
具体操作流程
- 首先通过 PHP 页面将数据库中的数据取出
- 取出后转成 json 格式的字符串,后利用 ajax 把字符串返还给前端
- 再利用 json.parse 解析通过循环添加到页面上
- 反之,前端的数据可以利用 ajax 提交到后台
- 但后台没有办法直接将这些数据插入到数据库中,所以要先提交到 PHP 页面上
- 最后再由 PHP 将数据插入到数据库中
- 实现 Ajax 基本步骤
- 创建 XMLHttpRequest 对象,即创建一个异步调用对象.
const xhr=new XMLHttpRequest();
- 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息.
xhr.open(method,url,flag,name,password)
- 设置响应 HTTP 请求状态变化的函数.
xhr.onreadystatechange=function(){//设置响应http请求状态变化的事件
console.log("请求过程",xhr.readyState);
if(xhr.readyState==4){//判断异步调用是否成功,若成功开始局部更新数据
console.log("状态码为:",xhr.status);
if(xhr.status==200){
console.log("异步调用返回的数据为:",xhr.responseText);
}else{//若果异步调用未成功,弹出警告框,并显示错误代码
alert("erro:HTTP状态码为:",xhr.status);
}
}
}
- 发送 HTTP 请求.
xhr.send()
- 获取异步调用返回的数据.
- 使用 JavaScript 和 DOM 实现局部刷新.
XMLHttpRequests 对象
无刷新更新页面
- 属性
属性名称 | 说明 |
---|---|
onreadystatechange | 设置回调函数,(作为 readyStates 属性值改变时的事件处理程序)用于指定状态改变时所触发的事件处理器 |
readyState | 用于获取请求状态的属性:0-未初始化;1-正在加载(已初始化);2-已加载(请求发送完成);3-交互中(开始读取响应);4-完成(读取响应结束) |
status | 用于描述当前请求的 HTTP 状态码的属性。(仅当 readyState 的值为 3 或 4 时,status 属性才可用)常用值举例:200——正确返回;404——找不到访问对象 |
statusText | 用于描述 HTTP 状态的代码文本。(仅当 readyState 的值为 3 或 4 时,statusText 属性才可用) |
responseText | 以文本形式获取响应值。当 readyState 值为 0,1,2 时,responseText 为空字符串;当 readyState 值为 3 时,responseText 为还未完成的响应信息;当 readyState 值为 4 时,responseText 为响应信息。 |
responseXML | 以 XML 形式获取响应值,并且解析为 DOM 对象返回。用于当接收到完整的 HTTP 响应时(readyState 值为 4 时)描述 XML 响应,若 readyState 的值不为 4.它取值为 null |
- 方法
方法 | 具体功能 |
---|---|
open("method","URL",["asyncFlag"],["userName"],["password"]) | 建立对服务器的调用。参数可以是 GET、POST、PUT 或 DELET[^1]:rest 动词规范:GET(查询):获取资源;POST(创建):创建资源;PUT(修改):更新资源;DELET(删除):删除资源。URL 参数是相对 URL 或绝对 URL。剩余三个参数(可选择)分别是:是否异步(默认异步,true),用户名,密码 |
send(content) | 向服务器发送请求。如果请求声明为异步,该方法将立即返回,否则将等到接收到响应为止 |
abort() | 停止当前请求 |
setRequestsHeader("header","value") | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用 open()。设置 header 并和请求一起发送('POST'方法一定要) |
getAllResponseHeaders() | 以字符串形式返回完整的 HTTP 头部信息 |
getRequestHeader("header") | 以字符串的形式返回指定的 HTTP 头部信息 |
- 事件
事件 | 触发条件 |
---|---|
onreadystatechange | 当 xhr.readyState 改变时触发;但 xhr.readyState 由非 0 值变为 0 时不触发。 |
onloadstart | 调用 xhr.send()方法后立即触发,若 xhr.send()未被调用则不会触发此事件。 |
onprogress | xhr.upload.onprogress 在上传阶段(即 xhr.send()之后,xhr.readyState=2 之前)触发,每 50ms 触发一次;xhr.onprogress 在下载阶段(即 xhr.readyState=3 时)触发,每 50ms 触发一次 |
onload | 当请求完成时触发,此时 xhr.readyState=4 |
onloadend | 当请求结束(包括请求成功和请求失败)时触发 |
onabort | 当调用 xhr.abort()后触发 |
ontimeout | xhr.timeout 不等于 0,由请求开始即 onloadstart 开始算起,当达到 xhr.timeout 所设置时间请求还未结束即 onloadend,则触发此事件 |
onerror | 在请求过程中,若发生 Network error 则会触发此事件(若发生 Network error 时,上传还没有结束,则会先触发 xhr.upload.onerror,再触发 xhr.onerror ;若发生 Network error 时,上传已经结束,则只会触发 xhr.onerror )。注意,只有发生了网络层级别的异常才会触发此事件,对于应用层级别的异常,如响应返回的 xhr.statusCode 是 4xx 时,并不属于 Network error ,所以不会触发 onerror 事件,而是会触发 onload 事件。 |
请求正常时,事件触发顺序
- 触发 xhr.onreadystatechange (之后每次 readyState 变化时,都会触发一次)
- 触发 xhr.onloadstart //上传阶段开始:
- 触发 xhr.upload.onloadstart
- 触发 xhr.upload.onprogress
- 触发 xhr.upload.onload
- 触发 xhr.upload.onloadend //上传结束,下载阶段开始:
- 触发 xhr.onprogress
- 触发 xhr.onload
- 触发 xhr.onloadend
发生 abort / timeout / error 时事件触发顺序
- 触发 xhr.onreadystatechange 事件,此时 readystate 为 4
- 如果上传阶段还没有结束,则依次触发以下事件:
- xhr.upload.onprogress
- xhr.upload.[onabort 或 ontimeout 或 onerror]
- xhr.upload.onloadend
- 触发 xhr.onprogress 事件
- 触发 xhr.[onabort 或 ontimeout 或 onerror] 事件
- 触发 xhr.onloadend 事件
用法
(以 JSONPlaceHolder 为数据服务)
这个案例使用 XMLHttpRequest 对象发起了一个 GET 请求,
获取了 JSONPlaceholder 的用户信息数据,并将其解析为 JavaScript 对象,
然后生成了一个简单的用户列表,用于展示用户的姓名、邮箱和网站地址。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ajax 示例</title>
</head>
<body>
<ul id="users"></ul>
<script>
/*这个案例使用 XMLHttpRequest 对象发起了一个 GET 请求,
获取了 JSONPlaceholder 的用户信息数据,并将其解析为 JavaScript 对象,
然后生成了一个简单的用户列表,用于展示用户的姓名、邮箱和网站地址。*/
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
xhr.onload = function () {
if (xhr.status === 200) {
const users = JSON.parse(xhr.responseText);
const listItems = users
.map(
(user) =>
`<li><strong>${user.name}</strong> (${user.email}) - ${user.website}</li>`
)
.join("");
document.getElementById("users").innerHTML = listItems;
} else {
console.error(xhr.statusText);
}
};
xhr.onerror = function () {
console.error("发生了错误");
};
xhr.send();
</script>
</body>
</html>
热门相关:首席的独宠新娘 寂静王冠 霸皇纪 豪门闪婚:帝少的神秘冷妻 天启预报