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 %>