Ajax学习
Ajax基础
1 相关知识点
<%--
Created by IntelliJ IDEA.
User: linyuqi
Date: 2019-07-06
Time: 08:27
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<%--
Ajax学习：
概念：异步刷新技术，用来在当前页面内响应不同的请求内容
需求：有的时候我们需要将本次响应结果和前面的响应结果内容在同一个页面中展现给用户
解决：
1、在后台将多次响应结果拼接在同一个jsp页面中，但这样会造成很多重复的内容被重复响应，造成资源的浪费
2、使用Ajax技术
使用：
1、创建引擎对象
2、覆写onreadystatechange函数
判断ajax的状态码
判断响应状态码
获取响应内容
普通字符串：responseText
json（重点）：responseText
将数据按照json的格式拼接好字符串，方便使用eval方法将直接转化为js对象
json格式：
var 对象名={
属性名：属性值；
属性名：属性值；
。。。。
}
xml：responseXML
处理响应内容（js操作文档结构）
3、发送请求
get方式：请求实体拼接在URL后面
ajax.open("get","../ajax?name=zhangsan&pwd=1234",true);
ajax.send(null);
post方式：请求实体需要单独发送
首先：
<form action="" enctype="application/x-www-form-urlencoded"></form>
js代码：
ajax.open("post","../ajax",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("name=zhangsan&pwd=1234");
ajax的状态码：
readyState：0 1 2 3 4
4：表示响应内容被成功接收
响应状态码：200 404 500
ajax的同步和异步：
ajax.open(method,url,async);
async:设置异步，默认是true
--%>
<head>
<title>Ajax学习</title>
<%-- 声明js代码域--%>
<script>
function getDate() {
//创建ajax引擎对象
var ajax;
if (window.XMLHttpRequest){//火狐
ajax=new XMLHttpRequest();
}else if (window.ActiveXObject){//低版本IE
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//覆写onreadystatechange函数
ajax.onreadystatechange=function () {
//判断ajax状态码 状态码：0 1 2 3 4(接收到返回数据)
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 {
//在readyState==4时且未接收到数据，设置图片显示"正在查询"内容
var showdiv = document.getElementById("showdiv");
showdiv.innerHTML= "<img src='图片的路径'/>";
}
}
//发送请求
//谜之URL写法：实现了500
//理解：以该文件问主题，寻找目标servlet的路径写法
ajax.open("get","../ajax",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(null);
/* //获取元素对象
var showdiv = document.getElementById("showdiv");
//修改元素内容
showdiv.innerHTML="今天天气不错！";*/
}
</script>
<%-- 声明css代码域--%>
<style>
#showdiv{
border: solid 1px;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<h1>欢迎登陆</h1>
<hr>
<input type="button" value="测试" onclick="getDate()">
<div id="showdiv"></div>
</body>
</html>
2 查询小案例
2.1 使用ajax技术做的一个小查询项目：
2.1.1 JSP：
<%--
Created by IntelliJ IDEA.
User: linyuqi
Date: 2019-07-06
Time: 11:20
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<%--
需求分析：
在当前页面显示查询结果，使用ajax技术
创建ajax函数
调用ajax函数发送请求到UserServlet
调用业务层获取对应的数据
--%>
<head>
<title>ajax实战</title>
<%-- 声明js代码域--%>
<script>
//第一种方式：
//获取数据
function getDate() {
//获取用户请求信息
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;
//alert(result);
eval("var user="+result);
//响应数据
//获取table表格对象
var ta = document.getElementById("ta");
//设置table清空
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 tr = ta.insertRow(1);
var cell0 = tr.insertCell(0);
cell0.innerHTML=user.id;
var cell1 = tr.insertCell(1);
cell1.innerHTML=user.name;
var cell2 = tr.insertCell(2)
cell2.innerHTML=user.price
var cell3 = tr.insertCell(3)
cell3.innerHTML=user.description
}
}
}
//发送请求
ajax.open("get","../user?name="+name);
ajax.send(null);
}
</script>
</head>
<body>
<h3>欢迎访问英雄商店：</h3>
<hr>
英雄名称：<input type="text" value="" name="uname" id="uname">
<input type="button" value="搜索" onclick="getDate()">
<table border="1px" id="ta">
<%--<tr>
<td>编号</td>
<td>名称</td>
<td>价格</td>
<td>描述</td>
</tr>--%>
</table>
</body>
</html>
2.1.2 Servlet：
package cn.servlet.servlet;
import cn.servlet.bean.User;
import cn.servlet.service.UserServiceImp;
import com.google.gson.Gson;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class UserServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("进入servlet：");
//设置编码
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//获取数据
String name=req.getParameter("name");
System.out.println(name);
//调用业务层
UserServiceImp userDaoImp = new UserServiceImp();
User user = userDaoImp.getUserInfo(name);
//打印查询结果
System.out.println(user);
//响应结果
//采用Gson工具包完成转化格式
resp.getWriter().write(new Gson().toJson(user));
}
}
2.1.3 Bean层：
package cn.servlet.bean;
public class User {
private int id;
private String name;
private double price;
private String description;
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;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", name='" + name + '\'' +
", price=" + price +
", description='" + description + '\'' +
'}';
}
}
2.1.4 Service层：
package cn.servlet.service;
import cn.servlet.bean.User;
import cn.servlet.dao.UserDaoImp;
public class UserServiceImp {
//创建全局UserDao对象
UserDaoImp userDaoImp = new UserDaoImp();
public User getUserInfo(String name){
return userDaoImp.getUserInfo(name);
}
}
2.1.5 Dao层：
package cn.servlet.dao;
import cn.servlet.bean.User;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
public class UserDaoImp {
public User getUserInfo(String name){
//声明user
User user = null;
try {
//加载驱动
Class.forName("com.mysql.cj.jdbc.Driver");
//获取连接对象
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/JavaPractice?useSSL=false","root","qwer3210");
//创建sql命令
String sql = "select * from users where name=?";
//创建sql命令对象
PreparedStatement ps = conn.prepareStatement(sql);
//给占位符赋值
ps.setString(1,name);
//遍历查询
ResultSet rs = ps.executeQuery();
if (rs.next()){
user = new User();
user.setId(rs.getInt("id"));
user.setName(rs.getString("name"));
user.setPrice(rs.getDouble("price"));
user.setDescription(rs.getString("description"));
}
//关闭资源
}catch (Exception e){
e.printStackTrace();
}
return user;
}
}
2.1.6 数据库：
-- 创建users数据表
create table users(
id int not null primary key auto_increment,
name varchar(15) UNIQUE not null,
price double not null,
description varchar(40)
);
3 Ajax的封装
AjaxUtils.js:
/*
method:
请求方式，值为get或者post
url：请求地址
data:没有值需要传入null
有请求数据则传入字符串数据，格式为"a=1&b=2";
deal200:
接受一个带有一个形参的js函数对象，形参接收的实参是ajax引擎对象
deal404：接受一个js函数对象
deal500：接受一个js函数对象
*/
function myAjax(method,url,data,deal200,deal404,deal500,async){
//创建ajax引擎对象
var ajax=getAjax();
//复写onreadystatement函数
ajax.onreadystatechange=function(){
//判断Ajax状态吗
if(ajax.readyState==4){
//判断响应状态吗
if(ajax.status==200){
if(deal200){
deal200(ajax);
}
}else if(ajax.status==404){
if(deal404){
deal404();
}
}else if(ajax.status==500){
if(deal500){
deal500();
}
}
}
}
//发送请求
if("get"==method){
ajax.open("get",url+(data==null?"":"?"+data),async);
ajax.send(null);
}else if("post"==method){
ajax.open("post",url,async);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(data);
}
}
/* --------------------------------------------------------------------------- */
function getAjax(){
var ajax;
if(window.XMLHttpRequest){//火狐
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){//ie
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
return ajax;
}
4 总结
Ajax便于数据的传输，提升用户体验。
