Ajax总结报告

M_ittrue

浏览: 77022 次
性别:
来自: 长沙

最近访客更多访客>>

mic326

liexusong001

暴风雪

pgj007

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java开发

Ajax 应用服务器 Servlet 浏览器 JavaScript

   AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术.在说它之前，自然要介绍一下它的产生最主要原因了。
   我们以前都是通过表单(form)去提交信息的，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法其实在效率上是不高的，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
   与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，也就是不需要反回整个页面，只是抽取必要的信息进行页面的局部更新。这样一来在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快了。同时很多的处理工作可以在发出请求的客户端机器上完成，也就是无需要Servelet作出回应，比如一些提示框，所以Web服务器的处理时间也减少了，也就是大缩短了用户等待的时间。好了，说了那么多，还是贴代码出来讲解一下吧。

<%@ 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=utf-8">

<script type="text/javascript">
 var request;

 //叛断所用的游览器是否支持Ajax
  function suposeAjax(){
	  try {      //支持火狐游览器
			request = new XMLHttpRequest();
		} catch (trymicrosoft) {
			try {//支持IE旧版游览器
				request = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (othermicrosoft) {
				try {//支持IE6以上游览器
					request = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (failed) {
//否则该游览器不支持Ajax
					request = false;
				}
			}
		}
//弹出提示信息，这里的alert(),相就当于java里面的System.out.println();只不过它是以文本框显示而已,这个用在即时提示方面很方便的
		if (!request)
			alert("Error initializing XMLHttpRequest!");
 }

  //回调方法，如果回调
  function callBalckMethod(){
/*request.readyState 几种状态简单分类
*0 － （未初始化）还没有调用send()方法
*1 － （载入）已调用send()方法，正在发送请求
*2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
*3 － （交互）正在解析响应内容
*4 － （完成）响应内容解析完成，可以在客户端调用了 
*request.status ==200表示返回正常
 */
 if(request.readyState ==4 && request.status ==200){
//这句语名是先根据控件Id得到div控件
     document.getElementById("change").innerHTML = request.responseText;
     }
  }

  //联结的主方法
  function connectMethod(){
//给request初始化
	  suposeAjax();
//绑定回调方法,当服务器作出反应时会自动调用callBalckMethod方法，在此只需写方法名即可
	  request.onreadystatechange = callBalckMethod;  
//获得用户名与密码，在Ajax里所有变量都用var定义，
	  var userName = document.getElementById("userName").value;
	  var userPwd = document.getElementById("userPwd").value;
	  alert(""+userName+"<>"+userPwd);
//这里相关于接通一条联接游览器端跟Servlet端的管道，通过这条管道去收发信息，跟Soket管道原理是大概一样的
	  request.open("post","Servlettext",true);
	  request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//send方法是发送信息到Servlet这里我传两个参数，它们之间用“&”隔开的名值对，多个的时候也是同样的道理的
	  request.send("userName="+userName+"&userPwd="+userPwd);
  }
</script>
<title></title>
</head>
<body>
我将在这里的div标签内把服务器反回的信息进行局部更新
<div id="change"></div>
<input type="text" name="userName" id="userName"><br>
<input type="password" name="userPwd" id="userPwd">
<input type="button" value="登陆" onclick="connectMethod();">
</body>
</html>

服务端代码是：

package cn.netjava.Servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;



import cn.netjava.action.Action;
import cn.netjava.action.ActionFactory;

/**
 * Servlet implementation class Constorl
 */
public class Constorl extends HttpServlet {
	private static final long serialVersionUID = 1L;
    public Constorl() {
        super();
    }

	public  void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//通过名值对获取用户名和密码，并进行匹配
	  String userName = request.getParameter("userName");
	  String userPwd = request.getParameter("userPwd");
	  System.out.println("userName"+userName+"userPwd"+userPwd);
//获得输出对象，
	  PrintWriter pw = response.getWriter();
	  if(userName!=null && userPwd!=null && userName.equals("netjava" ) && userPwd.equals("netjava")){
//输出，最终在Ajax里面可以通过request.resppmseText获得
        pw.print("Sucessfue!!!");
	 }else{
		pw.print("fail");
	}

}
}

总得来说，用了Ajax后是会方便很多，也会快速很多，比如我们在做验证码的时候，当用户输错验证码时，我们没必要反回一个新的登陆页面，只是需要换一个新的验证码即可。那么此时我们就需要用到局部更新，上面的例子所用到的Ajax很好的给我们解决了这个问题，我们只要在Servlet反回中提抽新的验证码，然后放在指定的位置就可以了。这样比起更新整个页面省时，又省宽带。

分享到：

java中的反射机制 | MVC总结报告

2010-10-16 02:36
浏览 925
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论