为什么需要Ajax？
需求：有的时候我们需要将本次的响应结果和前面的响应结果内容在同一个界面中展现给用户。
解决：普通方式是使用“九宫格”frameset在后台服务器端将多次响应内容拼接成一个jsp页面，但是这样会造成很多响应内容被重复响应，资源浪费。所以，我们使用Ajax技术。
什么是Ajax？
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种异步刷新技术。
AJAX 不是新的编程语言，而是一种新的交互方式。
AJAX 最大的优点是：在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
也就是说，Ajax实现的是：当前页面的js中像服务器发一个请求，服务器servlet返回请求结果后，js继续运行，而不会被新的界面覆盖。使用Ajax，让数据变成动态的。
Ajax与js对比
js可以实现：下拉框、省份选择三级联动
js无法实现：用户是否占用检测（需要去数据库比较）
不管是普通请求，还是Ajax，服务器接收的都是从来浏览器发送来的请求。统一进行请求处理，没有区别。
而接收请求的时候，Ajax不会刷新页面，而是在当前页面直接接收相应内容。
题外话
servlet2.5默认创建web.xml,servlet3.0不创建web.xml,需要给servlet起别名的话，直接在servlet的class上面添加注解@WebServlet("/别名")即可
传统的js页面
没有使用Ajax
<%@ 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/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(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML="哈哈，今天的雾霾真得是新鲜";
}
</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的5种状态码：
| readyState值 | 含义 |
|---|---|
| 0 | 表示XMLHttpRequest已建立，但还未初始化，这时尚未调用open方法 |
| 1 | 表示open方法已经调用，但未调用send方法（已创建，未发送） |
| 2 | 表示send方法已经调用，其他数据未知 |
| 3 | 表示请求已经成功发送，正在接受数据 |
| 4 | 表示数据已经成功接收。 |
同步执行：一个线程。
异步执行：多个线程。一般情况下用异步，很少用同步。
<%@ 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/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- 声明js代码域 -->
<!--
Ajax学习：
1、ajax的概念
局部刷新技术。不是一门新技术，是多种技术的组合。是浏览器端的技术。
2、ajax的作用
实现在当前结果页中显示其他请求的响应内容
3、ajax的使用
ajax的基本流程
//创建ajax引擎对象
//复写onreadystatement函数
//判断ajax状态码
//判断响应状态码
//获取响应内容(响应内容的格式)
//普通字符串：responseText
//json(重点)：responseText
其实就是将数据按照json的格式拼接好的字符串，方便使用eval方法
将接受的字符串数据直接转换为js的对象
json格式：
var 对象名={
属性名:属性值,
属性名:属性值,
……
}
//XML数据：responseXML.返回document对象
通过document对象将数据从xml中获取出来
//处理响应内容(js操作文档结构)
//发送请求
//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");
ajax的状态码
ajax状态码:
readyState：0,1,2,3,4
4: 表示响应内容被成功接收
响应状态码:
status
200:表示一切OK
404:资源未找到
500：内部服务器错误
ajax的异步和同步
ajax.open(method,urL,async)
async：设置同步代码执行还是异步代码执行
true代表异步，默认是异步
false代表同步
-->
<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'/>";
}
}
//发送请求
ajax.open("get","ajax",true); // true异步 false同步(相应结果之后才继续执行)
ajax.send(null);
alert("哈哈");
}
</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画表格 Demo
<%@ 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/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.responseXML;
alert(result);
//eval("var u="+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);
}
function getData2(){
var name=document.getElementById("uname").value;
var data="name="+name;
myAjax("get","user",data,function(a){
//获取响应数据
var rs=a.responseText;
//处理响应数据
alert(rs);
});
}
</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>
使用JSON为js传输数据
（1）服务器端：
package cn.hanquan.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.Logger;
import com.google.gson.Gson;
import cn.hanquan.orm.po.Pcd;
import cn.hanquan.service.UserServiceImpl;
/**
* 选择地区
*
* @author Buuug
*
*/
public class LocateServlet extends HttpServlet {
Logger logger = Logger.getLogger(UserServiceImpl.class);
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 设置编码及相应字符集
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
// 获取请求
String pid = req.getParameter("pid");
logger.debug("pid" + pid);
// 获取子地区list
UserServiceImpl us = new UserServiceImpl();
List<Pcd> list = us.getAreaInfo(pid);
// 设置响应
String json = new Gson().toJson(list);
logger.debug(json);
resp.getWriter().write(json);//见下面json的内容示例
}
}
JSON的内容示例（可以使用google的Gson包自动生成）
[{“name”:“南昌”,“pid”:36,“id”:3601},{“name”:“景德镇”,“pid”:36,“id”:3602},{“name”:“萍乡”,“pid”:36,“id”:3603},{“name”:“九江”,“pid”:36,“id”:3604},{“name”:“新余”,“pid”:36,“id”:3605},{“name”:“鹰潭”,“pid”:36,“id”:3606},{“name”:“赣州”,“pid”:36,“id”:3607},{“name”:“吉安”,“pid”:36,“id”:3608},{“name”:“宜春”,“pid”:36,“id”:3609},{“name”:“抚州”,“pid”:36,“id”:3610},{“name”:“上饶”,“pid”:36,“id”:3611}]
（2）前端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/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
select{
width:300px;
height:30px;
}
#showdiv{
width:1000px;
margin:auto;
margin-top:150px;
}
body{
background-color: gray;
}
</style>
<!--
三级联动思路:
1、因为需要在下拉框中实时的变更其中数据，而页面的其他数据不变，使用Ajax
2、页面加载成功后省下拉框中要填充好所有的省信息
-->
<script type="text/javascript" src="/09-Manager/js/ajaxUtil.js"></script>
<script type="text/javascript">
//创建函数获取所有省信息
function getProvince(){
//使用ajax请求所有的省信息
myAjax("get","/09-Manager/LocateServlet","pid=0",function(ajax){
//获取响应数据
var result=ajax.responseText;
eval("var areas="+result);// eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
//处理响应数据
//获取下拉框对象
var sel=document.getElementById("province");
//遍历数据将数据填充到下拉框中
for(var i=0;i<areas.length;i++){
sel.innerHTML=sel.innerHTML+"<option value="+areas[i].id+">"+areas[i].name+"</option>"
}
getCity();
});
}
//获取所有市信息
function getCity(){
var pid=document.getElementById("province").value;
myAjax("get","/09-Manager/LocateServlet","pid="+pid, function(ajax){
//获取响应数据
var result=ajax.responseText;
eval("var areas="+result);
//获取下拉框对象
var sel=document.getElementById("city");
sel.innerHTML="";
//遍历数据将数据填充到下拉框中
for(var i=0;i<areas.length;i++){
sel.innerHTML=sel.innerHTML+"<option value="+areas[i].id+">"+areas[i].name+"</option>"
}
geTown();
})
}
//获取所有区县信息
function geTown(){
var pid=document.getElementById("city").value;
myAjax("get","/09-Manager/LocateServlet","pid="+pid, function(ajax){
//获取响应数据
var result=ajax.responseText;
eval("var areas="+result);
//获取下拉框对象
var sel=document.getElementById("town");
sel.innerHTML="";
//遍历数据将数据填充到下拉框中
for(var i=0;i<areas.length;i++){
sel.innerHTML=sel.innerHTML+"<option value="+areas[i].id+">"+areas[i].name+"</option>"
}
})
}
</script>
</head>
<body onload="getProvince()">
<div id="showdiv">
省:<select id="province" onchange="getCity()"></select>
市：<select id="city" onchange="geTown()"></select>
区县:<select id="town"></select>
</div>
</body>
</html>
更多推荐
【Ajax】Ajax技术讲解
发布评论