简介

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发
技术。（不是一种编程语言）
ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。
Ajax 请求的局部更新，浏览器地址栏不会发生变化，局部更新不会舍弃原来页面的内容。

在2005年，Google通过其Google Suggest使 AJAX变得流行起来。（Google Suggest能够自动帮您完成搜索单词）
Google Suggest使用 AJAX创造出动态性极强的 web界面：当您在谷歌的搜索框输入关键字时，JavaScript会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

原生AJAX请求

原生 AJAX 请求的示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript">
			// 在这里使用 javaScript 语言发起 Ajax 请求，访问服务器 AjaxServlet 中 javaScriptAjax
			function ajaxRequest() {
				// 1 、我们首先要创建 XMLHttpRequest
				var xmlhttprequest = new XMLHttpRequest();
				// 2 、调用 open 方法设置请求参数
				xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true)
				// 4 、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
				xmlhttprequest.onreadystatechange = function(){
					if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
						var jsonObj = JSON.parse(xmlhttprequest.responseText);
						// 把响应的数据显示在页面上
						document.getElementById("div01").innerHTML = " 编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
					}
				}
			// 3 、调用 send 方法发送请求
			xmlhttprequest.send();
			}
	</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>

jQuery 中的 AJAX 请求

$.ajax 方法

主要参数如下：

url 	表示请求的地址
type 	表示请求的类型 GET 或 POST 请求
data		表示发送给服务器的数据
格式有两种：
	一：name=value&name=value
	二：{key:value}
success		请求成功，响应的回调函数
dataType	响应的数据类型
			常用的数据类型有：
				text 表示纯文本
				xml 表示 xml 数据
				json 表示 json 对象

示例：

$("#ajaxBtn").click(function(){
	$.ajax({
		url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
		// data:"action=jQueryAjax",
		data:{action:"jQueryAjax"},
		type:"GET",
		success:function (data) {
			// alert(" 服务器返回的数据是： " + data);
			// var jsonObj = JSON.parse(data);
			$("#msg").html(" 编号：" + data.id + " , 姓名：" + data.name);
		},
		dataType : "json"
	});
});

$.get方法和$.post 方法，参数如下：

url 			请求的 url 地址
data 			发送的数据
callback 		成功的回调函数
type 			返回的数据类型

示例：

// ajax--get 请求
$("#getBtn").click(function(){
	$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function 	(data) {
		$("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
	},"json");
});
// ajax--post 请求
$("#postBtn").click(function(){
	$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function 	  (data){
		$("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
	},"json");
});

$.getJSON 方法，参数如下：

url 				请求的 url 地址
data 				发送给服务器的数据
callback 			成功的回调函数

示例：

// ajax--getJson 请求
$("#getJSONBtn").click(function(){
	    $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function
	(data) {
		$("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
	});
});

表单序列化 serialize()

serialize()方法可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接。

// ajax 请求
$("#submit").click(function(){
	// 把参数序列化
	$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" +
	$("#form01").serialize(),function (data) {
		$("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
	});
});