1.AJAX基础开发
在标准的MVC设计模式之中，控制层一定要调用业务层，而后业务层一定会操作多个数据层。
如果现在只有一个地方需要变更，但是如果按照原来的方式开发，则所有的数据需要重新通过业务层读取，
而后重新利用控制层传输到JSP页面，而页面再进行内容输出。
那么再这样需要进行局部数据更新的情况下，就只有通过AJAX技术实现与服务器端的数据交互，
当数据交互完成之后在客户端利用JavaScript+DOM解析 的方式 重新生成要显示的内容。
所以AJAX的主要作用就是局部刷新，AJAX 的全称为“Asynchronous JavaScript AND XML”
(异步的JavaScript与XML)
AJAX的基本操作流程
实现数的异步操作
如果要进行AJAX操作绝对离不开两个核心的概念：JavaScript，服务器（处理 WEB请求）
本次打算实现一个“echo”程序，现在前端传递一个信息数据，而后服务器端接收之后在
这个数据前增加一个“echo：”的形式返回。
1.如果要想操作AJAX，那么首先必须要取得XMLHttpRequest对象。
所有的异步处理交互以及数据的回调处理都是通过XMLHttpRequest对象完成的，但是
对于这个对象的创建，必须要考虑两种情况：一种是基于IE的操作，一种是基于非IE的操作。
input.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% 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>AJAX Demo</title> <script> window.onload=function(){ document.getElmentById("sendBut").addEventListener("click",sendEcho,false); } //声明的时候根本什么意义都不能表示，因为不知道它的类型 var xmlHttpRequest;//定义一个AJAX的核心处理对象 //一般都会单独定义一个操作函数，这个函数的主意功能是进行XmlHttpRequest对象的实例化 function createXmlHttpRequest(){ if(window.XMLHttpRequest){ //表示此时的浏览器是非IE浏览器 xmlHttpRequest=new XMLHttpRequest();//直接进行对象实例化 }else{ //如果现在是IE浏览器 xmlHttpRequest=new ActiveXObject("Microsoft.XMLHttp"); } } function sendEcho(){ //取出输入数据的内容 var info=document.getElmentById("info").value; if(info!=""){//现在有输入的护具 createXmlHttpRequest();//调用创建xmlHttpRequest对象的函数 //设置要提交数据的路径以及定义数据的提交模式，而后使用地址重写的方式传递数过去 xmlHttpRequest.open("post","<%=basePath%>EchoServlet?msg="+info); xmlHttpRequest.onreadystatechange=sendEchoCallback； xmlHttpRequest.send(null);//发送请求 } //当信息处理完成之后原本的数据应该清空 document.getElmentById("info").value=""; } function sendEchoCallback(){//AJAX异步处理的回调函数 if(xmlHttpRequest.status==200){ //服务器端处理正常 if(xmlHttpRequest.readyState==2||xmlHttpRequest.readyState==3){ alert("请稍后，正在为您进行数据处理！"); } if(xmlHttpRequest.readyState==4){ //现在数据已经处理完成了，可以进行页面处理 var=data=xmlHttpRequest.responseText;//接收数据 //所有的回应数据都应该保存在“echoDiv”元素之中 var divElement=document.createElement("div"); divElement.appendChild(document.createTextNode(data)); document.getElmentById("echoDiv").appendChild(divElement); } } } </script> </head> <body> <div id="inputDiv"> <input type="text" name="info" id="info"> <input type="button" name="sendBut" value="发送信息"> </div> <div id="echoDiv"></div> </body> </html>
任何情况下只要调用了createXmlHttpRequest()这个函数那么一定可以取得一个实例化完成的
xmlHttpRequest对象，并且所有的操作都通过次对象产生调用。
2.观察XMLHttpRequest类所提供的操作方法；
在这个列表之中有以下的两个方法使用最多；
open():设置请求路径以及请求的模式（get或者post）
send():表示进行i请求的发送，设置的内容为null。
但是z只依靠以上的两个函数实际上还是不能够进行异步请求的处理，如果要进行AJAX异步数据的
处理还需要观察XMLHttpRequest类中提供的几个属性。
当请求发送到服务器端并且成功处理完毕之后，所返回的数据有两种类型：
文本：适合于JSON数据的接收
XML结构数据：直接转化为XML的DOM对象；
3.如果要想进行异步处理，那么应该首先准备好服务器端的程序。
现在假设客户端传递过来的参数名称为msg，所以Servlet里面也要接收msg参数；
范例：定义EchoServlet EchoServlet.java
@SuppressWarnings("serial")
@WebServlet(urlPatterns="/EchoServlet")
public class EchoServlet extends HttpServlet{
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException{
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
PrintWriter out=response.getWriter();
out.println("ECHO:"+request.getParameter("msg"));
}
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException{
this.doGet(request,response);
}
}
4.编写前台页面的代码；
准备好一个输入文本组件以及按钮。
随后为按钮设置一个事件，这个事件名称叫：sendEcho()
5.所有的输入的信息应该发送到服务器端，如果要实现发送必须依靠XMLHttpRequest对象；
6.处理回调操作
默认情况下数据的回调处理应该只处理一次就够了，可是现在处理了三次，为了能够明确的知道
这三次做了哪些事情，可以输出点状态。
实际上对于回应的数据，如果服务器端返回的http状态码为200就表示程序处理正常。
范例：根据readyState进一步处理
此时代码就可以发现，利用AJAX可以非常方便的进行局部刷新的操作，也相当于服务器端与客户端
的交互不再局限于表单上了，利用异步处理也可以完成。
虽然AJAX本身具备很强的操作能力，但是由于服务器端开的窗口多了，所以对于数据的验证
也需要更加丰富。