ajax定义与开发最简五步骤

qlnx 2021-08-05 原文

ajax是什么?

a (async异步) j (javascript) a (and) x (xml)即异步的javascript和xml

ajax特点：异步不刷新整个页面 (局部刷新)

web1.0 用表单直接提交数据

数据要提交,只能通过表单, 表单提交的时候,页面会刷新

web2.0 用ajax提交数据

ajax提交数据的时候,页面不会刷新

ajax是用js来写的, xml载体,数据交换格式

ajax如何实现

通过XMLHttpRequest类实现

五步骤：

1) 创建对象 XMLHttpRequest
2) 打开连接
3) 注册监听器
4) 发送请求
5) 处理结果

代码实现

index.jsp页面

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6 <meta charset="UTF-8">
 7 <title>Insert title here</title>
 8 </head>
 9 <body>
10     <input id="a" tyep="text" name="a">+
11     <input id="b" tyep="text" name="b">
12     <input onclick="method()" type="button" value="=">
13     <input id="sum" type="text" name="c">
14 
15 
16     <script>
17         function method() {
18             var a = document.getElementById("a").value;
19             var b = document.getElementById("b").value;
20             //1创建对象
21             var req = new XMLHttpRequest();
22             //2打开连接
23             req.open("GET", "sum.jsp?a1="+a+"&b1="+b);
24             //3注册监听器
25             req.onreadystatechange = function() {
26                 //5处理返回数据
27                 document.getElementById("sum").value = req.responseText;
28                 console.log(req.responseText);
29             }
30             //4发送
31             req.send();
32         }
33     </script>
34 </body>
35 </html>

sum.jsp页面

1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2     pageEncoding="UTF-8"%>
3 <%
4 String a = request.getParameter("a1");
5 String b = request.getParameter("b1");
6 
7 out.print(Integer.valueOf(a)+Integer.valueOf(b));
8 %>