什么是 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 解决方案。