　　　　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

巴特西

Unit01： Ajax介绍