Ajax简介
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面
Ajax并不是一种新的技术：
- 使用CSS和XHTML来表示
- 使用DOM模型来交互和动态显示
- 使用XMLHttpRequest来和服务器进行异步通信
- 使用javascript来绑定和调用
XMLHttpRequest
XMLHttpRequest是 AJAX 的基础，用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
Ajax使用
创建XMLHttpRequest对象
- Firefox, Opera 8.0+, Safari：new XMLHttpRequest();
- Internet Explorer：new ActiveXObject("Msxml2.XMLHTTP");
- 默认版本的XMLHTTP：new ActiveXObject("Microsoft.XMLHTTP");
发送请求
发送请求
- open(method,url,async): 规定请求的类型、URL 以及是否异步处理请求
- method:请求的类型；GET 或 POST
- url:文件在服务器上的位置
- async:true（异步）或 false（同步）
- send(string): 将请求发送到服务器
- string：仅用于 POST 请求(因为GET请求参数放在url里)
接收响应并处理
注册监听(onreadystatechange事件)
请求被发送到服务器时，需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息
属性 描述 onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
status 200: "OK"
404: 未找到页面
获得来自服务器的响应，需要 XMLHttpRequest 对象的 responseText 或 responseXML 属性
responseText 获得字符串形式的响应数据 responseXML 获得 XML 形式的响应数据。
get方式请求
web.xml
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 3 xmlns="http://java.sun.com/xml/ns/javaee" 4 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 5 id="WebApp_ID" version="3.0"> 6 <display-name>AjaxDemo</display-name> 7 <welcome-file-list> 8 <welcome-file>index.jsp</welcome-file> 9 </welcome-file-list> 10 11 <servlet> 12 <servlet-name>testServlet</servlet-name> 13 <servlet-class>com.qf.servlet.TestServlet</servlet-class> 14 </servlet> 15 <servlet-mapping> 16 <servlet-name>testServlet</servlet-name> 17 <url-pattern>/testServlet</url-pattern> 18 </servlet-mapping> 19 </web-app>
TestServlet.java
1 public class TestServlet extends HttpServlet { 2 3 @Override 4 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 5 6 resp.setCharacterEncoding("utf-8"); 7 // resp.setHeader("Content-Type", "text/html; charset=UTF-8"); 8 System.out.println("开始处理get请求！！！"); 9 resp.getWriter().write("get请求成功！！！"); 10 } 11 }
index.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 10 <script type="text/javascript"> 11 /* 创建XMLHttpRequest对象 */ 12 function createXmlHttpRequest() { 13 var xmlHttp; 14 try { // Firefox, Opera 8.0+, Safari 15 xmlHttp = new XMLHttpRequest(); 16 } catch (e) { 17 try {// Internet Explorer 18 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 19 } catch (e) { 20 try { 21 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 22 } catch (e) { 23 24 } 25 } 26 } 27 28 return xmlHttp; 29 } 30 31 function get() { 32 //获取XMLHttpRequest对象 33 var req = createXmlHttpRequest(); 34 35 /** 36 发送请求 37 open(method,url,async): 规定请求的类型、URL 以及是否异步处理请求 38 1.method:请求的类型；GET 或 POST 39 2.url:文件在服务器上的位置 40 3.async:true（异步）或 false（同步） 41 send(string): 将请求发送到服务器 42 string：仅用于 POST 请求(因为GET请求参数放在url里) 43 */ 44 req.open("GET", "testServlet?name=qf", true); 45 46 /* 47 在 onreadystatechange 事件中，规定当服务器响应已做好被处理的准备时所执行的任务 48 */ 49 req.onreadystatechange = function() { 50 if (req.readyState == 4 && req.status == 200) { 51 alert(req.responseText); 52 } 53 54 } 55 //发送请求 56 req.send(); 57 } 58 </script> 59 60 <body> 61 <h3> 62 <a href="#" onclick="get()">Ajax发送get请求</a> 63 </h3> 64 </body> 65 </html>
浏览器测试效果
post方式请求
TestServlet.java
1 public class TestServlet extends HttpServlet { 2 3 @Override 4 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 5 6 resp.setCharacterEncoding("utf-8"); 7 String name = req.getParameter("name"); 8 System.out.println("开始处理get请求！！！"+name); 9 resp.getWriter().write("get请求成功！！！"); 10 } 11 12 @Override 13 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 14 resp.setCharacterEncoding("utf-8"); 15 String name = req.getParameter("name"); 16 System.out.println("开始处理post请求！！！"+name); 17 resp.getWriter().write("post请求成功！！！"); 18 } 19 }
index.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 10 <script type="text/javascript"> 11 /* 创建XMLHttpRequest对象 */ 12 function createXmlHttpRequest() { 13 var xmlHttp; 14 try { // Firefox, Opera 8.0+, Safari 15 xmlHttp = new XMLHttpRequest(); 16 } catch (e) { 17 try {// Internet Explorer 18 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 19 } catch (e) { 20 try { 21 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 22 } catch (e) { 23 24 } 25 } 26 } 27 28 return xmlHttp; 29 } 30 31 function post() { 32 //获取XMLHttpRequest对象 33 var req = createXmlHttpRequest(); 34 35 /** 36 发送请求 37 open(method,url,async): 规定请求的类型、URL 以及是否异步处理请求 38 1.method:请求的类型；GET 或 POST 39 2.url:文件在服务器上的位置 40 3.async:true（异步）或 false（同步） 41 send(string): 将请求发送到服务器 42 string：仅用于 POST 请求(因为GET请求参数放在url里) 43 */ 44 req.open("POST", "testServlet", true); 45 46 /* 47 请求被发送到服务器时，需要执行一些基于响应的任务 48 */ 49 50 req.onreadystatechange = function() { 51 if (req.readyState == 4 && req.status == 200) { 52 alert(req.responseText); 53 } 54 55 } 56 57 //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据 58 req.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 59 60 //发送请求 61 req.send("name=qf"); 62 } 63 </script> 64 65 <body> 66 <h3> 67 <a href="#" onclick="post()">Ajax发送post请求</a> 68 </h3> 69 </body> 70 </html>
注：
如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
浏览器测试效果
