JavaWeb基础学习笔记18——AJAX
目录
1、AJAX概念：
AJAX（ASynchronous JavaScript And XML，异步的JavaScript和XML），是一种用于创建快速动态网页的技术，在无需重新加载整个网页的情况下，能够更新部分网页。通过在后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新。
Ajax可以提升用户的体验。
异步和同步：客户端和服务器端相互通信的基础上的同步和异步。
- 同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其它工作。
- 异步：客户端不需要等待服务器端的响应，在服务器处理请求的过程中客户端可以去进行其它的操作。
2、AJAX的实现方式
2.1、原生的JS实现方式（了解）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//定义方法
function fun() {
//发送异步请求
//1、创建核心对象
var xmlhttp;
if (window.XMLHttpRequest) {
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
//code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//建立连接
/**
* 参数：
* 1、请求方式：GET、POST
* * get方式，请求参数在URL后拼接，send()方法为空参
* * post方式，请求参数在send()方法中定义
* 2、请求的URL；
* 3、同步或异步请求：异步为true，同步为false
*/
xmlhttp.open("GET", "ajaxServlet?username=tom", true);
//发送请求
xmlhttp.send();
//接收并处理来自服务器的响应结果
//获取方式：xmlhttp.responseText
//什么时候获取：当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时，会触发onreadystatechange事件
xmlhttp.onreadystatechange = function () {
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
//获取服务器的响应结果
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<div id="myDiv"></div>
</body>
</html>2.2、JQuery实现方式
JQuery的实现方式：
1、$.ajax()
语法：$.ajax(url,[settings]) / $.ajax({键值对})
2、$.get()：发送get请求
语法：$.get(url,[data],[callback],[type])
参数：
url：请求路径
data：请求参数
callback：回调函数
type：响应结果的类型
3、$.post()：发送post请求<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-JQuery实现方式1_ajax</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun() {
//使用$.ajax()发送异步请求
$.ajax({
url: "ajaxServlet", //请求路径
type: "POST", //请求方式
// data:"username=jack&age=23", //请求参数
data: {"username": "jack", "age": 23}, //请求参数
success:function (data) {
alert(data);
}, //响应成功后的回调函数
error:function () {
alert("出错了..")
}, //表示如果请求响应出现错误，会执行的回调函数
dataType:"text" //设置接收到响应数据的格式
});
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<div id="myDiv"></div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-JQuery实现方式2_get_post</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun() {
//get方法
// $.get("ajaxServlet", {username: "rose"}, function (data) {
// alert(data);
// }, "text");
//post方法
$.post("ajaxServlet", {username: "rose"}, function (data) {
alert(data);
}, "text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<div id="myDiv"></div>
</body>
</html>
