前台后台数据交互之Servlet & XMLHttpRequest（GET篇）

前台HTML页面使用XMLHttpRequest可以向后台发送和接受信息。后台通过Servlet来接受并处理前台传递过来的信息。

1、HTML页面获取XMLHttpRequest对象

var xmlHttp;

function createXMLHttp() { //创建ajax核心对象
    if (window.XMLHttpRequest) { //判断当前使用浏览器的类型
        xmlHttp = new XMLHttpRequest(); //所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
    } else {
        xmlHttp = new ActiveXObject("MicroSoft.XMLHTTP"); //老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象
    }
}

由于定义的XMLHttpRequest为全局变量xmlHttp，因此每次使用只要调用上面的createXMLHttp()方法即可。

---

2、XMLHttpRequest包含主要的属性和方法

• open方法
• send方法
• readyState相关属性和方法
• status相关属性

2.1 open方法包括
open(method, url)方法
open(method, url, async)方法
open(method, url, async, user)方法
open(method, url, async, user, password)方法

method：通常为“GET”或“POST”，
url：为定义的链接地址，这里要和后台代码中web.xml定义的Servlet-mapping标签下的url-pattern一致。要注意的是url-pattern中的内容前要加一个“/”以保证从当前项目中运行，否则就会在localhost根目录下运行。
async：为true表示“异步”，false表示“同步”。且默认为异步。
user | password：表示所携带的参数。

当method为“GET”时，url中可以直接携带参数
var url = “login”;//此时不携带参数
var url = “login?user=”+userName+”&pass”+password;
其中userName和password两个属性值是从前台输入框中获取，而user和pass两个属性用于后台获取数据。

---

2.2 send方法包括
send();方法
send(data);方法
send()表示什么也不发送，send(data)表示发送data数据块到后台，由于“GET”方法已经将信息包含在url中，因此send方法通常用于“POST”方法中。

---

2.3 readyState相关属性和方法
readyState属性
onReadyStateChange()方法

readyState的状态值

readyState	描述
0	对象已建立，但尚未初始化（尚未调用open方法）
1	对象已建立，已初始化（尚未调用send方法）
2	send方法已调用，正在发送数据（但当前的状态及http头未知 ）
3	已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，数据正在传输中
4	数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据(完成)

onReadyStateChange()方法：
当readyState发生变化时获取。通常只考虑readyState=4的情况，表示数据传送完成。

---

2.4 status相关属性和方法
status属性
statusText属性
status的状态值

status	描述
1XX	消息（临时回应）
2XX	成功
3XX	重定向
4XX	客户端错误
5XX	服务器错误

statusText属性：
获取response状态的所有信息。

---

3、Servlet

• web.xml

• public class ServletImpl extends HttpServlet类

  3.1 web.xml中Servlet的部署

  <servlet>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>com.action.imp.ServletImpl</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/login</url-pattern>
  </servlet-mapping>

---

3.2 public class ServletImpl extends HttpServlet类
此类中重写两个方法doGet和doPost，刚好对应XMLHttpRequest中的“GET”和“POST”方法。
这里以doGet为例子

@Override
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("处理GET请求...");
        request.setCharacterEncoding("utf-8");
        String name = request.getParameter("user");
        String password = request.getParameter("pass");
        System.out.println("用户名："+name+" 密码："+password);
    }