Ajax总结报告

M_ittrue · 发表于 2013-1-29 11:44:57

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) {//否则该游览器不支持Ajaxrequest = 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="登陆" ></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反回中提抽新的验证码，然后放在指定的位置就可以了。这样比起更新整个页面省时，又省宽带。

		自动登录	找回密码
密码			立即注册