AJAX
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习AJAX</title>
</head>
<body>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
// open(请求方式,服务端的访问地址,异步还是同步);
open("get", "loginServlet", true);
// send():使用异步对象发送请求
send();
// XMLHttpRequest属性
// (1)readyState -->请求的状态
//0:表示创建异步对象时
//1:表示初始异步对象的请求参数.执行open()方法
//2:使用send()方法发送请求
//3:使用异步对象从服务器接受了数据
//4:异步对象接收了数据,并在异步对象内部处理完成后
// (2)status -->网络的状态,和Http的状态码对应
// 200:请求成功
// 404:服务器资源没有找到
// 500:服务器内部代码有错误
// (3)responseText -->表示服务器端返回的数据
// 例如
var data = xhr.responseText;
//拿到了数据,接着就可以数据展示了,即操作dom
</script>
</body>
</html>
XMLHttpRequest的使用方法
var xhr = new XMLHttpRequest(); //js实例化XMLHttpRequest对象
xhr.onreadystatechange = function() { //给异步对象绑定事件,事件名--> onreadystatechange
if (xhr.readyState == 4 && xhr.status == 200) {
// 从服务器获取了数据,更新当前页面的dom对象,完成处理请求
var data = xhr.responseText;
//更新dom
document.getElementById("#myselect").innerHTML = data;
}
}
//初始化请求的参数,执行open()函数
xhr.open("GET", "loginServlet", true);
//发送请求
xhr.send();
AJAX实例
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<%-- <title>全局是实现计算bmi</title>--%>
<title>使用AJAX实现计算bmi</title>
</head>
<body>
<%--<div align="center">--%>
<%-- <p>计算bmi</p>--%>
<%-- <form action="bmiServlet" method="get">--%>
<%-- 姓名:<input type="text" name="name"> <br>--%>
<%-- 体重:<input type="text" name="w"> <br>--%>
<%-- 身高:<input type="text" name="h"> <br>--%>
<%-- 操作:<input type="submit" value="计算bmi"> <br>--%>
<%-- </form>--%>
<%--</div>--%>
<%--<div align="center">--%>
<%-- <p>计算bmi</p>--%>
<%-- <form action="bmi2Servlet" method="get">--%>
<%-- 姓名:<input type="text" name="name"> <br>--%>
<%-- 体重:<input type="text" name="w"> <br>--%>
<%-- 身高:<input type="text" name="h"> <br>--%>
<%-- 操作:<input type="submit" value="计算bmi"> <br>--%>
<%-- </form>--%>
<%--</div>--%>
<div align="center">
<p>ajax请求和form无关,有无form都可以</p>
<table>
<tr>
<td>姓名:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>体重:</td>
<td><input type="text" name="w"></td>
</tr>
<tr>
<td>身高:</td>
<td><input type="text" name="h"></td>
</tr>
<tr>
<td>操作:</td>
<td><input type="button" value="ajax计算bmi" onclick="doAjax()"></td>
</tr>
</table>
</div>
<script type="application/javascript">
function doAjax() {
// alert("btn click");
console.log("btn is clicked");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
console.log("onreadystatechange is using readystate=" + xhr.readyState + " status=" + xhr.status);
if (xhr.readyState == 4 && xhr.status == 200) {
//开发人员处理服务器返回的数据,更新dom对象
}
}
xhr.open("get", "", true);
xhr.send();
}
</script>
</body>
</html>
具体操作
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<%-- <title>全局是实现计算bmi</title>--%>
<title>使用AJAX实现计算bmi</title>
</head>
<body>
<%--<div align="center">--%>
<%-- <p>计算bmi</p>--%>
<%-- <form action="bmiServlet" method="get">--%>
<%-- 姓名:<input type="text" name="name"> <br>--%>
<%-- 体重:<input type="text" name="w"> <br>--%>
<%-- 身高:<input type="text" name="h"> <br>--%>
<%-- 操作:<input type="submit" value="计算bmi"> <br>--%>
<%-- </form>--%>
<%--</div>--%>
<%--<div align="center">--%>
<%-- <p>计算bmi</p>--%>
<%-- <form action="bmi2Servlet" method="get">--%>
<%-- 姓名:<input type="text" name="name"> <br>--%>
<%-- 体重:<input type="text" name="w"> <br>--%>
<%-- 身高:<input type="text" name="h"> <br>--%>
<%-- 操作:<input type="submit" value="计算bmi"> <br>--%>
<%-- </form>--%>
<%--</div>--%>
<div align="center">
<p>ajax请求和form无关,有无form都可以</p>
<table>
<tr>
<td>姓名:</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>体重:</td>
<td><input type="text" name="w" id="w"></td>
</tr>
<tr>
<td>身高:</td>
<td><input type="text" name="h" id="h"></td>
</tr>
<tr>
<td>操作:</td>
<td><input type="button" value="ajax计算bmi" onclick="doAjax()"></td>
</tr>
</table>
<br>
<div id="myDiv">等待更新数据</div>
</div>
<script type="application/javascript">
function doAjax() {
// alert("btn click");
console.log("btn is clicked");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
console.log("onreadystatechange is using readystate=" + xhr.readyState + " status=" + xhr.status);
if (xhr.readyState == 4 && xhr.status == 200) {
//开发人员处理服务器返回的数据,更新dom对象
//接收数据
var data = xhr.responseText;
// alert("data="+data);
//更新dom对象
document.getElementById("myDiv").innerHTML = data;
}
}
//初始化数据
var name = document.getElementById("name").value;
var h = document.getElementById("h").value;
var w = document.getElementById("w").value;
var param="bmiAjax?name="+name+"&w="+w+"&h="+h;
// xhr.open("get", "bmiAjax", true);
xhr.open("get", param, true);
xhr.send();
}
</script>
</body>
</html>
注册Servlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="4.0"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
metadata-complete="true">
<servlet>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>com.my.controller.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/bmiAjax</url-pattern>
</servlet-mapping>
</web-app>
Servlet
package com.my.controller; /**
* @project_name
* @author Vis.Yang
* @date 2021-11-20 11:05
*/
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("接收到了ajax请求");
//接受请求参数
String strName = request.getParameter("name");
String strW = request.getParameter("w");
String strH = request.getParameter("h");
//计算bmi
float w = Float.valueOf(strW);
float h = Float.valueOf(strH);
//计算bmi w/(h*h)
float bmi = w / (h * h);
String info = "";
if (bmi < 18.5) {
info = "比较瘦";
} else if (bmi >= 18.5 && bmi < 23.9) {
info = "正常";
} else {
info = "比较胖";
}
info = strName + "先生|女士,您的bmi是[" + bmi + "]," + info;
//使用HttpServletResponse对象输出数据,响应请求 text/html:普通文本格式
response.setContentType("text/html;charset=utf-8");
//输出数据到浏览器中
PrintWriter writer = response.getWriter();
writer.println(info);
writer.flush();//清空缓存
writer.close();
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
<input type="text" name="username" id="username">
// 从服务器获取了数据,更新当前页面的dom对象,完成处理请求
var data = xhr.responseText;
document.getElementById("username").value=data; //操作dom.更新输入框内容
Ajax请求传递Json字符串
//对象转换成json字符串 --> 步骤省略
...
response.setContentType("application/json;charset=utf-8");
//输出数据到浏览器中
PrintWriter writer = response.getWriter();
writer.println(json);
writer.flush();//清空缓存
writer.close();
//接着去script中用Ajax处理后台数据就可以了
script中用Ajax处理后台数据
<script type="application/javascript">
function doAjax() {
// alert("btn click");
console.log("btn is clicked");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
console.log("onreadystatechange is using readystate=" + xhr.readyState + " status=" + xhr.status);
if (xhr.readyState == 4 && xhr.status == 200) {
//开发人员处理服务器返回的数据,更新dom对象
//接收数据
var data = xhr.responseText;
//得到的json串不能直接用,需要转换成json对象才能拿到数据
var obj = JSON.parse(data);//obj.xx就可以拿到数据了
//更新dom对象
//document.getElementById("myDiv").innerHTML = obj.xx;
document.getElementById("username").value=obj.xx; //操作dom.更新输入框内容
}
}
//初始化数据,请求路径
// var name = document.getElementById("name").value;
// url="ajaxservlet?"+"name="+name; 单参数
// url="ajaxservlet?"+"name="+name+"&password="+password; 多参数
xhr.open("get", url, true);
xhr.send();
}
</script>
Jquery AJAX
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> //引入jquery
//道理一样, Jquery 只是简化代码
// $ <==> jQuery $() <==> jQuery对象 进而可以使用jQuery的方法
<input type="text" name="name" id="name">
<div class="div"></div>
// js 获得dom input 元素
var name = document.getElementById("name");//原生
var name = document.getElementByClass("div");//原生
var name = $('#name');//Jquery
var div = $('.div');//Jquery
//属性分类 固有属性:元素本身就有的属性(id,class,name,style) 返回值是boolean的属性(checked,selected,disabled) 自定义属性
//1.操作元素的属性
//获得属性
attr("属性名");
prop("属性名");
prop("disabled",true)//设置boolean型属性 (checked,selected,disabled) 偶尔可用
//移除属性
removeAttr("属性名");
//总结:
//结果属性的类型是boolean(checked,selected,disabled),则使用prop()方法;否则使用attr()方法
//2.操作元素的样式
css() //添加具体的样式 css("具体样式名","样式值"); 设置单个样式 css({具体样式名:样式值,具体样式名:样式值})设置多样式 常用
removeClass(class) //移除样式名称 常用
attr("class") //获取class属性的值
attr("class","样式名") //修改class属性的值,修改样式
addClass("样式名"); //添加样式名称
var cla= $("#div").attr("class"); //其他方法同理
//3.操作元素的内容
html(); //获取元素的内容 包含html标签
html("内容"); //设置元素内容 包含html标签
text(); //获取元素的纯文本内容 不包含html标签
text("内容"); //设置纯文本内容 不包含html标签
val(); //获取元素的值(表单)
//4.元素的操作
//创建元素
$('元素内容');
//example :
$('<h1>this is a h1 tittle</h1>');
//添加元素
//1.前追加
$(选择器) <==> 指定元素
指定元素.prepend("内容"); // 在指定元素内部的最前面添加内容,可以是字符串,html元素或jquery对象
$(内容).prependTo(指定元素); // 把内容加到指定元素内部的最前面,可以是字符串,html元素或jquery对象
//example :
var p = "<p>这是一个p标签</p>";
$(p).prependTo($("body")); //其他同理
//2.后追加
指定元素.append("内容"); // 在指定元素内部的最后面添加内容,可以是字符串,html元素或jquery对象
$(内容).appendTo(指定元素); // 把内容加到指定元素内部的最后面,可以是字符串,html元素或jquery对象
//3.前追加同级元素
before(内容); //在指定元素的前面追加内容
//example :
var sp = "<span>标签</span>";
$("div").before(sp); //其他同理
//4.后追加同级元素
after(内容); //在指定元素的后面追加内容
//删除元素
remove(); //删除所选元素或指定的子元素,包括整个标签和内容一起删除 常用
$("#div").remove();
empty(); //清空所选元素的内容,只清理标签里的内容
$("#div").empty();
//遍历元素(jQuery独有)
$(selector).each(function(index,element){}); //遍历元素
function 遍历时的回调函数
index 遍历元素的序列号,从0开始
element 当前的元素,此时是dom元素
//example :
<span>标签</span>
<span>标签</span>
<span>标签</span>
<span>标签</span>
$("span").each(function(index,element){
consle.log(index);
consle.log(element);
});
// ready加载事件 当页面dom结构加载完毕后才执行
$(document).ready(function(){
})
//简写 常用
$(function(){
});
//jQuery绑定事件 bind()
$(selector).bind(eventType[,eventData],handler(eventObject));
eventType : 是一个字符串类型的事件类型,就是你所需要绑定的事件
[,eventData]: 传递的参数,格式:{名1:值1,名2:值2} //一般省略
handler(eventObject):该事件触发执行的函数
//绑定单个事件
//bind() 绑定
$("元素").bind("事件类型",function(){
});
//直接 绑定 常用
$("元素").事件名(function(){
});
//example :
$("#test").bind("click",function(){
});
<button>点我</button>
$(this) //获得当前事件对象
$("#test").click(function(){
//属性的类型是boolean(checked,selected,disabled),则使用prop()方法;否则使用attr()方法
//禁用 button
$(this).prop("disabled",true); //相当于点击后标签成 <button disabled="disabled">点我</button>
});
//绑定多个事件
1.同时为多个事件绑定同一个函数
$("元素").bind("事件类型1 事件类型2",function(){
});
2.为元素绑定多个事件,并设置对应的函数 //链式
$("元素").bind("事件类型",function(){
}).bind("事件类型",function(){
});
3.为元素绑定多个事件,并设置对应的函数 //常用 多事件我喜欢
$("元素").bind({
"事件类型1":function(){},
"事件类型2":function(){},
"事件类型3":function(){}
});
//直接 绑定 常用
$("元素").事件名1(function(){}).事件名2(function(){});
//重点来咯 简化原生ajax
$.ajax({
type:请求方式GET/POST,
url:请求url,
async:是否异步,默认是true,表示异步,
data:发送到服务器的数据,
dataType:预期服务器返回的数据类型,
contentType:设置请求头,
sucess:请求成功时调用此函数,
error:请求失败时调用此函数
});
$.get
$.post
$.getJSON
本地数据模拟后台数据
[
{
"userId":1,
"userName":"lishi",
"userAge":12
},
{
"userId":2,
"userName":"zhanshan",
"userAge":15
},
{
"userId":3,
"userName":"lihaha",
"userAge":9
},
{
"userId":4,
"userName":"liyoyo",
"userAge":11
}
]
AJAX
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$.ajax({
type:"get",
url:"js/data.json",
data:{ //请求数据的参数 url ? uname:"zhanshan"
// uname:"zhanshan" 如果没有参数,这不需要设置
},
dataType:"json", //预期服务器返回的数据类型
//请求成功时调用的函数
success:function(data){ //data是形参名,代表的是服务器返回的数据
console.log(data); // 相当于 原生代码 的 var data = xhr.responseText;
//此处进行dom操作
//创建ul
var ul=$("<ul></ul>");
//遍历返回的数据
for(var i=0;i<data.length;i++){
//得到数组中每一个元素
var user=data[i];
var li="<li>"+user.userName+"</li>";
ul.append(li);
}
$("body").append(ul);
}
})
</script>
</body>
</html>
console
Array(4)
0: {userId: 1, userName: 'lishi', userAge: 12}
1: {userId: 2, userName: 'zhanshan', userAge: 15}
2: {userId: 3, userName: 'lihaha', userAge: 9}
3: {userId: 4, userName: 'liyoyo', userAge: 11}
length: 4
[[Prototype]]: Array(0)
浏览器
* lishi
* zhanshan
* lihaha
* liyoyo
添加事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" id="btn">点击</button>
<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$("#btn").click(function(){
$.ajax({
type:"get",
url:"js/data.json",
data:{ //请求数据的参数 url ? uname:"zhanshan"
// uname:"zhanshan" 如果没有参数,这不需要设置
},
//请求成功时调用的函数
success:function(data){ //data是形参名,代表的是服务器返回的数据
console.log(data); // 相当于 原生代码 的 var data = xhr.responseText;
//此处进行dom操作
//创建ul
var ul=$("<ul></ul>");
//遍历返回的数据
for(var i=0;i<data.length;i++){
//得到数组中每一个元素
var user=data[i];
var li="<li>"+user.userName+"</li>";
ul.append(li);
}
$("body").append(ul);
}
})
})
</script>
</body>
</html>
$.get( ) 指定请求方式为get,返回数据类型可以任意
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// $.get("请求地址",{参数,没有可以不填},function(data){}) data:后台返回的数据
$.get("js/data.json",{},function(data){
console.log(data);
//操作dom即可
});
</script>
</body>
</html>
$.getJSON( ) 请求方式get ,返回数据类型指定为json(只识别json数据)
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// $.getJSON("请求地址",{参数,没有可以不填},function(data){}) data:后台返回的数据
$.getJSON("js/data.json",{},function(data){
console.log(data);
//操作dom即可
});
</script>
</body>
</html>
$.post() 请求方式post
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="./js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// $.post("请求地址",{参数,没有可以不填},function(data){}) data:后台返回的数据
$.post("xxxx",{},function(data){
console.log(data);
//操作dom即可
});
</script>
</body>
</html>
京公网安备 11010502036488号