本文将通过一个具体的例子来展示Ajax的工作原理,通过与传统请求响应方式的对比展现Ajax中处理请求响应的不同方式。在这个示例程序中,所要完成的任务非常简单,仅仅需要输入一个姓名然后提交这个表单,在服务器端处理这个请求,然后在页面显示处理的结果,在下面的示例程序中,将展示通过传统方式和Ajax方式分别处理这个请求响应的具体过程。
传统方式:
- <%@ 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代码以及配置文件略):
- <%@ 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="提交" οnclick="sayHello()"/>
- <div id="Hello"></div>
- </font>
- </body>
- </html>
代码解析:
1.创建XMLHttpRequest
2.设置回调函数
3.初始化XMLHttpRequest组建并发送请求
4.服务器返回响应信息
5.解析服务器返回的信息,更新用户界面
详细调用过程如下
最终Ajax方式处理请求的效果是通过XMLHttpRequest对象向服务器发送请求,在得到服务器的返回的处理结果以后,文本框中的用户输入信息依然存在,使用Ajax只是刷新了页面的局部区域,把处理的结果展示在页面的指定位置,对于页面的其他部分不会进行刷新。
本文将通过一个具体的例子来展示Ajax的工作原理,通过与传统请求响应方式的对比展现Ajax中处理请求响应的不同方式。在这个示例程序中,所要完成的任务非常简单,仅仅需要输入一个姓名然后提交这个表单,在服务器端处理这个请求,然后在页面显示处理的结果,在下面的示例程序中,将展示通过传统方式和Ajax方式分别处理这个请求响应的具体过程。
传统方式:
- <%@ 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代码以及配置文件略):
- <%@ 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="提交" οnclick="sayHello()"/>
- <div id="Hello"></div>
- </font>
- </body>
- </html>
代码解析:
1.创建XMLHttpRequest
2.设置回调函数
3.初始化XMLHttpRequest组建并发送请求
4.服务器返回响应信息
5.解析服务器返回的信息,更新用户界面
详细调用过程如下
最终Ajax方式处理请求的效果是通过XMLHttpRequest对象向服务器发送请求,在得到服务器的返回的处理结果以后,文本框中的用户输入信息依然存在,使用Ajax只是刷新了页面的局部区域,把处理的结果展示在页面的指定位置,对于页面的其他部分不会进行刷新。