ajax(asynchronous javascript and xml)异步JavaScript和xml
一、概念
ajax是一种用来改善用户体验的技术
利用浏览器提供一个对象(XMLHttpRequest,也称:ajax对象)向服务器发送异步请求-->服务器返回部分请求-->浏览器利用这些数据对当前页面做部分更新
(注:异步请求--当ajax对象发送请求时,浏览器不会销毁当前页面,用户仍然可以对当前页面做其他操作)
二、ajax对象几个重要属性
1、onreadystatechange:绑订一个事件处理函数,该函数用来处理readystatechange事件
(注:当ajax对象的readystate属性值发生了改变,比如,从0变成了1,则会产生readystatechange事件)
2、readyState:有5个值(0,1,2,3,4),表示ajax对象与服务器通信的进展(注:4 表示ajax对象已经获得了服务器返回的所有的数据)
3、responseText:获得服务器返回的文本数据
4、responseXML:获得服务器返回的xml数据
5、status:获得状态码(注:200 表示请求成功)
三、获取ajax对象(.js)
可以单独封装成一个js文件,再调用(ajax.js)
/*
* 获取ajax对象
*/
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//非IE浏览器
xhr = new XMLHttpRequest();
}else{
//IE浏览器
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
调用js文件
<head>
<script type="text/javascript" src="js/ajax.js"></script>
</head>
四、案例演示(Maven管理)
需求:判断用户名是否已经注册过?(用户名后面立刻显示判断结果给用户)
简单编程步骤:
1、编写页面
2、编写ajax
3、编写服务端
4、web.xml中配置服务端
详细编程步骤:
1、编写页面
<!-- 页面显示代码 -->
<body style="font-size:30px;">
<form action="regist.do" method="post">
用户名:<input id="uname" name="uname" οnblur="check_uname();"/>
<span id="check_uname_msg"></span><br/>
密 码:<input type="password" name="pwd"/><br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
2、编写ajax
(详细内容讲解,都在jsp文件中编写)
(1)获取ajax对象:获取XMLHttpRequest对象实例化
(如:使用封装ajax对象成js文件后,再使用var xhr = getXhr()调用实例化)
//获取ajax对象实例化
var xhr = getXhr();
(2)设置回调函数:为ajax对象的onreadystatechange事件设定响应函数
// 2、设置回调函数
function fn(){
if(xhr.readyState == 4 && xhr.status == 200){
var txt = xhr.responseText;
//DOM操作
}
}
(3)创建请求:调用XMLHttpRequest对象的open方法
/*
3、 创建请求(这里以get请求为例)
(1)get请求写法:xhr.open('get','xxx.do',true);
true :表示发送异步请求(当ajax对象发送请求时,用户仍然可以对当前页面做其他操作)
false:表示发送同步请求(当ajax对象发送请求时,浏览器会锁定当前页面,用户不能对当前页面做其他操作)
(2)post请求写法:
xhr.open('post','xxx.do',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
setRequestHeader的作用:因为HTTP协议要求发送post请求时候,必须有content-type消息头,
所以需要调用setRequestHeader方法,添加这个消息头
*/
var uri = 'check_uname.do?uname=' + $F('uname');
xhr.open('get',encodeURI(uri),true);
(4)发送请求:调用ajax对象的send方法
/*4、发送请求
get 请求写法:xhr.send(null);
send方法内传递null若要提交数据,则在open方法的“URL”后面追加,如下:
xhr.open('get','xxx.do?name=value&name=value',true)
上面第3创建请求里的open就是采用这种方法
post 请求写法:xhr.send(name=value&name=value...);
*/
xhr.send(null);
ajax完整代码:
(1)使用js封装的ajax对象:ajax.js文件(js)
/*
* 获取ajax对象
*/
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//非ie
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(
'Microsoft.XMLHttp');
}
return xhr;
}
/*
* 依据id查找对应的节点
*/
function $(id){
return document.getElementById(id);
}
/*
* 依据id查找节点,然后返回节点的值
*/
function $F(id){
return $(id).value;
}
(2)regist.jsp文件
(使用<script type="text/javascript" src="js/ajax.js"></script>调用ajax.js)
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<script type="text/javascript" src="js/ajax.js"></script>
function check_uname(){
// 1、获得ajax对象
var xhr = getXhr();
// 2、设置回调函数
xhr.onreadystatechange = function(){
// (处理服务器返回的结果)
if(xhr.readyState == 4 && xhr.status == 200){
// 只有当ajax对象已经获得了服务器返回的所有数据,并且没有出错。
var txt = xhr.responseText;
// 更新页面
$('check_uname_msg').innerHTML = txt;
}
};
//3、 创建请求(这里以get请求为例)
var uri = 'check_uname.do?uname=' + $F('uname');
xhr.open('get',encodeURI(uri),true);
// 4、发送请求
xhr.send(null);
}
</script>
</head>
<!-- 页面显示代码 -->
<body style="font-size:30px;">
<form action="regist.do" method="post">
用户名:<input id="uname" name="uname" οnblur="check_uname();"/>
<span id="check_uname_msg"></span><br/>
密 码:<input type="password" name="pwd"/><br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
3、编写服务端代码
创建ActionServlet.java,在该Servlet中实现服务端判断
package web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ActionServlet extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("service()");
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
// 分析请求资源路径
String uri = request.getRequestURI();
System.out.println("uri:" + uri);
String action = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf("."));
System.out.println("action:" + action);
// 依据分析结果做不同处理
if ("/check_uname".equals(action)) {
// 检查用户名是否存在
String uname = request.getParameter("uname");
System.out.println("uname:" + uname);
// 这里的用户名是设定死的,为“Sally”
if ("Sally".equals(uname)) {
// 只需要返回部分数据
out.println("用户名已经存在");
} else {
out.println("可以使用");
}
}
out.close();
}
}
4、配置服务端
在web.xml中配置ActionServlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<servlet>
<servlet-name>action</servlet-name>
<servlet-class>web.ActionServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>action</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
</web-app>
结果显示
1、注册失败:检验到已经有用户名注册过
2、注册成功
注册后跳转页面
Maven结构