javaweb+jQuery ajax实例

什么是ajax

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

jQuery对ajax方法进行了很好的封装,使用起来非常便利。

1.引入jquery库文件

可以引用本地的jquery.js或者jquery.min.js文件,语法如下:

<script src='jquery.min.js'></script>

或者通过CDN(内容分发网络)引用,此时需要联网

//Runoob CDN
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
//Baidu CDN
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
//Google CDN
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>

2.在页面上使用jQuery封装好的ajax方法

$.ajax({
    url:'', //要请求的url地址
    type:'POST', //请求方法 GET or POST
    async:true, //是否使用异步请求的方式
    timeout:5000, //请求超时的时间,以毫秒计
    data:{
        name : 'rammus'
    }, //参数,用POST方法时使用,如果用GET方法则直接在url后拼接参数即可
    dataType:'json', //预期的服务器返回参数类型
    beforeSend:function(){
        ...
    },//再发送请求前调用的方法
    success:function(data) {
        console.log(data);
    }, //请求成功时回调方法,data为服务器返回的数据
    error:function(){
        ...
    }, //请求发生错误时调用方法
    complete:function(){
        ...
    } //回调方法 无论success或者error都会执行
});

3.实例(从数据库中获取数据并显示在前台)

IDEA创建maven项目

Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具。
Maven 除了以程序构建能力为特色之外,还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性,所以常常用两三行 Maven 构建脚本就可以构建简单的项目。由于 Maven 的面向项目的方法,许多 Apache Jakarta 项目发文时使用 Maven,而且公司项目采用 Maven 的比例在持续增长。

配置pom.xml引入需要的连接mysql需要的jar包

<dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.38</version>
</dependency>
<!-- 使用log4j进行日志记录 -->
<!-- https://mvnrepository.com/artifact/log4j/log4j -->
<dependency>
    <groupId>log4j</groupId>
    <artifactId>log4j</artifactId>
    <version>1.2.17</version>
</dependency>

创建一个servlet并在web.xml中进行配置,其url将作为前台ajax请求的地址

数据库连接工具类

package cn.rammus.util;

import org.apache.log4j.Logger;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

/**
* Created by Rammus on 2017/11/1.
*/
public class ConnectionUtil {

private static final Logger logger = Logger.getLogger(ConnectionUtil.class);
private static final String URL = "jdbc:mysql://localhost:3306/j2ee";
private static final String USERNAME = "root";
private static final String PASSWORD = "";

public static Connection getConnection() throws SQLException {
    try {
        Class.forName("com.mysql.jdbc.Driver");
    }catch (Exception e) {
        logger.error("数据库驱动加载失败!");
        e.printStackTrace();
    }
    Connection connection = null;
    try {
        connection = DriverManager.getConnection(URL, USERNAME, PASSWORD);
    } catch (SQLException e) {
        e.printStackTrace();
    }
    return connection;
}

}

servlet代码
package cn.rammus.servlet;

import cn.rammus.util.ConnectionUtil;

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;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

/**
 * Created by Rammus on 2017/11/1.
 */
public class MyServlet extends HttpServlet{

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        try {
            java.sql.Connection connection = ConnectionUtil.getConnection();
            Statement statement = connection.createStatement();
            String sql = "SELECT * FROM course";
            ResultSet rs = statement.executeQuery(sql);
            StringBuilder s = new StringBuilder("拥有的课程有:");
            while(rs.next()) {
                s.append(rs.getString(2));
                if(!rs.isLast()) {
                    s.append("、");
                }
            }
            //解决返回的字符串编码问题
            resp.setCharacterEncoding("utf-8");
            PrintWriter out = resp.getWriter();
            //将数据流入输出流
            out.print(s);
        } catch (SQLException e) {
            e.printStackTrace();
        }

    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

}
web.xml的配置
<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>
  <servlet>
    <servlet-name>myServlet</servlet-name>
    <servlet-class>cn.rammus.servlet.MyServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>myServlet</servlet-name>
    <url-pattern>/getCourse.do</url-pattern>
  </servlet-mapping>
</web-app>
前台测试页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="jquery.min.js"></script>
    <script>
        function getCourse() {
            $.ajax({
                url : 'getCourse.do',
                type: 'GET',
                dataType : 'text',
                async : true,
                timeout : 50000,
                success : function(data) {
                    document.getElementById('course').innerHTML = data;
                },
                error : function() {
                    var errorMsg = '无法获取课程';
                    document.getElementById('course').innerHTML = errorMsg;
                }
            });
        }
    </script>
</head>
<body>
<input type="button" id="me" value="查看课程" onclick="getCourse()"/>
<div id="course"></div>
</body>
</html>
效果

效果演示
注意此时页面是没有刷新的,因此我们便完成了对服务器的异步请求。

后记

ajax是一种非常便利的客户端与服务端通信的方式,在必要的时候使用ajax会大大提高用户的体验。
ajax中文名为阿贾克斯,但是笔者推荐它的英文读法:[ˈeɪˌdʒæks]

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页