AJAX简介

  1. AJAX意思是异步的JavaScript和XML，全称Asynchronous Javascript And XML
  2. 能使用js来访问服务器，而且是一个异步访问
  3. 服务器响应的不是整个页面，而是数据
  4. 异步交互和同步交互
    同步交互：
    1）发出一个请求，需要等待服务器处理请求（响应）结束，才可以发送第二个请求
    2）刷新的是整个页面
    异步交互：
    1）发出一个请求，不用等待服务器的响应结束，可以继续发送第二个请求
    2）使用js来接收服务器的响应，然后刷新局部的页面
  5. 应用场景：百度搜索框、用户名检测是否注册等等
  6. 优缺点：
    1）优点：减轻服务器的负担、增强用户体验
    2）缺点：不能应用在所有场景、对服务器的访问次数太多

AJAX的四步操作

  1. 得到异步对象
  2. 与服务器创建连接
  3. 向服务器发送请求
  4. 给异步对象的onreadystatechange方法注册***（5种状态，需要4状态，即服务器响应结束）
 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <script type="text/javascript"> function createXMLHttpRequest(){ try{ //大多数浏览器 return new XMLHttpRequest(); }catch(e){ try{ //IE6 return ActvieXObject("Msxml2.XMLHTTP"); }catch(e){ try{ //IE5.5及以下 return ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ alert("您的浏览器版本过低或不兼容，请升级或更换浏览器！！！"); throw e; } } } } window.onload = function(){ var btn = document.getElementById("btn"); //点击按钮触发的事件 btn.onclick = function(){ /* 异步的四步操作 */ //1.得到异步对象 var xmlHttp = createXMLHttpRequest(); //2.与服务器连接:请求方式、请求URL、是否采用异步请求 xmlHttp.open("GET", "<c:url value='/AServlet'/>", true); //3.发送请求:参数为请求体，GET无请求体所以为null xmlHttp.send(null); //4.给异步对象的onreadystatechange事件注册*** //当异步对象的状态发生变化时执行该方法 xmlHttp.onreadystatechange = function(){ //200为服务器响应成功；4为服务器响应结束 if (xmlHttp.status == 200 && xmlHttp.readyState == 4) { //获取h1 var h1 = document.getElementById("h1"); //获取响应的内容 var text = xmlHttp.responseText; h1.innerHTML = text; } } }; }; </script> <body> <button id="btn">提交</button> <h1 id="h1"></h1> </body> </html>

AJAX发送POST请求

  1. 与服务器连接时，方法参数改为POST：xmlHttp.open(“POST”,“URL”,true);
  2. 请求服务器之前必须设置请求头：xmlHttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
  3. 请求方法参数必须带有请求体：xmlHttp.send(“xxx=xxx”);
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'post.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <script type="text/javascript"> function createXMLHttpRequest(){ try{ //大多数浏览器 return new XMLHttpRequest(); }catch(e){ try{ //IE6 return ActvieXObject("Msxml2.XMLHTTP"); }catch(e){ try{ //IE5.5及以下 return ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ alert("您的浏览器版本过低或不兼容，请升级或更换浏览器！！！"); throw e; } } } } window.onload = function(){ var btn = document.getElementById("btn"); //点击按钮触发的事件 btn.onclick = function(){ /* 异步的四步操作 */ //1.得到异步对象 var xmlHttp = createXMLHttpRequest(); //2.与服务器连接:请求方式、请求URL、是否采用异步请求 xmlHttp.open("POST", "<c:url value='/AServlet'/>", true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //3.发送请求:参数为请求体 xmlHttp.send("username=田&password=pwd"); //4.给异步对象的onreadystatechange事件注册*** //当异步对象的状态发生变化时执行该方法 xmlHttp.onreadystatechange = function(){ //200为服务器响应成功；4为服务器响应结束 if (xmlHttp.status == 200 && xmlHttp.readyState == 4) { //获取h1 var h1 = document.getElementById("h1"); //获取响应的内容 var text = xmlHttp.responseText; h1.innerHTML = text; } } }; }; </script> <body> <button id="btn">提交</button> <h1 id="h1"></h1> </body> </html>

AJAX响应内容为XML

  1. 服务器端响应体必须为XML格式，在js中解析会出现错误
  2. 在获取xml中的内容时，textContent会在IE较低版本会出现兼容问题（IE11亲测有效）
    调用**window.addEventListener;**若为true，则为其它浏览器，若为false，则为较低版本的浏览器
package tqb.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.swing.RepaintManager; /** * Servlet implementation class XMLServlet */ @WebServlet("/XMLServlet") public class XMLServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/xml;charset=utf=8"); System.out.println("xml"); response.getWriter().print("<students><student id='01'>" + "<name>tqb</name>" + "<age>20</age>" + "</student></students>"); } } 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'xml.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <script type="text/javascript"> function createXMLHttpRequest(){ try{ //大多数浏览器 return new XMLHttpRequest(); }catch(e){ try{ //IE6 return ActvieXObject("Msxml2.XMLHTTP"); }catch(e){ try{ //IE5.5及以下 return ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ alert("您的浏览器版本过低或不兼容，请升级或更换浏览器！！！"); throw e; } } } } window.onload = function(){ var btn = document.getElementById("btn"); //点击按钮触发的事件 btn.onclick = function(){ /* 异步的四步操作 */ //1.得到异步对象 var xmlHttp = createXMLHttpRequest(); //2.与服务器连接:请求方式、请求URL、是否采用异步请求 xmlHttp.open("GET", "<c:url value='/XMLServlet'/>", true); //3.发送请求:参数为请求体，GET无请求体所以为null xmlHttp.send(null); //4.给异步对象的onreadystatechange事件注册*** //当异步对象的状态发生变化时执行该方法 xmlHttp.onreadystatechange = function(){ //200为服务器响应成功；4为服务器响应结束 if (xmlHttp.status == 200 && xmlHttp.readyState == 4) { var h1 = document.getElementById("h1"); //获取响应的内容 var doc = xmlHttp.responseXML; var ele = doc.getElementsByTagName("student")[0]; var id = ele.getAttribute("id"); var nameEle = ele.getElementsByTagName("name")[0]; var ageEle = ele.getElementsByTagName("age")[0]; if (window.addEventListener){ var name = nameEle.textContent;//其它浏览器 var age = ageEle.textContent;//其它浏览器 }else{//较低版本的IE浏览器（IE11上边的方法亲测有效） var name = nameEle.text; var age = ageEle.text; } var text = id + "," + name + "," + age; h1.innerHTML = text; } }; }; }; </script> <body> <button id="btn">提交</button> <h1 id="h1"></h1> </body> </html>