在javaweb开发过程中,我们常常会采用网页的局部页面刷新,但是我们又不想要跳转页面或者刷新页面,那么就要用到ajax异步刷新啦。先介绍一下什么是ajax吧!
AJAX 全名叫做Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。ajax不是新的编程语言,而是一种使用现有标准的新方法,ajax最大的优点是在于不重新加载整个页面的情况下,可以与服务器交换数据并更新网页的部分网页内容,ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
使用ajax对后端的数据库进行异步读取:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册页面</title>
<script type="text/javascript">
var list_number;
function checkName() {
var spam = document.getElementById("nametip");
var obj=new Date();
spam.innerText="触发"+"当前时间:"+obj.getDay()+"日"+obj.getHours()+" 时 "+obj.getMinutes()+" 分 "+obj.getSeconds()+" 秒";
// 进行ajax 进行异步请求后台数据
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
//ie浏览器
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//发送请求
var uname = document.getElementById("name");
xmlhttp.open("GET","UserServlet?name="+uname.value,true);
xmlhttp.send();
//服务器响应发回的数据
xmlhttp.onreadystatechange=function()
{
//readyState==4 代表请求已经完成,且响应结束
//status==200 代表状态正常
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
var text_edit = document.getElementById("table_date");
text_edit.innerHTML = xmlhttp.responseText;
}
}
}
// 因为如果一个页面有多个ajax的时候,那么需要添加回调函数,用来辨别是哪一个ajx对象
// 回调函数就是把一个函数作为参数传给另外一个参数
</script>
</head>
<body>
<form action="UserServlet">
<p>
账号:<input type="text" name="name" id="name" onblur="checkName();" /><span
id="nametip"></span>
</p>
<p>
密码:<input type="password" name="name" id="password" /><span id="nametip"></span>
</p>
<p>
<input type="submit" value="注册" />
</p>
<span id="edit1">这个是ajax发回的数据</span>
</form>
<select class="form-control" name="stuSum" id="stuSum">
<option selected="selected">--请选择--</option>
</select>
<div id="table_date">
</div>
</body>
</html>
前端jsp页面通过鼠标焦点丢失触发异步请求函数,把需要请求的数据库的名称传到服务器,服务器把查询到的表的数据通过构建成html的表格形式的字符串返回给前端jsp页面,然后再赋值给一个div容器,显示即可。
我们来理一理ajax的工作过程:
package serlvet;
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 java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
@WebServlet("/UserServlet")
public class UserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String table_name=request.getParameter("name");
System.out.println("发过来了一个请求");
table_name = new String(table_name.getBytes("iso8859-1"), "utf-8");
PrintWriter out = response.getWriter();
//获取数据库的值
if(table_name.equals("")||table_name.equals("[email protected]")){
return;
}
JDBConnection jdbConnection=new JDBConnection();
String sql_data = "select * from "+table_name;
ResultSet resultSet =jdbConnection.executeQuery(sql_data);
System.out.println(sql_data);
out.write("");
try {
while(resultSet.next()){
int len =resultSet.getMetaData().getColumnCount(); //列数
out.write("");
for(int i=0;i<len;i++){
out.write(""+resultSet.getString(i+1)+" ");
}
out.write(" ");
}
}catch (Exception e)
{
e.printStackTrace();
}finally {
out.write("
");
out.flush();
out.close();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
我把student 和 jdbc的也发出来吧
package serlvet;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
public class JDBConnection {
private final String dbDrive="com.mysql.cj.jdbc.Driver";
private final String url="jdbc:mysql://localhost:3306/studentdata?characterEncoding=utf8&useSSL=false&serverTimezone=UTC&rewriteBatchedStatements=true";
private final String user = "user"; //数据库账户名
private final String Passwd = "123456"; //数据库密码
private Connection con=null;
public JDBConnection(){
try {
Class.forName(dbDrive).newInstance();
}catch (Exception ex){
ex.printStackTrace();
System.out.println("数据库加载失败!");
}
System.out.println("数据库加载成功!");
}
public boolean creatConnection(){
try {
con=DriverManager.getConnection(url,user,Passwd);
con.setAutoCommit(true);
}catch (SQLException e){
System.out.println(e.toString());
}
return true;
}
public boolean executeUpdate(String sql){ //对数据库进行增加,修改,删除
if(con==null){
creatConnection();
}
try {
Statement stmt=con.createStatement();
int iCount=stmt.executeUpdate(sql);
System.out.println("操作成功,所影响的记录数为"+String.valueOf(iCount));
return true;
}catch (SQLException e){
return false;
}
}
public ResultSet executeQuery(String sql) //对数据库进行查询操作
{
ResultSet rs;
try {
if(con==null){
creatConnection();
}
Statement stmt=con.createStatement();
rs=stmt.executeQuery(sql);
}catch (Exception e)
{
return null;
}
return rs;
}
public void closeConnecstion()
{
if(con==null){
try {
con.close();
}catch (SQLException e){
e.printStackTrace();
}
}
}
public List<student> getStudent(String sql){
List<student> list=new ArrayList<>();
ResultSet rs=executeQuery(sql);
try {
while (rs.next()) {
student stu = new student();
stu.setAddress(rs.getString("address"));
stu.setBirthday(rs.getString("birthday"));
stu.setCollege_name(rs.getString("college_name"));
stu.setInputSchool_time(rs.getString("inputSchool_time"));
stu.setMajor_name(rs.getString("major_name"));
stu.setName(rs.getString("name"));
stu.setNumber(rs.getString("student_number"));
stu.setSex(rs.getString("sex"));
stu.setStudent_year(rs.getString("student_year"));
stu.setOutputSchool_time(rs.getString("outputSchool_time"));
stu.setTelphone_number(rs.getString("telphone_number"));
list.add(stu);
}
}
catch (SQLException e){
}
finally {
closeConnecstion();
}
return list;
}
}
今天的ajax就学习到这里结束啦!
当你的才华还撑不起你的野心的时候,
你就应该静下心来学习;
当你的能力还驾驭不了你的目标时,
就应该沉下心来,历练.