一.ajax是什么？
是网页中的异步刷新技术。其核心是js+xml
二.执行过程
1.js的核心对象XMLHttpRequest是一个具备像后台发送请求的一个对象
2.XMLHttpRequest可以异步发送请求
3.指定回调函数
4.等待后台响应，这个过程是异步的。此时网页中的其他元素是处于可用状态
5.响应得到后会执行回调函数来局部刷新网页
三。好处：
1.用户体验感增强
2.不用等待操作结果
3.提高带宽的使用率
四。Json数据的使用
1.json是一种纯字符串的数据格式，可以用来描述复杂的对象或数组
2.使用场景：可以将java对象和json格式的数据互相装换
3.使用步骤，在项目中要加入json转换的jar包
实例：验证用户名重复+省市区下拉列表联动
checkUsername.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">
var xmlhttp;//全局变量
function checkName(value){
//1.要获取XMLHttpRequest对象
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//指定回调函数
xmlhttp.onreadystatechange=reback;//回调函数是专门处理后台响应后的数据变化
//打开连接 指定提交方式，指定url地址 指定是否异步（true为异步 false同步）
//js中向后台传中文参数需要转码encodeURI('张三')
xmlhttp.open("post","ajaxCheckName?name="+encodeURI(value),true);
//设置传参方式为表单提交
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
xmlhttp.send();
} function reback(){
//判断各种响应状态
if (xmlhttp.readyState==4 && xmlhttp.status==200){
//获取后台响应过来的数据，只能接收字符串
if(xmlhttp.responseText=='true'){//用户名重复
document.getElementById('mess_name').style.color="red";
document.getElementById('mess_name').innerHTML="用户名重复";
}else{
document.getElementById('mess_name').style.color="green";
document.getElementById('mess_name').innerHTML="用户可用";
}
}
} //Jquery的方式来做ajax，效果同上
$("document").ready(function (){
$("#username").bind("blur",function(){
$.post("ajaxCheckName?name="+this.value,function(data){
if(data=="true"){
$("#mess_name").css("color","red");
$("#mess_name").html("用户名重复");
}else{
$("#mess_name").css("color","green");
$("#mess_name").html("用户名可用");
}
});
});
}); $("document").ready(function (){
$.post("address?type=province",function(data){
var str = "";
console.log(data);
$.each(JSON.parse(data),function(i,address){
console.log(i,address.id,address.name,address.type);
str += "<option value='"+address.id+"'>"+address.name+"</option>";
});
$("#pro").html(str);
}); $("#pro").bind("change",function(){
$.post("address?type=city&proid="+this.value,function(data){
var str = "";
console.log(data);
$.each(JSON.parse(data),function(i,address){
console.log(i,address.id,address.name,address.type);
str += "<option value='"+address.id+"'>"+address.name+"</option>";
});
$("#city").html(str);
});
}); $("#city").bind("change",function(){
$.post("address?type=area&cityid="+this.value,function(data){
var str = "";
console.log(data);
$.each(JSON.parse(data),function(i,address){
console.log(i,address.id,address.name,address.type);
str += "<option value='"+address.id+"'>"+address.name+"</option>";
});
$("#area").html(str);
});
});
});
</script>
<body>
<button onclick="checkName()">测试</button> <div id="myDiv"></div>
<input name="" onblur="checkName(this.value)">
<span id="err" style="color: red;"></span> <br>
<input> <div align="center">
<form action="">
用户名:<input id="username"><span id="mess_name"></span><br>
密码:<input><br>
地址:<select id="pro">
<option>请选择省份</option>
</select>
<select id="city">
<option>请选择城市</option>
</select>
<select id="area">
<option>请选择地区</option>
</select>
</form>
</div>
</body>
</html>
AjaxCheckNameServlet.java
package com.control; 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("/ajaxCheckName")
public class AjaxCheckNameServlet extends HttpServlet{
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name = req.getParameter("name"); PrintWriter out = resp.getWriter();//获取输出流
if("海文".equals(name)){//用户名重复
out.print("true");
}else{
out.print("false");
}
out.flush();
out.close();
}
}
AddressServlet.java
package com.control; import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.pojo.Address;
import com.service.AddressService;
import com.service.IAddressService; import net.sf.json.JSONArray;
@WebServlet("/address")
public class AddressServlet extends HttpServlet{
IAddressService addSer = new AddressService();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String type = req.getParameter("type");
List<Address> list = null;
if("province".equals(type)){//获取省份数据
list = addSer.getAllProvince();
} if("city".equals(type)){//获取城市
String proid = req.getParameter("proid");
list = addSer.getChildByParentid(proid);
} if("area".equals(type)){//获取地区
String cityid = req.getParameter("cityid");
list = addSer.getChildByParentid(cityid);
}
//将java对象转换成json数据
JSONArray json = JSONArray.fromObject(list); //将json响应给前台
resp.setCharacterEncoding("UTF-8");//解决响应的中文乱码问题
PrintWriter out = resp.getWriter();
out.print(json.toString());
out.flush();
out.close();
}
}