AJAX与jQuery

1.AJAX

1.1什么是AJAX（异步刷新技术）？

无刷新技术：刷新页面不跳转，在当前页面刷新，是局部的刷新。例如：地图的缩放和移动都是在当前页面完成的，没有刷新整个页面。

无刷新的好处：

• 只更新部分页面，有效利用带宽；
• 提供连续的用户体验；
• 提供类似C/S的交互效果，操作更方便。

传统web和AJAX的区别：

 AJAX的工作流程：

 2.使用jQuery实现AJAX

传统的AJAX步骤繁琐，方法，属性，常用值较多不好记忆，处理复杂结构的响应数据比较繁琐。jQuery将Ajax相关操作进行了封装。

语法一：

 

 

 语法二：

 语法三：

2.JSON 

• 是一种轻量级的数据交换格式
• 采用独立于语言的文本格式
• 通常用于客户端和服务器端之间传递数据

JSON有对象和数组两种类型之分，对象是用大括号，数组是用小括号括起来。可以互相嵌套，功能强大。

 实例（使用AJAX和JSON获取数据库数据）

实现商品列表展示：

domain层：

package domain;

import java.io.Serializable;
import java.util.Set;

public class Product implements Serializable {
    private int id;
    private String name;
    private String description;
    private double price;
    private int stock;
    private int categoryLevel1Id;
    private int categoryLevel2Id;
    private int categoryLevel3Id;
    private String fileName;
    private int idDelete;
    private int brand_id;
    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 String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public int getStock() {
        return stock;
    }

    public void setStock(int stock) {
        this.stock = stock;
    }

    public int getCategoryLevel1Id() {
        return categoryLevel1Id;
    }

    public void setCategoryLevel1Id(int categoryLevel1Id) {
        this.categoryLevel1Id = categoryLevel1Id;
    }

    public int getCategoryLevel2Id() {
        return categoryLevel2Id;
    }

    public void setCategoryLevel2Id(int categoryLevel2Id) {
        this.categoryLevel2Id = categoryLevel2Id;
    }

    public int getCategoryLevel3Id() {
        return categoryLevel3Id;
    }

    public void setCategoryLevel3Id(int categoryLevel3Id) {
        this.categoryLevel3Id = categoryLevel3Id;
    }

    public String getFileName() {
        return fileName;
    }

    public void setFileName(String fileName) {
        this.fileName = fileName;
    }

    public int getIdDelete() {
        return idDelete;
    }

    public void setIdDelete(int idDelete) {
        this.idDelete = idDelete;
    }

    public int getBrand_id() {
        return brand_id;
    }

    public void setBrand_id(int brand_id) {
        this.brand_id = brand_id;
    }
}

dao层：

package dao.impl;

import dao.ProductDao;
import domain.PageInfo;
import domain.Product;
import utils.JDBCUtils;

import javax.servlet.annotation.WebServlet;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class ProductDaoImpl extends JDBCUtils implements ProductDao {
    @Override
    public PageInfo<Product> findAll(PageInfo pageInfo) throws SQLException {
        String sql = "SELECT * FROM easybuy_product limit ?,?";
        Connection connection = this.getConnection();
        PreparedStatement ps = connection.prepareStatement(sql);
        ps.setInt(1,(pageInfo.getCurrentPageNo()-1)*pageInfo.getPerPageNo());
        ps.setInt(2,pageInfo.getPerPageNo());
        ResultSet rs = ps.executeQuery();

        List<Product> list = new ArrayList<>();
        while (rs.next()){
            Product product = new Product();
            product.setId(rs.getInt("productId"));
            product.setName(rs.getString("name"));
            product.setDescription(rs.getString("description"));
            product.setPrice(rs.getDouble("price"));
            product.setFileName(rs.getString("fileName"));
            list.add(product);
        }
        pageInfo.setList(list);
        String SQL = "SELECT COUNT(*) FROM easybuy_product";
        ps = connection.prepareStatement(SQL);
        rs = ps.executeQuery();
        int i = 0;
        if (rs.next()){
            i = rs.getInt(1);
        }
        pageInfo.setTotalRecords(i);
        this.release(rs,ps,connection);
        return pageInfo;
    }
}