Unit01： Ajax介绍

　　　　Unit01： Ajax 　　　　

1. ajax是什么?

(asynchronous javascript and xml)
ajax是一种用来改善用户体验的技术，本质是利用浏览器提供的一个特殊对象(XMLHttpRequest,我们可以称之为ajax对象)向服务器发送异步请求;服务器返回部分数据（一般不需要返回一个完整的页面），浏览器利用这些数据对当前页面做部分更新；整个过程不打断用户的操作，页面无刷新。
注：异步请求，指的是发请求时，浏览器不会销毁当前页面，用户仍然可以对当前页面做其它操作。

2. 如何获得ajax对象?

3. ajax对象的几个重要属性

onreadystatechange

用来绑订事件处理函数(用来处理readystatechange事件)。
注：当ajax对象的readystate属性值发生了改变（比如从0变成了1，就会产生readystatechange事件）。

readyState

它有五个值(0,1,2,3,4),表示ajax对象与服务器通信的进展，其中4表示ajax对象已经获得了服务器返回的所有的数据。

responseText

用来获得服务器返回的文本数据。

responseXML

用来获得服务器返回的xml数据。

status

用来获得服务器返回的状态码。

4. 编程步骤

step1. 获得ajax对象。
比如: var xhr = getXhr();
step2. 利用ajax对象发请求。
(1)get请求:
比如:

true:异步
false:同步(发请求时，浏览器会锁定当前页面，用户不能够对当前页面做其它操作)。
(4)post请求:
比如:

注：按照http协议要求，如果发送的是post请求，必须在请求数据包里面添加content-type消息头。ajax对象默认情况下，不会添加该消息头，所以，需要调用setRequestHeader方法来添加。
step3. 编写服务器端的程序。通常只需要返回部分数据。
step4. 编写事件处理函数。

代码：

src/main/java

web

package web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ActionServlet extends 
    HttpServlet{
    public void service(
            HttpServletRequest request,
            HttpServletResponse response)
    throws ServletException,IOException{
        response.setContentType(
                "text/html;charset=utf-8");
        PrintWriter out = 
                response.getWriter();
        //获得请求资源路径
        String uri = request.getRequestURI();
        System.out.println("uri:" + uri);
        String action = 
            uri.substring(
                    uri.lastIndexOf("/"),
                    uri.lastIndexOf("."));
        System.out.println("action:" + action);
        if("/check_uname".equals(action)){
            //检查用户名是否被占用
            String uname = 
                request.getParameter("uname");
            System.out.println("uname:" + uname);
            if("King".equals(uname)){
                out.println("用户名被占用");
            }else{
                out.println("可以使用");
            }
        }else if("/getNumber".equals(action)){
            //返回一个随机整数
            Random r = new Random();
            int number = r.nextInt(100);
            System.out.println("number:" + number);
            out.println(number);
        }
        
    }
}

ActionServlet.java

webapp/js

/*
 * 用于获得ajax对象
 */
function getXhr() {
    var xhr = null;
    if (window.XMLHttpRequest) {
        // 非ie
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject(
                'MicroSoft.XMLHttp');
    }
    return xhr;
}

//依据id返回节点
function $(id){
    return document.getElementById(id);
}

//依据id找到节点，返回节点的value
function $F(id){
    return $(id).value;
}

ajax.js

WEB-INF

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
  <servlet>
      <servlet-name>action</servlet-name>
      <servlet-class>web.ActionServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>action</servlet-name>
      <url-pattern>*.do</url-pattern>
  </servlet-mapping>
</web-app>

web.xml

webapp

<%@ page 
 contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
<script type="text/javascript"
src="js/ajax.js">
</script>
<script type="text/javascript">
    function showNumber(){
        //step1.获得ajax对象
        var xhr = getXhr();
        //step2.发请求
        xhr.open('get','getNumber.do',true);
        xhr.onreadystatechange=function(){
            //step4.处理服务器返回的数据
            if(xhr.readyState == 4 && 
                    xhr.status == 200){
                //获得服务器返回的数据
                var txt = xhr.responseText;
                //更新页面
                $('d1').innerHTML = txt;
            }
        };
        xhr.send(null);
    }
</script>
</head>
<body style="font-size:30px;">
    <a href="javascript:showNumber();">点这儿显示一个随机数</a>
    <br/>
    <div id="d1"></div>
</body>
</html>

random.jsp

<%@ page 
 contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
    <script type="text/javascript" 
        src="js/ajax.js">
    </script>
    
    <script type="text/javascript">
        //检查用户名有没有被占用
        function check_uname(){
            //step1. 获得ajax对象
            var xhr = getXhr();
            //step2. 利用ajax对象发请求
            xhr.open('get',
                    'check_uname.do?uname=' 
                            + $F('uname'),true);
            xhr.onreadystatechange = function(){
                //step4. 处理服务器返回的数据
                if(xhr.readyState == 4 && 
                        xhr.status == 200){
                    //获得服务器返回的数据
                    var txt = xhr.responseText;
                    //更新页面
                    $('uname_msg').innerHTML = txt;
                }
            };
            xhr.send(null);
        }
        
    </script>
</head>
<body style="font-size:30px;">
    <form action="" method="post">
        用户名:<input id="uname" name="uname" 
        onblur="check_uname();"/>
        <span id="uname_msg"></span>
        <br/>
        密码:<input type="password" name="pwd"/>
        <br/>
        <input type="submit" value="注册">
    </form>
</body>
</html>

regist.jsp

注释：使用post方式

<%@ page 
 contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
    <script type="text/javascript" 
        src="js/ajax.js">
    </script>
    <script type="text/javascript">
        function check_uname(){
            //step1.获得ajax对象
            var xhr = getXhr();
            //step2.发请求
            xhr.open('post','check_uname.do',true);
            //添加一个消息头(content-type)
            xhr.setRequestHeader('content-type',
                    'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function(){
                //step4.处理服务器返回的数据
                if(xhr.readyState == 4 && 
                        xhr.status ==200){
                    var txt = xhr.responseText;
                    $('uname_msg').innerHTML = txt;
                }
            };
            xhr.send('uname=' + $F('uname'));
        }
    </script>
    
</head>
<body style="font-size:30px;">
    <form action="" method="post">
        用户名:<input id="uname" name="uname" 
        onblur="check_uname();"/>
        <span id="uname_msg"></span>
        <br/>
        密码:<input type="password" name="pwd"/>
        <br/>
        <input type="submit" value="注册">
    </form>
</body>
</html>

regist_post.jsp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <script type="text/javascript">
    function getXhr(){
        var xhr = null;
        if(window.XMLHttpRequest){
            //非ie
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject(
                    'MicroSoft.XMLHttp');
        }
        return xhr;
    }
    </script>
</head>
<body style="font-size:30px;">
        <a href="javascript:alert(getXhr());">ClickMe</a>
</body>
</html>

test.html