JavaWeb Ajax 详解，linux 操作系统基础教程安俊秀课后答案
作用是：和后台服务器进行交互，应用 Http 协议和数据格式进行数据通信。
创建：
XMLHttpRequest xhr = new XMLHttpRequest();
方法：
open(“GET/POST”,“服务器 URL”,是否异步);
是否异步为 true 代表是异步，不需要等待服务器响应，执行后面的代码，不会阻塞。
如果是 false 代表同步，产生阻塞，需要等服务器响应才能执行后面操作。
推荐使用异步方式。
send(字符串)
主要用于 POST 请求给服务器发送数据，如：“username=zhangsan&password=123”
事件：
onreadystatechange Ajax 对象状态变化的事件回调
状态：
0 初始化状态
1 连接状态，调用了 open 方法
2 发送状态，调用了 send 方法
3 接受状态，开始接受服务器数据
4 接受完成状态，完全接受服务器数据
属性：
status 响应码，200、403、404、500…
readyState 状态码，从 0 到 4
responseText 服务器的响应数据
原生 AJAX 的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试 Ajax 的使用</title>
<style type="text/css">
#test{
width:100px;
height:100px;
background:yellow;
}
</style>
</head>
<body>
<div id="test" onclick="testAjax()">连接服务器</div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
function testAjax(){
//创建 XHR 对象
var xhr = new XMLHttpRequest();
//监听 onreadystatechange 事件
xhr.onreadystatechange = function(){
console.log("readyState:"+xhr.readyState);
//如果状态为全部接受并且响应码为 200
if(xhr.readyState == 4 && xhr.status == 200){
//更新页面内容
$("#test").text("服务器说："+xhr.responseText);
}
};
//调用 open 方法，发送请求
xhr.open("POST","ajax.do",true);
//设置请求头，数据的类型
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
//调用 send 方法，发送参数
xhr.send("username=张三");
}
</script>
</body>
</html>
Servlet 代码
/**
测试 Ajax
@author xray
*/
@WebServlet("/ajax.do")
public class AjaxServlet 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 {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
//获得 Ajax 发送的参数
String name = req.getParameter("name");
//给浏览器发送数据
resp.getWriter().print(name+"你好啊，我是服务器！！！");
}
}
=========================================================================
JQuery 提供了几种 ajax 方法：
$.ajax
参数：
type 请求方法类型，GET、POST
url 服务器地址，必须
data 请求参数
async 是否异步
success 成功接收数据的回调函数
error 错误情况的回调函数
$.ajax({type:"post",url:"ajax.do",data:{username:"张三"},
success:function(text){
更新 text 数据到页面
}
});
$.post
$.post("URL",{参数名:值},
function(text){
更新页面
}
);
$.get
$.get("URL?参数",
function(text){
...
});
使用 JQuery 的 ajax 方法
$(function(){
//设置点击事件
$("#test").click(function(){
//使用 ajax 方法连接服务器
/* $.ajax({type:"POST",data:{username:"李四"},url:"ajax.do",
success:function(text){
//更新页面内容
$("#test").text("服务器说："+text);
}
}); */
//使用 post 方法
/* $.post("ajax.do",{username:"王五"},
function(text){
//更新页面内容
$("#test").text("服务器说："+text);
}
); */
//使用 get 方法
$.get("ajax.do?username=赵六",
function(text){
//更新页面内容
$("#test").text("服务器说："+text);
}
);
});
});
还未添加个人签名 2021.11.08 加入
还未添加个人简介
评论