概念
ajax全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。局部刷新技术。不是一门新技术，是多种技术的组合。是浏览器端的技术。
作用
实现在当前结果页中显示其他请求的响应内容
ajax的状态码(readyState)
0 表示XMLHttpRequest已建立，但还未初始化，这时尚未调用open方法
1 表示open方法已经调用，但未调用send方法（已创建，未发送）
2 表示send方法已经调用，其他数据未知
3 表示请求已经成功发送，正在接受数据
4 表示数据已经成功接收。
响应状态码(status)
200：请求成功
404：请求资源未找到
500：内部服务器错误
使用
ajax的基本流程
1）创建ajax引擎对象
2）复写onreadystatement函数
3）判断ajax状态码
4）判断响应状态码
5）获取响应内容(响应内容的格式)
普通字符串：responseText
json(重点)：responseText
其实就是将数据按照json的格式拼接好的字符串，方便使用eval方法
将接收的字符串数据直接转换为js的对象
json格式：
var 对象名={
属性名:属性值,
属性名:属性值,
……
}
XML数据：responseXML.返回document对象
通过document对象将数据从xml中获取出来
6）处理响应内容(js操作文档结构)
7）发送请求
get请求
get的请求实体拼接在URL后面，？隔开，键值对
ajax.open("get","url");
ajax.send(null);
post请求
有单独的请求实体
ajax.open("post", "url");
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("name=张三&pwd=123");
<%@ 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>
<!-- 声明js代码域 -->
<script type="text/javascript">
function getData(){
//创建ajax引擎对象
var ajax;
if(window.XMLHttpRequest){//火狐
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){//IE
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//复写onreadystatement函数
ajax.onreadystatechange=function(){
//判断Ajax状态吗
if(ajax.readyState==4){
//判断响应状态吗
if(ajax.status==200){
//获取响应内容
var result=ajax.responseText;
//处理响应内容
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML=result;
}else if(ajax.status==404){
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML="请求资源不存在";
}else if(ajax.status==500){
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML="服务器繁忙";
}
}else{
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML="<img src='img/2.gif' width='200px' height='100px'/>";
}
}
//发送请求
//get方式:请求实体拼接在URL后面
ajax.open("get","ajax?"+data);
ajax.send(null);
//post方式：请求实体需要单独的发送
ajax.open("post", "ajax");
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("name=张三&pwd=123");
}
</script>
<style type="text/css">
#showdiv{
border:solid 1px;
width:200px;
height:100px;
}
</style>
</head>
<body>
<h3>欢迎登录403峡谷</h3>
<hr>
<input type="button" value="测试 " onclick="getData()"/>
<div id="showdiv"></div>
</body>
</html>
ajax的异步和同步
ajax.open(method,urL,async)
async：设置同步代码执行还是异步代码执行
true代表异步，默认是异步
false代表同步
例：ajax.open("get","ajax",true);
json格式获取响应内容
responseText
其实就是将数据按照json的格式拼接好的字符串，方便使用eval方法
将接收的字符串数据直接转换为js的对象
json格式：
var 对象名={
属性名:属性值,
属性名:属性值,
……
}
<%@ 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>
<!--
需求分析：
1、在当前页面内显示查询结果，考虑使用ajax
2、创建ajax函数
3、调用ajax函数发送请求到UserServlet
4、调用业务层获取对应的数据
-->
<!-- 声明js代码域 -->
<script type="text/javascript" src="js/ajaxUtil.js"></script>
<script type="text/javascript">
//获取数据
function getData(){
//获取用户请求信息
var name=document.getElementById("uname").value;
//创建ajax引擎对象
var ajax;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//复写onreadystatechange
ajax.onreadystatechange=function(){
//判断ajax状态码
if(ajax.readyState==4){
//判断响应状态码
if(ajax.status==200){
//获取响应数据
var result=ajax.responseText;
//eval("var obj="+result);
//alert(obj.name);
eval("var u="+result);
alert(result);
//处理响应数据
//获取table表格对象
var ta=document.getElementById("ta");
ta.innerHTML="";
var tr=ta.insertRow(0);
var cell0=tr.insertCell(0);
cell0.innerHTML="编号";
var cell1=tr.insertCell(1);
cell1.innerHTML="名称";
var cell2=tr.insertCell(2);
cell2.innerHTML="价格";
var cell3=tr.insertCell(3);
cell3.innerHTML="位置";
var cell4=tr.insertCell(4);
cell4.innerHTML="描述";
//插入新的行
var tr=ta.insertRow(1);
var cell0=tr.insertCell(0);
cell0.innerHTML=u.uid;
var cell1=tr.insertCell(1);
cell1.innerHTML=u.uname;
var cell2=tr.insertCell(2);
cell2.innerHTML=u.price;
var cell3=tr.insertCell(3);
cell3.innerHTML=u.loc;
var cell4=tr.insertCell(4);
cell4.innerHTML=u.desc;
}
}
}
//发送请求
ajax.open("get","user?name="+name);
ajax.send(null);
}
</script>
</head>
<body>
<h3>欢迎访问英雄商店</h3>
<hr>
英雄名称：<input type="text" name="uname" value="" id="uname"/>
<input type="button" value="搜索" onclick="getData2()">
<hr>
<table border="1px" id="ta">
</table>
</body>
</html>
在UserServlet中：
1 public class UserServlet extends HttpServlet{
2 @Override
3 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
4 //设置请求编码格式
5 req.setCharacterEncoding("utf-8");
6 //设置响应编码格式
7 resp.setCharacterEncoding("utf-8");
8 resp.setContentType("text/xml;charset=utf-8");
9 //获取请求信息
10 String name=req.getParameter("name");
11 System.out.println("用户请求信息为："+name);
12 //处理请求信息
13 //获取业务层对象
14 UserSrevice us=new UserSeviceImp();
15 //处理业务
16 User u=us.getUserInfoService(name);
17 System.out.println("查询结果为:"+u);
18 //响应处理结果
19 //resp.getWriter().write("{name:'"+u.getUname()+"',pwd:'"+u.getPwd()+"'}");
20 resp.getWriter().write(new Gson().toJson(u));
21 }
22 }
在servlet中响应结果返回中：
resp.getWriter().write("{name:'"+u.getUname()+"',pwd:'"+u.getPwd()+"'}");
此方式拼接字符串太麻烦，推荐安装jar包：gson-2.2.4.jar
resp.getWriter().write(new Gson().toJson(u));
XML数据格式获取响应内容
responseXML：返回document对象
通过document对象将数据从xml中获取出来
<%@ 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">
<script type="text/javascript">
function getXML(){
//创建ajax引擎对象
var ajax;
if(window.XMLHttpRequest){//火狐
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){//ie
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//复写onreadystatechange
ajax.onreadystatechange=function(){
//判断Ajax状态吗
if(ajax.readyState==4){
//判断响应状态吗
if(ajax.status==200){
//获取响应内容
var doc=ajax.responseXML;
//处理响应内容
//获取元素对象
alert(doc.getElementsByTagName("name")[0].innerHTML);
}
}
}
//发送请求
ajax.open("get","xml.jsp",true);
ajax.send(null);
}
</script>
</head>
<body>
<h3>XML数据格式学习</h3>
<hr>
<input type="button" value="测试XML" onclick="getXML()" />
</body>
</html>
在xml.jsp中：
<%@ page language="java" contentType="text/xml; charset=utf-8"%>
<user>
<name>李四</name>
<pwd>123</pwd>
</user>
相当于在Servlet中响应xml格式信息：
//响应处理结果
resp.getWriter().write("<user><uid>1</uid><name>张三</name><price>11.11</price></user>");