IDEA激活码
AJAX技术可以帮助开发人员管理浏览器中异步请求对象
1.开发步骤：
- 在浏览器内存中，创建一个脚本对象，这个脚本对象就是异步请求对象
- 为异步请求对象添加工作状态监听器，帮助开发人员确认何时从异步请求对象身上得到服务端返回响应数据
- 初始化异步请求对象
通知异步请求对象采用何种方式发送请求协议包
通知异步请求对象本次要访问的资源文件地址
通知异步请求对象在工作期间，浏览器是否要等他[同步请求，异步请求] - 命令通知异步请求对象代替浏览器发送请求
2.AJAX命令：
- 如何创建一个异步请求对象
var xmlHttp = new XMLHttpRequest(); - 如何为异步请求对象绑定工作监听状态
xmlHttp.onreadystatechange=function(){} - 如何初始化异步请求对象
xmlHttp.open("post/get","/myweb/oneServlet?uname=smith",true); - 如何命令异步请求对象代替浏览器发送请求
xmlHttp.send()
3.异步请求对象工作状态：
readyState属性：存储当前的工作状态
| xmlHttp.readyState | 状态 | 发生位置 |
|---|---|---|
| 0 | 异步请求对象已经创建完毕 | var xmlHttp = new XMLHttpRequest(); |
| 1 | 异步请求对象已经初始化完毕 | xmlHttp.open(); |
| 2 | 异步请求对象已经发送了请求协议包，正常情况下服务端应该正在处理这个请求 | xmlHttp.send(); |
| 3 | 异步请求对象已经得到服务端返回的响应包，此时异步请求对象正在解析响应包中响应体内容 | |
| 4 | 异步请求对象已经解析数据完毕，此时数据是符合脚本规范的数据，开发人员可以提取响应的数据 |
4.如何从异步响应对象身上得到响应数据，进行局部刷新：
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
var s = xmlHttp.responseText();
}
}
Ajax编程四步：
- 创建Ajax核心对象
- 注册回调函数
- 开启通道
- 发送请求
index.jsp文件：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<body>
<script type="text/javascript">
function checkUsername(username) {
//发送Ajax请求，验证用户名是否可用
var xhr = new XMLHttpRequest();
//回调函数
xhr.onreadystatechange=function () {
if(xhr.readyState==4){
if(xhr.status==200){
var nameTigMag = document.getElementById("nameTipMsg");
nameTigMag.innerHTML=xhr.responseText;
}else{
alert(xhr.status);
}
}
}
//建立浏览器和服务器之间的通道
xhr.open("GET","/03/checkusername.do?username="+username,true);
//发送请求
xhr.send();
}
</script>
用户名：<input type="text" name="username" onblur="checkUsername(this.value);"><span id="nameTipMsg"></span><br>
密码：<input type="password" name="password">
</body>
</html>
web.xml文件：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>checkusername</servlet-name>
<servlet-class>com.hh.CheckUserNameServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>checkusername</servlet-name>
<url-pattern>/checkusername.do</url-pattern>
</servlet-mapping>
</web-app>
CheckUserNameServlet.java文件
package com.hh;
import java.io.IOException;
import java.io.PrintWriter;
public class CheckUserNameServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter writer = response.getWriter();
String username = request.getParameter("username");
if("admin".equals(username)){
writer.print("用户名不可用");
}else{
writer.print("用户名可以使用");
}
}
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
this.doPost(request, response);
}
}
