一、Ajax是什么？
Ajax，全称Asynchronous JavaScript and XML ，也就是异步加载的javascript 和 XML
.Ajax是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，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"%>
Title
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"%>
Title
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"%>
Title
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的基本使用与案例的文章就介绍到这了,更多相关JavaWeb Ajax基本使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！