JavaWeb之Ajax的基本使用

目录

一、Ajax是什么？

二、为什么使用Ajax？

三、Ajax基本使用

 四、案例

无刷新登录（ajax、get、post）

login.jsp

 LoginServlet.java

查询名字是否存在

register.java

 FindServlet.java

使用搜索框时弹出的提示

index.java

---

一、Ajax是什么？

1. Ajax，全称Asynchronous JavaScript and XML ，也就是异步加载的javascript 和 XML
2. .Ajax是一种用于创建快速动态网页的技术。
3. 通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

JavaScript：更新局部的网页

XML：一般用于请求数据和响应数据的封装

XMLHttpRequest对象：发送请求到服务器并获得返回结果

CSS：美化页面样式  

异步：发送请求后不等返回结果，由回调函数处理结果

---

二、为什么使用Ajax？

无刷新：不刷新整个页面，只刷新局部

无刷新的好处：只更新部分页面，有效利用带宽，提高用户体验

---

三、Ajax基本使用

通过 HTTP 请求加载远程数据。

1、$.ajax()

常用参数	说明
url	一个用来包含发送请求的URL字符串(请求地址)
type	请求方式 (“POST” 或 “GET“[默认])
data	发送到服务器的数据(参数)
dataType	预期服务器返回的数据类型(xml、json、text)
dataType	请求成功的回调函数
error	请求失败的回调函数

通过远程 HTTP POST /GET请求载入信息。

这是一个简单的 POST /GET请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

2、$.post()

常用参数	说    明
url	一个用来包含发送请求的URL字符串(请求地址)
data	发送到服务器的数据(参数)  key/value
success(data)	请求成功的回调函数
type	返回内容格式(xml、json、text等)

 3.$.get()

常用参数	说    明
url	一个用来包含发送请求的URL字符串(请求地址)
data	发送到服务器的数据(参数)  key/value
success(data)	请求成功的回调函数
type	返回内容格式(xml、json、text等)

三种方法代码如下：

 $.get("url",data,fun(){},"text")
        $.post("url",data,fun(){},"text")
        $.ajax({
            url:"",
            type:"get|post",
            data:{},
            dataType:"",
            success(){}
        })

---

 四、案例

• 无刷新登录（ajax、get、post）

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


    
    
    



    

    

    登录

 LoginServlet.java

ackage com.zking.servlet;

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;

@WebServlet("/login.do")
public class LoginServlet extends HttpServlet {

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

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取表单数据
        String account = req.getParameter("account");
        String password = req.getParameter("password");
        //调用biz去数据库做验证
        PrintWriter out = resp.getWriter();
        if("root".equals(account)&&"root123".equals(password)){
            out.println("yes");
        }else{
            out.println("no");
        }
    }

}

• 查询名字是否存在

效果图如下：

如果输入的内容在集合中有的话则提示用户名已经存在 并且按钮禁用

若没有则显示标签  

register.java

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


    
    
    



去注册

 FindServlet.java

package com.zking.servlet;

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.util.ArrayList;
import java.util.List;

/**
 * 验证用户名是否存在
 **/
@SuppressWarnings("all")
@WebServlet("/find.do")
public class FindServlet extends HttpServlet {

    //数据库中存在的名字
    List list = new ArrayList();

    {
        list.add("小明");
        list.add("小黄");
        list.add("小黑");
        list.add("小紫");
        list.add("小绿");
    }

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

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //去数据库查询
        String name = req.getParameter("name");
        boolean f=false;
        for (String n : list) {
            if(n.equals(name)){
                f=true;
                break;
            }
        }
        //需要把结果告诉前台
        PrintWriter out = resp.getWriter();
        out.println(f);
    }

}

• 使用搜索框时弹出的提示

效果图如下：

index.java

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



    
    

SearchServlet.java 

package com.zking.servlet;

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 com.fasterxml.jackson.databind.ObjectMapper;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

/**
 * 查询出对应关键字的商品名称
 **/


@WebServlet("/search.do")
public class SearchServlet extends HttpServlet {

    //数据库中存在的商品名字
    List list = new ArrayList();

    {
        list.add("杨枝甘露");
        list.add("珍珠奶茶");
        list.add("焦糖奶茶");
        list.add("雀巢咖啡");
        list.add("蜜桃四季春");
    }

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

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //去数据库查询
    	String keyWord = req.getParameter("keyWord");
        //新建一个集合
        List ns=new ArrayList();
        for (String n : list) {
            if(n.contains(keyWord)){
                ns.add(n);
            }
        }
        //设置响应的编号
        resp.setCharacterEncoding("utf-8");
        //需要把结果告诉前台
        PrintWriter out = resp.getWriter();
        //需要将集合变成json
        //1.需要获取转换对象
        ObjectMapper mapper=new ObjectMapper();
        //2.调用方法
        String str = mapper.writeValueAsString(ns);
   
        out.println(str);
    }

}

注意： 遍历出来的集合要变成jsno字符串

---

今天的分享就要这结束啦！！✌

以上就是关于JavaWeb之Ajax的基本使用！！！

期待下次再见！！