Ajax原理

lilai

浏览: 309438 次

最近访客更多访客>>

xuhuanfeng

所思在远道

jimmy_ji

tly_123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-08 ( 45)
2012-07 ( 60)
2012-06 ( 52)
更多存档...

博客分类：

Ajax原理

Ajax原理

本文将通过一个具体的例子来展示Ajax的工作原理，通过与传统请求响应方式的对比展现Ajax中处理请求响应的不同方式。在这个示例程序中，所要完成的任务非常简单，仅仅需要输入一个姓名然后提交这个表单，在服务器端处理这个请求，然后在页面显示处理的结果，在下面的示例程序中，将展示通过传统方式和Ajax方式分别处理这个请求响应的具体过程。

传统方式：

Java代码 




<%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
    pageEncoding="ISO-8859-1"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
<title>Insert title here</title>  
</head>  
<body>  
    <form action="SayHello.jsp">  
        name:<input type="text" name="name"/>  
        <input type="submit" name="submit"/>  
    </form>  
    <%  
        if(request.getParameter("name")!=null&&request.getParameter("name").length()>0)  
            out.print("Hello "+request.getParameter("name"));  
    %>  
</body>  
</html>  

传统方式的实现方式是直接将表单提交到自身的页面，然后在服务器端经过编译后执行其中的Java代码。

Ajax方式（Servlet代码以及配置文件略）：

Java代码 




<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
<title>SayHello</title>  
<script type="text/javascript">  
    //创建XMLHttpReques对象  
    function createXMLHttpRequest(){  
          
        if(window.XMLHttpRequest){  
            //Mozilla浏览器  
              
            XMLHttpReq=new XMLHttpRequest();  
        }else{  
              
            //IE浏览器  
            if(window.ActiveXObject){  
                try{  
                    XMLHttpReq=new ActionXObject("Msxm12.XMLHTTP");  
                }catch(e){  
                    try{  
                        XMLHttpReq=new ActiveXObject("Microsoft.XMLHTTP");  
                    }catch(e){}  
                }  
            }  
        }  
    }  
    //处理服务器响应结果  
     function handleResponse() {  
        // 判断对象状态  
        if (XMLHttpReq.readyState == 4) {   
            // 信息已经成功返回，开始处理信息  
           if (XMLHttpReq.status == 200) {   
                var out = "";  
                var res = XMLHttpReq.responseXML;  
                var response= res.getElementsByTagName("response")[0].firstChild.nodeValue;  
                //5. 解析服务器返回的信息,更新用户界面  
                document.getElementById("Hello").innerHTML = response;  
               }  
         }  
       }  
    //发送客户端的请求  
    function sendRequest(url){  
        //1.创建XMLHttpRequest  
        createXMLHttpRequest();  
        //2.设置回调函数  
        XMLHttpReq.onreadystatechange=handleResponse;  
        //3.初始化XMLHttpRequest组建并发送请求  
        XMLHttpReq.open("GET",url,true);  
        //发送请求  
        XMLHttpReq.send(null);  
    }  
    //开始调用Ajax的功能  
    function sayHello()  
    {  
        var name=document.getElementById("name").value;  
        //发送请求  
        sendRequest("SayHell?name="+name);  
    }  
</script>  
</head>  
<body>  
    <font size="1">  
        name:<input type="text" id="name"/>  
        <input type="button" value="提交" onclick="sayHello()"/>  
        <div id="Hello"></div>  
    </font>  
</body>  
</html>  