一、简介

       AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。Ajax不是一种新的编程语言，而是使用现有标准的新方法。AJAX可以在不重新加载整个页面的情况下，与服务器交换数据。这种异步交互的方式，使用户单击后，不必刷新页面也能获取新数据。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

 

二、XMLHttpRequest对象

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。

 

XmlHttpRequest常用属性如下所示：

       1.readyState

当XMLHttpRequest对象把一个HTTP请求发送到服务器的时候经历的若干状态。一直等待到请求被处理。然后它才接受一个响应。readyState是一个整数值，用于描述“若干种”状态。具体如下表所示

 

readyState

对象状态值：

·         0 = 未初始（uninitialized）

·         1 = 正在加载（loading）

·         2 = 加载完毕（loaded）

·         3 = 交互（interactive）

·         4 = 完成（complete）

    2.onreadystatechange事件

无论readystate的值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。onreadystatechange属性用于定义状态变化响应函数。与图形用户界面中定义事件的响应函数相似。

    3.responseText属性

该属性包含客户端接受的HTTP响应文本内容。当readyState的值为0、1、2时，responseText中包含一个空字符串。当readyState的值为3（正在接受），响应中包含客户端还未成的响应信息。当readyState为4时（加载完成），该responseText包含完整的响应结果信息。

    4.responseXML属性

该属性用于接受到完整的HTTP响应时(readyState=4)，描述响应的XML响应，即接受服务端发送过来的XML格式的信息

    5.status属性

该属性描述了HTTP状态代码，而且其类型为short。并且当且仅当readystate的值大于3时才可用。当readyState的值小于3的时候试图存取status的值将引发一个异常。

    6.statusText属性

这个属性描述了HTTP状态代码文本；并且当readyState的值为3或4时才可以使用。当readyState为其他值使用该属性会导致一个异常。

 

   XMLHTTPRequest对象提供了各种方法用于初始化合处理HTTP请求，如下所示

 

1. void open(String method,String url,Boolen async)  

   用于创建请求   

   参数：

       method： 请求方式（字符串类型），如：POST、GET、DELETE...

       url：    要请求的地址（字符串类型）

       async：  是否异步（布尔类型）

2. void send(String body)

    用于发送请求

    参数：

        body： 要发送的数据（字符串类型）

3. void setRequestHeader(String header,String value)

    用于设置请求头

    参数：

        header： 请求头的key（字符串类型）

        vlaue：  请求头的value（字符串类型）

4. String getAllResponseHeaders()

    获取所有响应头

    返回值：

        响应头数据（字符串类型）

5. String getResponseHeader(String header)

    获取响应头中指定header的值

    参数：

        header： 响应头的key（字符串类型）

    返回值：

        响应头中指定的header对应的值

6. void abort()

    终止请求

下面是一个ajax的简单示例。

点击receive按钮后

ajax与java交互 ajax和java_javaweb

下面为代码部分

  1. Test.java:Servlet类 
@WebServlet("/test")
public class TestServlet extends HttpServlet {

    private final static long serialVersionUID=1L;

    public TestServlet(){
        super();
    }
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Post Successfully");
        PrintWriter out = resp.getWriter();
        out.print("my name is van.I am an artist.A performance artisti." +
                "I am hired for people to perfill their fantasy.The deep dark fantasy");
    }
}
  1. index.jsp：主页面 
<html>
  <head>
    <script type="text/javascript">
        var xmlHttp;
        function recvState(){
            //4表示服务器响应请求
            if(xmlHttp.readyState==4){
                //200表示成功回应
                if(xmlHttp.status==200){
                    var s = xmlHttp.responseText;
                    var divobj = document.getElementById("content");
                    divobj.innerHTML=s;
                }
            }
        }

        function recv(){
            alert("recv")
            var url = "test";
            //获取xmlHttp对象
            xmlHttp = createXmlHttp();
            xmlHttp.open("post",url,false);
            xmlHttp.onreadystatechange=recvState;
            xmlHttp.send();
        }

        //获得XmlHttp对象
        function createXmlHttp() {
            //对于大多数浏览器都使用的写法
            var xmlHttp;
            if (window.XMLHttpRequest) {
                //部分浏览器获取xmlHttp实例的方式
                xmlHttp = new XMLHttpRequest();
            }
            if (window.ActiveXObject) {
                //考虑浏览器的兼容性
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                if (!xmlHttp) {
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

                }
            }
            return xmlHttp;
        }
      
    </script>
  </head>
  <body>
    <input type="button" id="recv" value="receive" onclick="recv()"/>
    <hr>
    <div id="content" style="width:200px;height:200px;border:solid 1px black"></div>
  </body>
</html>