1.ajax概述
Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML
不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法。-
Ajax：只刷新局部页面的技术
- JavaScript：更新局部的网页
- XML：一般用于请求数据和响应数据的封装
- XMLHttpRequest对象：发送请求到服务器并获得返回结果
- CSS：美化页面样式
- 异步：发送请求后不等返回结果，由回调函数处理结果
JavaScript中XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力。
不同浏览器，甚至相同浏览器的不同版本，获取该对象的方式是不同的。
<script type="text/javascript">
//1.创建XMLHttpRequest对象
function getXMLHttpReuest() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
window.onload = function() {
//2.获取XMLHttpRequest对象
var req = getXMLHttpReuest();
//alert(req);//验证XMLHttpRequest是否获取成功
//5.处理响应结果
req.onreadystatechange=function(){
//alert(req.readyState);//查看链接状态
if(req.readyState==4){
//alert(req.status);//查看服务器端相应状态
if(req.status==200){//服务器响应正常
alert(req.responseText);//得到响应结果
}
}
}
//3.建立链接，共3个参数:get或post请求、请求路径、默认true为异步请求，false为同步请求
req.open("get","${pageContext.request.contextPath }/ajaxServlet",true);
//4.发送请求：get方式值为null
req.send(null);
}
</script>
2.ajax方法及属性
- 常用方法
| 方法名 | 说明 |
|---|---|
| open(method,URL,async) | 建立与服务器的连接method参数指定请求的HTTP方法,典型的值是GET或POST，URL参数指请求的地址，async参数指定是否使用异步请求，其值为true或false |
| send(content) | 发送请求，content参数指定请求的参数 |
| setRequestHeader(header,value) | 设置请求的头信息 |
- 常用属性
- onreadystatechange：指定回调函数
- readyState: XMLHttpRequest的状态信息
| 就绪状态码 | 说明 |
|---|---|
| 0 | XMLHttpRequest对象没有完成初始化，即：刚刚创建。 |
| 1 | XMLHttpRequest对象开始发送请求，调用了open方法，但还没有调用send方法。请求还没有发出 |
| 2 | XMLHttpRequest对象的请求发送完成，send方法已经调用，数据已经提交到服务器，但没有任何响应 |
| 3 | XMLHttpRequest对象开始读取响应，还没有结束收到了所有的响应消息头，但正文还没有完全收到 |
| 4 | XMLHttpRequest对象读取响应结束，一切都收到了 |
- status：HTTP的状态码
- esponseText：获得响应的文本内容
- responseXML：获得响应的XML文档对象documednt
- 就绪状态是4而且状态码是200，才可以处理服务器数据
| 状态码 | 说明 |
|---|---|
| 200 | 服务器响应正常 |
| 400 | 无法找到请求的资源 |
| 403 | 没有访问权限 |
| 404 | 访问的资源不存在 |
| 500 | 服务器内部错误 |
3.ajax示例
验证用户名是否存在：
- jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1.创建XMLHttpRequest对象
function getXMLHttpReuest() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function ckName(){
//1.获取用户名
var name=document.getElementsByTagName("input")[0].value;
//2.获取XMLHttpRequest对象
var req = getXMLHttpReuest();
//5.处理响应结果
req.onreadystatechange=function(){
//alert(req.readyState);//查看链接状态
if(req.readyState==4){//等于4的时候代表请求正常
//alert(req.status);//查看服务器端相应状态
if(req.status==200){//等于200代表服务器响应正常
//alert(req.responseText);//得到响应结果
var msg = document.getElementById("msg");
if(req.responseText=="true"){
msg.innerHTML="用户名已存在";
}else{
msg.innerHTML="可以使用";
}
}
}
}
//3.建立链接，共3个参数:get或post请求、请求路径、默认true为异步请求，false为同步请求
req.open("get","${pageContext.request.contextPath }/regServlet?name="+name);
//4.发送请求：get方式值为null
req.send(null);
}
//写法二：去掉用户名标签上的onblur事件
window.onload=function(){
var nameElement = document.getElementsByName("userName")[0];
nameElement.onblur = function(){
var name = this.value;//this等价于nameElement
//创建XMLHttpRequest对象
var xhr = getXMLHttpRequest();
//处理结果
xhr.onreadystatechange = function(){
if(xhr.readyState==4){//请求一切正常
if(xhr.status==200){//服务器响应一切正常
//alert(xhr.responseText);//得到响应结果
var msg = document.getElementById("msg");
if(xhr.responseText=="true"){
msg.innerHTML = "<font color='red'>用户名已存在</font>";
//msg.innerText = "<font color='red'>用户名已存在</font>";
}else{
msg.innerHTML = "可以使用";
}
}
}
}
//创建连接
xhr.open("get","${pageContext.request.contextPath }/servlet/ckNameServlet?name="+name.value);
//发送请求
xhr.send(null);
}
}
</script>
</head>
<body>
用户名：<input type="text" name="userName" onblur="ckName()"/><span id="msg"></span><br/>
密码：<input type="text" name="pwd"/><br/>
</body>
</html>
- servlet
package com.rhit.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/regServlet")
public class RegServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out=response.getWriter();
String name=request.getParameter("name");
if("tom".equals(name)){
out.print(true);
}else{
out.print(false);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
