Ajax总结目录
1. 传统请求方式
1.1 传统请求的方式
- 直接在浏览器地址栏上输入URL。
- 点击超链接
- 提交form表单
- 使用JS代码发送请求
1.2 传统请求存在的问题
- 页面全部刷新导致了用户的体验较差。
- 传统的请求导致用户的体验有空白期。（用户的体验是不连贯的）
2. Ajax
2.1 Ajax基础知识
AJAX不能称为一种技术，它是多种技术的综合产物。
- AJAX可以让浏览器发送一种特殊的请求，这种请求可以是：异步的。
- 什么是异步，什么是同步？
- 假设有t1和t2线程，t1和t2线程并发，就是异步。
- 假设有t1和t2线程，t2在执行的时候，必须等待t1线程执行到某个位置之后t2才能执行，那么t2在等t1，显然他们是排队的，排队的就是同步。
- AJAX是可以发送异步请求的。也就是说，在同一个浏览器页面当中，可以发送多个ajax请求，这些ajax请求之间不需要等待，是并发的。
- AJAX代码属于WEB前端的JS代码。和后端的java没有关系，后端也可以是php语言，也可以是C语言。
- AJAX 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。
- AJAX可以更新网页的部分，而不需要重新加载整个页面。（页面局部刷新）
- AJAX可以做到在同一个网页中同时启动多个请求，类似于在同一个网页中启动“多线程”，一个“线程”一个“请求”。
2.2 XMLHttpRequest对象
XMLHttpRequest对象是AJAX的核心对象，发送请求以及接收服务器数据的返回，全靠它了。
XMLHttpRequest对象，现代浏览器都是支持的，都内置了该对象。直接用即可。
创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
- XMLHttpRequest对象的方法
| 方法 | 描述 |
|---|---|
| abort() | 取消当前请求 |
| getAllResponseHeaders() | 返回头部信息 |
| getResponseHeader() | 返回特定的头部信息 |
| open(method, url, async, user, psw) | 规定请求method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名称psw：可选的密码 |
| send() | 将请求发送到服务器，用于 GET 请求 |
| send(string) | 将请求发送到服务器，用于 POST 请求 |
| setRequestHeader() | 向要发送的报头添加标签/值对 |
- XMLHttpRequest对象的属性
| 属性 | 描述 |
|---|---|
| onreadystatechange | 定义当 readyState 属性发生变化时被调用的函数 |
| readyState | 保存 XMLHttpRequest 的状态。0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪 |
| responseText | 以字符串返回响应数据 |
| responseXML | 以 XML 数据返回响应数据 |
| status | 返回请求的状态号200: "OK"403: "Forbidden"404: “Not Found” |
| statusText | 返回状态文本（比如 “OK” 或 “Not Found”） |
2.3 AJAX GET请求分析
AJAX GET请求建立步骤：
创建XMLHttpRequest的核心对象
注册回调函数
- 判断xhr对象的状态码是否发生变化
- 判断xhr状态码值是否为4 并且判断Http状态码是否为200
- 接受服务器响应的数据信息
打开通道
获取需要的数据
发送数据
建立AJAX GET请求的样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax2回顾</title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var mybtn = document.getElementById("mybtn");
mybtn.onclick = function () {
//1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//2.执行回调函数（接受服务器响应过来的数据）
xhr.onreadystatechange = function () {
//如果ajax请求码是4表示服务器开始响应数据
if (this.readyState == 4) {
if (this.status == 200) {
//http状态码也正常
//XMLHttpRequest对象获取响应的数据放到span标签
document.getElementById("mydiv").innerHTML = this.responseText
}
}
}
//3.开启通道
//首先需要获取到前端用户填入的数据
//遇到低版本的浏览器发送get请求时，会走缓存，解决办法是：加一个时间戳
// alert(new Date().getTime())
var usercode = document.getElementById("usercode").value;
var username = document.getElementById("username").value;
xhr.open("GET","/ajax/ajaxrequest2?t="+new Date().getTime()+"&usercode="+usercode+"&username="+username,true);
//4.发送数据
xhr.send();
}
}
</script>
usercode<input type="text" id="usercode"><br>
username<input type="text" id="username"><br>
<button id="mybtn">ajax study</button>
<br>
<div id="mydiv"></div>
</body>
</html>
2.4 AJAX POST请求
创建XMLHttpRequest的核心对象
注册回调函数
- 判断xhr对象的状态码是否发生变化
- 判断xhr状态码值是否为4 并且判断Http状态码是否为200
- 接受服务器响应的数据信息
打开通道（不在这里写传送的数据）
设置xhr的请求头
获取需要的数据
发送数据 （在这里填写数据）
建立AJAX POST请求的样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX POST请求</title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
document.getElementById("mybtn").onclick = function (){
//1.创建XMLHttpRequest核心对象
var xhr = new XMLHttpRequest();
//2.获取响应数据(this代表的就是xhr)
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
document.getElementById("mydiv").innerHTML = this.responseText;
}else{
alert(this.status);
}
}
}
//3.打开通道
xhr.open("POST","/ajax/ajaxrequest3",true);
//模拟form表单提交数据
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
xhr.send("username="+username+"&password="+password);//拼串发送数据
}
}
</script>
<!--使用Post方式提交表单数据-->
用户名：<input type="text" id="username"><br>
密码：<input type="password" id="password"><br>
<button id="mybtn">发送Ajax POST请求</button><br>
<div id="mydiv"></div>
<!--<form enctype="application/x-www-form-urlencoded"></form>-->
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看