AJAX 请求

一个风轻云淡

发布于 2022-11-15 09:18:38

1.7K00

代码可运行

文章被收录于专栏：java学习javajava学习java

运行总次数：0

代码可运行

什么是 AJAX 请求

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。

Ajax 请求的局部更新，浏览器地址栏不会发生变化局部更新不会舍弃原来页面的内容

javaScript 原生 Ajax 请求

原生的 Ajax 请求，

1、我们首先要创建 XMLHttpRequest 对象

2、调用 open 方法设置请求参数

3、调用 send 方法发送请求

4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。

1）创建一个 html 页面，发起请求。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

function ajaxRequest() {

// 1、我们首先要创建 XMLHttpRequest

var xhr = new XMLHttpRequest();

// 2、调用 open 方法设置请求参数

xhr.open("GET","ajaxServlet?action=javaScriptAjax&a="+new Date(),true);

// 4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。

xhr.onreadystatechange = function() {

// 判断请求完成，并且成功

if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div01").innerHTML = xhr.responseText;
}
}

// 3、调用 send 方法发送请求

xhr.send();
}

</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>

2）创建一个 AjaxServlet 程序接收请求

public class AjaxServlet extends BaseServlet {

private static final long serialVersionUID = 1L;

protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse

response)

throws ServletException, IOException {
System.out.println("ajax 请求过来了 a--" + request.getParameter("a"));
Random random = new Random(System.currentTimeMillis());

// 使用随机数，可以让客户端看到变化

response.getWriter().write(

new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}
}

3）在 web.xml 文件中的配置：

<servlet>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>com.atguigu.servlet.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/ajaxServlet</url-pattern>
</servlet-mapping>

通过上面的代码我们发现。编写原生的 JavaScript 我们自己要写很多的代码。而且还要考虑浏览器兼容问题。所以使用起来非常的不方便。那我们工作之后。怎么处理 Ajax 请求呢。我们一般会使用 JavaScript 的框架来解决这个问题，比如说我们前面学到的 Jquery 框架。它就有很好的 Ajax 解决方案。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-10-24，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript