Ajax及其应用
目录[*]Ajax 工作原理
[*]XMLHttpRequests 对象
[*]用法
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()未被调用则不会触发此事件。onprogressxhr.upload.onprogress 在上传阶段(即 xhr.send()之后,xhr.readyState=2 之前)触发,每 50ms 触发一次;xhr.onprogress 在下载阶段(即 xhr.readyState=3 时)触发,每 50ms 触发一次onload当请求完成时触发,此时 xhr.readyState=4onloadend当请求结束(包括请求成功和请求失败)时触发onabort当调用 xhr.abort()后触发ontimeoutxhr.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.
[*]xhr.upload.onloadend
[*]触发 xhr.onprogress 事件
[*]触发 xhr. 事件
[*]触发 xhr.onloadend 事件
用法
(以 JSONPlaceHolder 为数据服务)
这个案例使用 XMLHttpRequest 对象发起了一个 GET 请求,
获取了 JSONPlaceholder 的用户信息数据,并将其解析为 JavaScript 对象,
然后生成了一个简单的用户列表,用于展示用户的姓名、邮箱和网站地址。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ajax 示例</title>
</head>
<body>
<ul id="users"></ul>
</body>
</html>
来源:https://www.cnblogs.com/guo-jiaojiao/p/17238251.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页:
[1]