前言:
作为资深球迷,提起Ajax,第一反应想到的是阿贾克斯,那个曾培养出伊布,范德法特,苏亚雷斯,亨特拉尔等一众球星的荷甲著名球队。
很显然,我们今天说的Ajax,跟足球没有任何关系,我们说的是这个Ajax:Asynchronous JavaScript And XML(异步JavaScript和XML)。
Ajax不是一门编程语言,指的是一种交互方式:客户端与服务器交换数据并更新在局部网页的技术,不需要重新加载整个页面。
Ajax的核心就是异步加载或者叫局部刷新。
什么是局部刷新?通过一个直观的例子来了解。
需求
1.点击提交按钮,向服务器发请求,等待响应。
2.同时在input框输入信息。
3.服务器返回"haha"字符串,将结果显示在页面。
传统方法会刷新整个页面:
点击提交按钮后,正在input框输入内容时,服务器响应返回。会以重新加载整个页面的形式展示结果,同步加载,所以input框内输入的内容全部清空。
Ajax局部刷新:
点击提交按钮后,在input框输入内容,服务器响应返回,只动态刷新要展示结果的部分网页,并不会影响到input框的输入,结果展示和输入是同时在进行的,互不干扰,异步加载。
传统web数据交互 VS Ajax数据交互
客户端请求方式不同:
传统:浏览器发送同步请求。
Ajax:异步引擎对象发送请求。
服务器响应方式不同:
传统:响应一个完整页面(JSP)。
Ajax:响应需要的数据。
客户端处理方式不同:
传统:需等待服务器响应完成并重新加载整个页面后,用户才能进行操作。
Ajax:动态更新页面中的局部内容,不影响用户在页面的其他操作。
Ajax原理
Ajax的工作原理相当于在客户端和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax技术的核心:XMLHttpRequest
常用方法:
1. open() 创建一个新的HTTP请求。
2. send() 将请求发送到服务器。
常用事件:
onreadystatechange:指定回调函数。
常用属性:
readyState:XMLHttpRequest的状态信息。
状态码表示的意义:
0:XMLHttpRequest对象未完成初始化。
1:XMLHttpRequest对象开始发送请求。
2:XMLHttpRequest对象的请求发送完成。
3:XMLHttpRequest对象对象开始读取响应。
4:XMLHttpRequest对象读取响应结束。
代码:
JSP:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="<%=path%>/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function validation(){
var name = $("#name").val();
//创建XMLHttpRequest对象
xmlHttpRequest = createXMLHttpRequest();
//设置回调
xmlHttpRequest.onreadystatechange = callback;
//初始化XMLHttpRequest组件
var url = "user.do?name="+name;
xmlHttpRequest.open("POST",url);
xmlHttpRequest.send(null);
}
//创建XMLHttpRequest对象
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
//定义回调函数
function callback(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var data = xmlHttpRequest.responseText;
if(data == "true"){
$("#info").html("用户名已存在");
}else{
$("#info").html("用户名可以使用");
}
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="validation()" id="name"/>
<div id="info"></div>
</body>
</html>
Servlet:
package com.southwind.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class UserServlet extends HttpServlet{
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
@Override
public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
String name = req.getParameter("name");
String result = "false";
if(name.equals("zhangsan")){
result = "true";
}
PrintWriter out = resp.getWriter();
out.print(result);
out.flush();
out.close();
}
}
JavaScript传统方式调用Ajax有很多不足,步骤繁琐,方法,属性多不便记忆,存在浏览器兼容问题等。
jQuery对Ajax进行了封装,可以解决上述问题。
语法:
$.ajax([settings]);
常用属性参数:
url:要请求的服务器资源。
type:请求方式,默认是GET。
data:发送到服务器的参数。
dataType:服务器返回的数据类型(text,JSON,html,xml等)。
常用函数参数:
success:请求成功调用的函数。
error:请求失败调用的函数。
complete:请求完成调用的函数(无论成功或失败都会调用)。
使用jQuery发送Ajax请求,代码大大简化。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="<%=path%>/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function validation(){
var name = $("#name").val();
$.ajax({
url:"user.do",
type:"POST",
data:"name="+name,
dataType:"text",
success:function(data){
if(data == "true"){
$("#info").html("用户名已存在");
}else{
$("#info").html("用户名可以使用");
}
},
error:function(){
alert("系统繁忙");
}
});
}
</script>
</head>
<body>
用户名:<input type="text" onblur="validation()" id="name"/>
<div id="info"></div>
</body>
</html>
Ajax返回JSON格式数据。
JSP:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="<%=path%>/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"json.do",
type:"POST",
data:"",
dataType:"JSON",
success:function(data){
$("#id").text(data.id);
$("#name").text(data.name);
$("#pwd").text(data.pwd);
},
error:function(){
alert("系统繁忙");
}
});
});
</script>
</head>
<body>
<div id="id"></div>
<div id="name"></div>
<div id="pwd"></div>
</body>
</html>
Servlet:
package com.southwind.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class JsonServlet extends HttpServlet{
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
@Override
public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
resp.setContentType("text/html;charset=UTF-8");
String str ="{\"id\":1,\"name\":\"张三\",\"pwd\":123}";
PrintWriter out = resp.getWriter();
out.print(str);
out.flush();
out.close();
}
}
通过上面代码可以看到,后台代码手动拼接JSON非常麻烦,我们可以借助于工具类来完成JSON数据的转换。
1.导入JSON工具类相关jar包。
2.创建User实体类。
package com.southwind.entity;
public class User {
private int id;
private String name;
private String pwd;
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
3.使用工具类完成User对象的JSON格式转换。
package com.southwind.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import com.southwind.entity.User;
public class JsonServlet extends HttpServlet{
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(req, resp);
}
@Override
public void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TODO Auto-generated method stub
resp.setContentType("text/html;charset=UTF-8");
User user = new User();
user.setId(1);
user.setName("张三");
user.setPwd("123");
PrintWriter out = resp.getWriter();
JSONObject json = JSONObject.fromObject(user);
out.print(json);
out.flush();
out.close();
}
}