AJAX实现通过编号查询省份名称等信息
AJAX
全局刷新和异步刷新
全局刷新 ：在使用地址栏来访问JSP或者HTML文件时，浏览器需要通过请求对象向servlet发送请求，需要对整个页面进行刷新，页面被新的数据覆盖，需要在网络中传输大量的数据。
局部刷新：在浏览器的内部，发起请求获取数据，改变浏览器的部分数据。其余的页面不需要加载和渲染。网络中传输的数据少，给用户的感受高。例如百度搜索的联想词功能使用的就是AJAX。
一.什么是AJAX？
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX是一种异步刷新的方法，不是一种语言，使用的技术有js，css，xml等。
二.AJAX的使用XMLHttpRequest对象
1.创建异步对象。
2.给异步对象绑定事件。
3.初始化异步请求对象。
4.适应异步请求对象发送请求
三.异步请求对象的属性值
readyState: 表示异步请求对象的状态变化
它有以下5种状态值：
0：创建异步对象时， new XMLHttpRequest();
var XMLHttp = new XMLHttpRequest（）
1：初始异步请求对象， xmlHttp.open()
XMLHttp.open("请求方式（post/get）"，"请求对象"，true)
2：发送请求， xmlHttp.send()
XMLHttp.send();
3：从服务器端获取了数据，此时3， 注意3是异步对象内部使用， 获取了原始的数据。
4：异步对象把接收的数据处理完成后。 此时开发人员在4的时候处理数据。
**status属性：**表示网络请求的状况，200, 404, 500，当status = 200时，表示网络请求是成功的。
四 . AJAX的实现代码
实现步骤：
1.创建异步对象
2.绑定事件
在这一步 如果请求的状态发生变化时，异步对象会自动调用onreadystatechange事件对应的函数。
3.请求初始数据
4.发起请求
index.jsp用来发送异步请求
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head><script type="text/javascript">
//使用内存中的异步对象，代替浏览器发起请求。异步对象使用js创建和管理的。
function doAjax() {
//1.创建异步对象
var xmlHttp = new XMLHttpRequest();
//2.绑定事件
xmlHttp.onreadystatechange = function () {
//处理服务器端返回的数据，更新当前页面
//alert("readyState属性值======" + xmlHttp.readyState + "| status:" + xmlHttp.status)
if( xmlHttp.readyState == 4 && xmlHttp.status ==200){
// alert(xmlHttp.responseText);
//获取服务器短的数据，需要使用异步对象的属性responsText
var data = xmlHttp.responseText;
//更新dom对象， 更新页面数据
document.getElementById("mydata").innerText = data;
}
}
//3.初始请求数据
//获取dom对象的value属性值
var name = document.getElementById("name").value;
var w = document.getElementById("w").value;
var h = document.getElementById("h").value;
//bmiPrint?name=李四&w=82&h=1.8
var param = "name="+name + "&w="+w+"&h="+h;
//alert("param="+param);
xmlHttp.open("get","myBMI3?"+param,true);
//4.发起请求
xmlHttp.send();
}
</script>
</head>
<body>
<p>局部刷新ajax-计算bmi</p>
<div>
<!-- 没有使用form -->
姓名：<input type="text" id="name" /> <br/>
体重（公斤）:<input type="text" id="w" /> <br/>
身高（米）：<input type="text" id="h" /> <br/>
<input type="button" value="计算bmi" onclick="doAjax()">
<br/>
<br/>
<div id="mydata">等待加载数据....</div>
</div>
</body>
</html>
定义一个Servlet用来接收前端发送过来的异步请求。
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class BMI3Servlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//接收参数
String strName = request.getParameter("name");
String weight = request.getParameter("w");
String height = request.getParameter("h");
//计算bmi
float h = Float.valueOf(height);
float w = Float.valueOf(weight);
float bmi = w / ( h * h);
//判断bmi的范围
String msg = "";
if( bmi <= 18.5) {
msg = "您比较瘦";
} else if( bmi > 18.5 && bmi <= 23.9 ){
msg = "你的bmi是正常的";
} else if( bmi >24 && bmi <=27){
msg = "你的身体比较胖";
} else {
msg = "你的身体肥胖";
}
System.out.println("msg="+msg);
msg = "您好："+strName + "先生/女士, 您的bmi值是："+ bmi + ","+ msg;
//响应ajax需要的数据，使用HttpServletResponse输出数据
response.setContentType("text/html;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.println(msg);
pw.flush();
pw.close();
}
}
执行结果：
五.下面是一个输入省份id，获取省份名称简单web实现。
此时的请求地址并没有发生变化。
实现步骤
（一）、需要一个前端页面，来记录用户输入的参数信息，并创建异步请求对象，将参数传递给后端的Servlet来处理数据。
1.创建一个表格来显示服务器发送的信息。
```javascript
<table>
<tr>
<td>省份编号：</td>
<td><input type="text" id="proid">
<input type="button" value="搜索" onclick="doSearch()">
</td>
</tr>
<tr>
<td>省份名称：</td>
<td><input type="text" id="proname"></td>
</tr>
<tr>
<td>省份简称：</td>
<td><input type="text" id="projiancheng"></td>
</tr>
<tr>
<td>省会名称：</td>
<td><input type="text" id="proshenghui"></td>
</tr>
</table>
2.使用script标签，创建异步请求对象
<script type="text/javascript">
function doSearch() {
//1.创建异步对象
var xmlHttp = new XMLHttpRequest();
//2.绑定事件
xmlHttp.onreadystatechange = function() {
if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
var data = xmlHttp.responseText;
//eval是执行括号中的代码， 把json字符串转为json对象
var jsonobj = eval("(" + data + ")");
//更新dom对象
callback(jsonobj);
}
}
//3.初始异步对象的请求参数
var proid = document.getElementById("proid").value;
// true :异步处理请求。 使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其它的操作。
// false:同步，异步对象必须处理完成请求，从服务器端获取数据后，才能执行send之后的代码。 任意时刻只能执行一个异步请求。
xmlHttp.open("get","queryJson?proid="+proid,false);
//4.发送请求
xmlHttp.send();
//也可以创建其它的 XMLHttpRequest， 发送其它的请求处理。
/* alert("====在send之后的代码====")*/
}
3.定义一个函数用于处理服务器返回的数据
function callback(json){
document.getElementById("proname").value = json.name;
document.getElementById("projiancheng").value=json.jiancheng;
document.getElementById("proshenghui").value= json.shenghui;
}
4.这是源代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>使用json格式的数据</title>
<script type="text/javascript">
function doSearch() {
//1.创建异步对象
var xmlHttp = new XMLHttpRequest();
//2.绑定事件
xmlHttp.onreadystatechange = function() {
if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
var data = xmlHttp.responseText;
//eval是执行括号中的代码， 把json字符串转为json对象
var jsonobj = eval("(" + data + ")");
//更新dom对象
callback(jsonobj);
}
}
//3.初始异步对象的请求参数
var proid = document.getElementById("proid").value;
// true :异步处理请求。 使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其它的操作。
// false:同步，异步对象必须处理完成请求，从服务器端获取数据后，才能执行send之后的代码。 任意时刻只能执行一个异步请求。
xmlHttp.open("get","queryJson?proid="+proid,false);
//4.发送请求
xmlHttp.send();
//也可以创建其它的 XMLHttpRequest， 发送其它的请求处理。
/* alert("====在send之后的代码====")*/
}
//定义函数，处理服务器端返回的数据
function callback(json){
document.getElementById("proname").value = json.name;
document.getElementById("projiancheng").value=json.jiancheng;
document.getElementById("proshenghui").value= json.shenghui;
}
</script>
</head>
<body>
<p>ajax请求使用json格式的数据</p>
<table>
<tr>
<td>省份编号：</td>
<td><input type="text" id="proid">
<input type="button" value="搜索" onclick="doSearch()">
</td>
</tr>
<tr>
<td>省份名称：</td>
<td><input type="text" id="proname"></td>
</tr>
<tr>
<td>省份简称：</td>
<td><input type="text" id="projiancheng"></td>
</tr>
<tr>
<td>省会名称：</td>
<td><input type="text" id="proshenghui"></td>
</tr>
</table>
</body>
</html>
（二）.创建servlet文件来接收前端传递过来的参数。
1.这里使用request.getParameter来获取前端发来的数据。
//默认值，{}表示json格式的数据
String json ="{}";
// 获取请求参数，省份的id
String strProid =request.getParameter("proid");
2.将数据发送到dao包下的QueryDao来执行查询操作。
//判断proid有值时，调用dao查询数据
if( strProid != null && strProid.trim().length() > 0 ){
QueryDao dao = new QueryDao();
Province p = dao.queryProvinceById(Integer.valueOf(strProid));
//需要使用jackson 把 Provice对象转为 json
ObjectMapper om = new ObjectMapper();
json = om.writeValueAsString(p);
}
trim()用来去除字符串的空格，ObjectMapper是Jackson jar包下的方法，他的作用是把对象转换为一个json字符串返回到前端，或者将json字符串转换为对象。
writeValueAsString（obj）：将传入的对象序列化为json，返回给调用者
3.最后告知浏览器以何种编译器来编译接受的数据。
response.setContentType("application/json;charset=utf-8");
PrintWriter pw = response.getWriter();
/**
*
*
* 河北
* 石家庄
*
*
* 山西
* 太原
*
*
*/
pw.println(json); //输出数据---会付给ajax中 responseText属性
pw.flush();
pw.close();
以下是源代码
package com.pzyruo.controller;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.pzyruo.dao.QueryDao;
import com.pzyruo.entity.Province;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class QueryJsonServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//默认值，{}表示json格式的数据
String json ="{}";
// 获取请求参数，省份的id
String strProid =request.getParameter("proid");
/*System.out.println("strProid========="+strProid);*/
//判断proid有值时，调用dao查询数据
if( strProid != null && strProid.trim().length() > 0 ){
QueryDao dao = new QueryDao();
Province p = dao.queryProvinceById(Integer.valueOf(strProid));
//需要使用jackson 把 Provice对象转为 json
ObjectMapper om = new ObjectMapper();
json = om.writeValueAsString(p);
}
//把获取的数据，通过网络传给ajax中的异步对象，响应结果数据
//指定服务器端（servlet）返回给浏览器的是json格式的数据,json数据使用utf-8编码的
//response.setContentType("text/json;charset=utf-8");
response.setContentType("application/json;charset=utf-8");
PrintWriter pw = response.getWriter();
/**
*
*
* 河北
* 石家庄
*
*
* 山西
* 太原
*
*
*/
pw.println(json); //输出数据---会付给ajax中 responseText属性
pw.flush();
pw.close();
}
}
（三）、最后需要创建一个DAO类，来连接数据库，并执行查询操作，这里我使用的是JDBC工具类。
public class QueryDao {
JDBCUtil util = new JDBCUtil();
// 获取一个完整的Province对象
public Province queryProvinceById(Integer id){
String SQL = "select id, name, jiancheng, shenghui from province where id=?";
PreparedStatement ps = util.createStatement(SQL);
ResultSet rs = null;
Province province = null;
try {
ps.setInt(1,id);
rs = ps.executeQuery();
if (rs.next()){
province = new Province();
province.setId( rs.getInt("id"));
province.setName(rs.getString("name"));
province.setJiancheng(rs.getString("jiancheng"));
province.setShenghui(rs.getString("shenghui"));
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
util.close();
}
return province;
}
}