花花JAVA
____________花花之java寒舍
posts - 10,comments - 4,trackbacks - 0
一个最简单的ajax应用
Ajax(Asynchronous JavaScript and XML,异步JavaScript与XML)，俗称“阿贾克斯”。
        由4部分组成：JS + CSS + DOM + XMLHttpRequest

案例：实现ajax异步通信，局部刷新。开发环境：tomcat服务器(必须)。。

ajax_1_1.html：
<script>    
var xmlHttp;

//创建XMLHttpRequest异步对象
function createXMLHttpRequest(){
    if(window.ActiveXObject){
        // 如果存在ActiveXObject，就是IE浏览器
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){
        // 用于除IE以外的其他浏览器
        xmlHttp = new XMLHttpRequest();
    }
}

function startCallback() {
    if(xmlHttp.readyState == 4){ 
        // 请求状态为４，即请求完成
        if(xmlHttp.status == 200){
            // 服务器的状态码为200,即状态OK,没有异常，在这里做你想做的。。
            alert(xmlHttp.responseText);
        } 
    }
}    

function doajax(){
    createXMLHttpRequest();
    var url = "ajax_2_2.jsp";
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=startCallback;
    xmlHttp.send(null);
}
</script>

<input type="button" value="测试异步通信" onclick="doajax();">

将上述doajax换成 "POST" 方法请求ajax：
//post方式请求ajax，需要设置setRequestHeader，将参数放置在send中。
    function doajax_post() {
        createXMLHttpRequest();
        var par = "abcd";
        xmlHttp.open("POST", "/ajax_jquery/ajax_old/testajax.do", true);
        //需要设置setRequestHeader
        xmlHttp.setRequestHeader("Content-Type",
                "application/x-www-form-urlencoded");
        xmlHttp.onreadystatechange = startCallback;
        //在send()方法中传参
        xmlHttp.send("param=" + par);
    }


ajax_2_2.jsp：(注意字符编码问题)
<%@ page language="java" pageEncoding="UTF-8"%>
异步测试成功，恭喜您！！！


将上述返回值的形式改为 XML： ( 只要改一下回调函数。Action中需要设置response.setContentType("text/xml;charset=utf-8"); )
function callback_responseXML() {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                alert(xmlHttp.responseText);
                var domObj = xmlHttp.responseXML; //返回XML格式的数据
                var messageNodes = domObj.getElementsByTagName("message"); //返回的是一个数组
                var textNode = messageNodes[0].firstChild; //取到文本内容对应的结点
                var messageStr = textNode.nodeValue; //返回文本信息
                alert(messageStr);
            }
        }
    }


*  Action返回给ajax数据的方式：response.getWriter().println("responseText");
posted on 2009-01-07 11:42 花-花 阅读(240) 评论(1)  编辑  收藏 所属分类: ajax_jquery

FeedBack:
# re: ajax入门
2009-01-07 12:39 | 花猫的花生
常来看看，监督你学习，哈哈。加油，成为最牛的产品经理我当你助理，哈哈。  回复  更多评论
  

只有注册用户登录后才能发表评论。
网站导航:
 
Copyright ©2024 花-花 Powered By博客园 模板提供：沪江博客