AJAX 简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

AJAX是基于现有的Internet标准

AJAX是基于现有的Internet标准，并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

 
   variable=new XMLHttpRequest(); 
  

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

 
   variable=new ActiveXObject("Microsoft.XMLHTTP"); 
  

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

    xmlhttp.open("GET","ajax_info.txt",true); 
   
xmlhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）

方法

描述

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

AJAX 响应

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

案例点击打开链接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax_demo</title>
<script>
	function loadXMLDoc() {
		var xmlhttp;
		var userName = document.getElementById("userName").value;
		var queryString = "AjaxDemo?userName="+userName;
		if (window.XMLHttpRequest) {
			//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
			xmlhttp = new XMLHttpRequest();
		} else {
			// IE6, IE5 浏览器执行代码
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("show").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("POST", queryString, true);
		xmlhttp.send();
	}
</script>
</head>
<body>
	<form action="#">

		<h2>获取姓名:</h2>
		<input id="userName" type="text" />
		<br>
		<div id="show" style="border-bottom-color: red;" ></div>
		<br>
		<button type="button" onclick="loadXMLDoc()">请点击</button>
	</form>
</body>
</html>

servlet文档

package cn.oneday.ajaxdemo;
/**
 * @author oneday
 */
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;

public class AjaxDemo extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String encoding = "UTF-8";// 字符编码
		request.setCharacterEncoding(encoding);// 请求编码
		response.setContentType("text/html;charset=" + encoding);// 响应编码

		PrintWriter out = response.getWriter();
		String userName = request.getParameter("userName");
		System.out.println(userName+"hhh");
		String responseText = "UserName" + userName;
		out.println(responseText);
		out.close();

	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		doGet(request, response);
	}

}

xml文档

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>ajax_demo</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  <servlet>
    <!-- servlet的内部名称，自定义。尽量有意义 -->
    <servlet-name>AjaxDemo</servlet-name>
    <!-- servlet的类全名： 包名+简单类名 -->
    <servlet-class>cn.oneday.ajaxdemo.AjaxDemo</servlet-class>
</servlet>
<!-- servlet的映射配置 -->
<servlet-mapping>
    <!-- servlet的内部名称，一定要和上面的内部名称保持一致！！ -->
    <servlet-name>AjaxDemo</servlet-name>
    <!-- servlet的映射路径（访问servlet的名称） -->
    <url-pattern>/AjaxDemo</url-pattern>
</servlet-mapping>
</web-app>

使用回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax_demo</title>
<script>
	var xmlhttp;
	var userName = document.getElementById("userName").value;
	var queryString = "AjaxDemo?userName=" + userName;

	function myFunction() {
		loadXMLDoc(
				queryString,
				function() {
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						document.getElementById("show").innerHTML = xmlhttp.responseText;
					}
				});
	}

	function loadXMLDoc(url, statechange) {
		if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 代码
			xmlhttp = new XMLHttpRequest();
		} else {// IE6, IE5 代码
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = statechange;
		xmlhttp.open("POST", url, true);
		xmlhttp.send();
	}
</script>
</head>
<body>
	<form action="#">

		<h2>获取姓名:</h2>
		<input id="userName" type="text" />
		<br>
		<div id="show" style="border-bottom-color: red;" ></div>
		<br>
		<button type="button" onclick="loadXMLDoc()">请点击</button>
	</form>
</body>
</html>

ajax+servlet简单实现，基础ajax