使用XMLHTTPRequest对象完成ajax -

lufeng4321

浏览: 58163 次
性别:
来自: 上海

最近访客更多访客>>

Ronny123456

snailelf

cjf2640

qq595541377

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

使用XMLHTTPRequest对象完成ajax

博客分类：

ajax

Ajax XML Servlet Safari Firefox

第一步，编写HTML页面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jslib/verifyxml.js"></script>
</head>
<body>
    
    username:<br/>
     <input type="text" id="userName" onblur="verify();"><br/>
    
     <div id="result"></div>

</body>
</html>

第二步，编写实现AJAX的JS代码

//使用XMLHTTPRequest对象来完成ajax
var xmlhttp;
function verify(){
    //alert("hello racky");
    //1取得文本框的值
    var userName=document.getElementById("userName").value;
    //2创建 XMLHTTPRequest对象
    if(window.XMLHttpRequest){
       //firefox,Mozillar,opera,safari,ie7,ie8
        xmlhttp=new XMLHttpRequest();
        //针对某些特定版本的Mozillar浏览器的BUG进行的修正
        if(xmlhttp.overrideMimeType){
            xmlhttp.overrideMimeType("text/xml");
        }
    } else if(window.ActiveXObject){
        //ie6,ie5.5,ie5
        //两个可用于创建XMLHTTPRequest对象的控件名称，保存在一个JS数组中，排在前面的较新
        var activexName=['MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
        for(var i=0;i<activexName.length;i++){
            try{
                //创建成功则终止循环，创建失败则抛出异常，继续循环,尝试创建
                xmlhttp=new ActiveXObject(activexName[i]);
                break;
            }catch(e){

            }
        }
    }
    if(!xmlhttp){
        alert("Object XMlHttpRequest created failed");
        return;
    }else{
        //alert(xmlhttp);
        //alert("after create:"+xmlhttp.readyState)
    }
    //3注册回调函数
    //注册回调函数时，函数名后面不能加括号
    //将函数名注册，如果加上括号，会将函数的返回值注册上
    xmlhttp.onreadystatechange=callback;
    //4设置连接信息
    //设置与服务器的连接信息，HTTP的请求方式，URL，采用异步还是同步，TRUE是异步
    //xmlhttp.open('GET','ajaxserver?name='+userName,true);
    //POST方式请求的代码 ,URL中不能带参数
    xmlhttp.open('POST','AJAXXMLServer',true);
    //设置POST请求头
    xmlhttp.setRequestHeader('Content-Type',"application/x-www-form-urlencoded");
    //POST方式发送数据
    xmlhttp.send("name="+userName);
    //alert("after open:"+xmlhttp.readyState);
    //5发送数据，开始和服务器交互
    //同步方式下，send要等到服务器端数据返回后才执行，异步方式会立即完成执行
    //xmlhttp.send(null);
    //alert("after send:"+xmlhttp.readyState);

}
//回调函数 readyState一改变，回调函数就会调用
function callback(){
    //alert("load callback:"+xmlhttp.readyState);
    //判断对象的交互状态是完成
    if(xmlhttp.readyState==4){
        //判断http的交互是否成功
        if(xmlhttp.status==200){
            //获取服务器端返回的数据
            //使用responseText的方式来接受XML数据对象的DOM对象
            //alert("hello racky");
            var domObj=xmlhttp.responseXML;
            if(domObj){
                //alert(domObj);
                //<message></message>
                //根据getElementsByTagName获取元素节点，可能找到多个，返回的是数组
                var msgNodes=domObj.getElementsByTagName("message");
                //判断是否正确取得节点
                if(msgNodes.length>0){
                    //获取msgNode的文本内容
                    var responseMsg=msgNodes[0].firstChild.nodeValue;
                    //将数据显示在页面上
                    var divNode=document.getElementById('result');
                    divNode.innerHTML=responseMsg;
                    //获取服务器端输出的纯文本数据
                    //var responseText=xmlhttp.responseText;
                    //将数据显示在页面上
                    //var divNode=document.getElementById('result');
                    //divNode.innerHTML=responseText;
                }else{
                    alert("data xml error,the xml content:"+xmlhttp.responseText);
                }
            }else{
                alert("data xml error,the xml content:"+xmlhttp.responseText);
            }
        }
    }

}

第三步，编写服务端JAVA代码，这里仅仅是为了实现AJAX，因此服务端代码比较简单

package com.racky.servlet;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

/**
* Created by IntelliJ IDEA.
* User: Administrator
* Date: 2009-6-29
* Time: 22:42:14
* To change this template use File | Settings | File Templates.
*/
public class AJAXXMLServer extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1取参数
        //2判断参数是否有问题
        //3校验
        //4将用户感兴趣的数据发回页面，而不是返回一个新的页面
        //xml，响应的 Content-Type必须是text/xml
        response.setContentType("text/xml;charset=utf-8");
        PrintWriter out=response.getWriter();
        String old=request.getParameter("name");
        StringBuilder builder=new StringBuilder();
        //将返回的数据拼装成XML格式
        builder.append("<message>");
        if(old==null||old.length()==0){
            builder.append("用户名不能为空").append("</message>");
        }else{
            String name=new String(old.getBytes("iso8859-1"));

            if(old.equals("racky")){
                builder.append("用户名["+old+"]已经存在").append("</message>");
            }else{
                builder.append("用户名【"+old+"】不存在，可以使用").append("</message>");
            }
        }
       out.println(builder.toString());
        System.out.println(builder.toString());
    }
}

第四步，配置web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           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>AJAXXMLServer</servlet-name>
        <servlet-class>com.racky.servlet.AJAXXMLServer</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>AJAXXMLServer</servlet-name>
        <url-pattern>/AJAXXMLServer</url-pattern>
    </servlet-mapping>
</web-app>
最后部署运行即可

分享到：