Ajax
定义
asynchronous javascript and xml(异步的js与xml)：是一种用于改善用户体验度的技术，利用浏览器内置的ajax对象(数据类型是XMLHttpRequest)向服务器发送异步(ajax向服务器发送请求时，用户可以在页面继续其他的操作)请求，服务器将处理之后的结果返回给ajax，通过js获取数据局部更新页面，整个过程中，页面不会被销毁。
优点
-
页面不会刷新，体验好
-
减少浏览器与服务器的数据交互，提高响应速度，浏览器发送请求，返回的是完整的页面（html+css+js+数据），而ajax返回数据
-
不需要安装任何插件就可以使用
获取Ajax对象
//ActiveXObject(低版本的IE浏览器)
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
属性
onreadystatechange：给ajax对象**注册监听器(绑定事件函数)**
readyState：定义ajax对象与服务器通讯的**状态**，当状态值发生改变时，触发监听器
- 0(未初始化):对象已经创建，但是尚未调用open方法
- 1(已初始化):对象创建并已经调用open方法，但尚未调用send方法
- 2(发送数据):已经调用send方法
- 3(数据传送中):ajax已经接收了部分服务器返回的数据
- 4(响应结束):ajax已经接收了服务器返回的全部数据
- responseText：获取服务器返回的文本数据
- responseXML：获取服务器返回的xml格式数据
- status:获取服务器响应的状态码(404,500,200)
发送请求
get请求
1. 获取Ajax对象
2. 初始化，建立连接：`xhr.open("get", "checkUsername.do?username=" + username, true);`
true是异步，false的同步，请求过程中会锁住页面，直到服务器响应后
3. 给Ajax注册监听器：` xhr.onreadystatechange = function () {}`
4. 发送请求：`xhr.send(null);`
post请求
1. 获取Ajax对象
2. 初始化：
`xhr.open("post", "checkUsername.do", true);`
`xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");`
3. 给Ajax注册监听器
4. 发送数据：`xhr.send("username" + username);`
乱码、缓存
- 中文乱码：IE使用的是gbk格式处理文字，chrome使用utf-8，服务器使用utf-8，使用IE会产生中文乱码问题，解决方式就是使用encodeURI编码解码处理参数
- 缓存：如果请求地址不发生改变，IE返回的数据是缓存数据，不会向服务器发送请求，如果需要发送请求，需要在请求地址后面添加随机数或者时间戳改变每一次的请求地址
演示
get
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<script src="js/ajax.js"></script>
<script>
function checkUsername(username) {
//非空校验
if (username.trim().length == 0) {
document.getElementById("usernameMsg").innerHTML = "不能为空";
return;
}
//唯一性校验
//使用ajax向服务器发送请求
let xhr = getXhr();
//初始化
xhr.open("get", "checkUsername.do?username=" + username, true);
//注册监听器
xhr.onreadystatechange = function () {
//获取服务返回的数据，更新页面
//判断服务器是否将数据传输完毕
if (xhr.readyState == 4) {
if (xhr.status == 200) {
let data = xhr.responseText;
document.getElementById("usernameMsg").innerHTML = data;
} else {
document.getElementById("usernameMsg").innerHTML = "系统繁忙...";
}
}
}
document.getElementById("usernameMsg").innerHTML = "系统繁忙...";
//发送请求
xhr.send(null);
}
</script>
</head>
<body>
<form action="regist.do" method="post">
昵称：<input name="username" onblur="checkUsername(this.value);"/>
<span id="usernameMsg" style="color: red"></span><br>
密码：<input name="password"/>
<span id="passwordMsg" style="color: red"></span><br>
<input type="submit" value="注册"/>
</form>
</body>
</html>
package controller;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("*.do")
public class ActionServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
String url = req.getRequestURI();
url = url.substring(url.lastIndexOf("/"), url.lastIndexOf("."));
if ("/checkUsername".equals(url)) {
//获取请求参数值
String username = req.getParameter("username");
//模拟延时
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//模拟异常
//Integer.parseInt(null);
if ("123".equals(username)) {
out.print("已被占用");
} else {
out.print("可以使用");
}
}
}
}
function getXhr() {
let xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
post
<script>
function checkUsername(username) {
//todo
//初始化
xhr.open("post", "checkUsername.do", true);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//监听器todo
//发送请求
xhr.send("username" + username);
}
</script>
案例
下拉选择框：二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/ajax.js"></script>
<script>
function change(value){
let xhr = getXhr();
xhr.open("get","city.city?value="+value,true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
document.getElementById("s2").options.length=0;
let data = xhr.responseText;
let arr = data.split(",");
for(let i=0;i<arr.length;i++){
//接受数据，处理字符串数据：拆分
let city = arr[i];
let txt = city.split(":")[1];
let val = city.split(":")[0];
let option = new Option(txt,val);
document.getElementById("s2").options[i] = option;
}
}
};
xhr.send(null);
}
</script>
</head>
<body>
<!--一级下拉选择框 onchange改变事件：数据发生改变时触发-->
<select onchange="change(this.value)">
<option value="1">请选择</option>
<option value="2">江苏省</option>
<option value="3">安徽省</option>
</select>
<!--二级下拉选择框 -->
<select id="s2">
<option value="-1">请选择</option>
</select>
</body>
</html>
package controller;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("*.city")
public class CityServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
String uri = req.getRequestURI();
uri = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
if ("/city".equals(uri)) {
String value = req.getParameter("value");
if ("1".equals(value)) {
out.print("-1:请选择");
} else if ("2".equals(value)) {
out.print("nj:南京,sz:苏州");
} else if ("3".equals(value)) {
out.print("hf:合肥,tc:天长");
}
}
}
}
2047
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
