Ajax技术概要

1.Ajax原理

Ajax即Asynchronous JavaScript and XML,异步Javascript和XML.

Ajax不是一种新的技术，而是几种已有技术的整合，它采用XMLHttpRequest对象进行数据的异步交互，使用javascript增强用户体验，使用DOM组织内容，CSS显示外观，使用XML封装数据。

Ajax的创新点在于，无须刷新页面即可更新页面的部分内容，而传统方式页面内容改变时必须刷新整个页面。应用Ajax技术的包括Google Maps,Gmail,Youtube,and Facebook tabs.

重点需要掌握的概念:

同步机制:传统的Web交互中，首先用户通过界面触发一个HTTP请求到服务器，服务器根据请求内容进行相应的处理，然后将处理完毕的内容再返回给客户端，这是一个同步的过程，当服务器处理客户端提交的请求时，客户端的用户只能空闲等待，无论用户是想处理很少的数据，还是要进行大批量的数据处理，服务器都会给用户返回一个完整的页面。

异步机制：Ajax采取异步机制，使得用户可以一边等待反应，以便查看网页中的内容。Ajax的工作原理相当于在用户和服务器之间加了一个引擎，这个引擎用来统一处理提交的数据，它把不需要服务器端处理的数据直接返回给页面，而只把需要后台处理的数据发送给服务器端。在这种异步交互下，客户端不需要重新读取整个页面，而只读取需要的那部分内容，带来了更好的用户体验。

Ajax工作原理如下图(来自:http://www.w3schools.com/ajax/ajax_intro.asp)所示：

下面通过获取时间信息的传统处理方式和利用Ajax的异步方式的示例，来增加理解。

示例1-1传统Web方式

timeMsgOld.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*,java.util.*,javax.servlet.*" %>
<%
  //获取服务器传来的数据
  String msg = (String)((request.getAttribute("msg")==null)
		  ?"":(String)request.getAttribute("msg"));
%>
<!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">
<title>传统的Web开发方式</title>
</head>
<body>
<form action="/ServletDemos/timeMsgOld.do" method="get">
<span id="msg"><%=msg %></span>
<input  type = "submit" value="单击此按钮">
</form>
</body>
</html>

TimeMsgOld.java

package com.wangdq;

import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.servlet.Requestdispatcher;
import javax.servlet.servletexception;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class,TimeMsgOld
 */
@WebServlet("/timeMsgOld.do")
public class TimeMsgOld extends HttpServlet {
	private static final long serialVersionUID = 1L;
    public TimeMsgOld() {
        super();
        // Todo Auto-generated constructor stub
    }
	protected void doGet(HttpServletRequest request,HttpServletResponse response) throws servletexception,IOException {
		// Todo Auto-generated method stub
		response.setContentType("text/plain;charset=UTF-8");
		request.setAttribute("msg","现在时间是: "+getCurrentDateAndTime()+" 欢迎您!");
		Requestdispatcher rd = request.getRequestdispatcher("/timeMsgOld.jsp");
		rd.forward(request,response);
	}
	/**
	 * 获取当前系统时间
	 */
    private String getCurrentDateAndTime() {
    	String currentDate = "";
    	SimpleDateFormat sdf = new SimpleDateFormat ("E yyyy.MM.dd 'at' hh:mm:ss a zzz");
    	currentDate = sdf.format(new Date( ));
    	return currentDate;
    }
	protected void doPost(HttpServletRequest request,IOException {
		// Todo Auto-generated method stub
		this.doGet(request,response);
	}

}

执行结果如下:

此种方式下，要获取时间信息，整个页面将刷新。

示例1-2Ajax异步刷新

timeMsg.jsp

<%@ 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">
<title>Ajax</title>
<script type="text/javascript">
function ok() {
	var xmlhttp;
	if(window.XMLHttpRequest) {
		// code for IE7+,Firefox,Chrome,Opera,Safari
		xmlhttp = new XMLHttpRequest();
	}else if(window.ActiveXOjbect) {
		// code for IE6,IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	//设定回调函数,当数据返回时系统会执行这个回调函数
	xmlhttp.onreadystatechange = function() {
		if(xmlhttp.readyState==4 && xmlhttp.status==200) {
			document.getElementById("msg").innerHTML = xmlhttp.responseText ;
		}
	}
	//设定请求
	xmlhttp.open("get","http://localhost:8080/ServletDemos/timeMsg.do",true);
	//设定http头
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-unlencoded");
	//发送请求
	xmlhttp.send(null);
}
</script>
</head>
<body>
<span id="msg"></span><br>
<input  type = "button" value="单击此按钮" onClick="ok()">
</body>
</html>

TimeMsg.java

package com.wangdq;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.servlet.servletexception;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class,TimeMsg
 */
@WebServlet("/timeMsg.do")
public class TimeMsg extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public TimeMsg() {
        super();
    }
	protected void doGet(HttpServletRequest request,IOException {
		response.setContentType("text/plain;charset=UTF-8");
		PrintWriter out = response.getWriter();
		out.write("现在时间是: "+getCurrentDateAndTime()+" 欢迎您!");
		out.flush();
		out.close();
	}
	/**
	 * 获取当前系统时间
	 */
    private String getCurrentDateAndTime() {
    	String currentDate = "";
    	SimpleDateFormat sdf = new SimpleDateFormat ("E yyyy.MM.dd 'at' hh:mm:ss a zzz");
    	currentDate = sdf.format(new Date( ));
    	return currentDate;
    }
	protected void doPost(HttpServletRequest request,HttpServletResponse response) 
			throws servletexception,IOException {
		this.doGet(request,response);
	}

}

运行结果如下图所示：

此时获取实现信息，不必刷新整个页面。

原文地址：https://www.jb51.cc/ajax/164714.html

Ajax技术概要

Ajax技术概要

1.Ajax原理

相关推荐