Ajax即：Asynchronous JavaScript And XML（异步JavaScript和XML）。
 
在JavaScript中，通过AJAX可以发出异步请求，即由子线程发出请求，且将由子线程获取响应结果，则主线程可以不参与，表现为浏览器中显示的页面内容可以不发生变化。
 
基于jQuery的AJAX访问，可以调用jQuery中的$.ajax()函数，该函数的参数是一个JSON对象，需要至少为该JSON对象配置5个属性：
 
<script type="text/javascript">
	$("#btn-reg").click(function(){
		// url：将请求提交到哪里去
		// data：请求参数
		// type：请求方式，例如GET或POST等
		// dataType：服务器端响应的数据类型，取值可以是json、text、xml等，取决于服务器端响应时的响应头中的Content-Type
		// success：响应成功时(Http响应码是200)的回调(callback)函数，函数中的参数就是服务器端响应的JSON数据形成的JSON对象
        // error: 响应失败时的回调函数(Http响应码不是200的情况)
		$.ajax({
			"url":"user/handle_register.do",
			"data":$("#form-reg").serialize(),//序列化表单值："username=Hello&password=123456"
			"type":"post",
			"dataType":"json",
			"success":function(obj) {
				if (obj.state == 0) {
					alert(obj.message);
				} else {
					alert("注册成功！");
				}
			},
            "error":function(obj) {
                }
		});
	});
</script>
 
JSON类型
 
JSON数据中，整个数据是一个**JSON对象**，对象中可以有多组**属性与值**的配置，各组之间使用逗号(`,`)进行分隔，而**属性名称**与**属性值**之间使用冒号(`:`)进行分隔，**属性名称**是字符串类型的数据，需使用一对引号框住，**属性值**可以是任意数据类型，如果是数值型或布尔型，可以直接写，不需要使用引号，如果是字符串类型，则需要使用引号框住。
 
JSON数据是在JavaScript语言中可以直接识别的数据类型，无需使用任何解析技术：
 
	<script type="text/javascript">
	var data = {
		"username":"root",
		"age":25,
		"phone":"13800138001",
		"email":"root@163.com"
	};
	
	console.log("username=" + data.username);
	console.log("age=" + data.age);
	console.log("phone=" + data.phone);
	console.log("email=" + data.email);
	</script>
 
在JSON数据中，每个属性的值还可以是另一个JSON对象，另外，在JSON中也有**数组**的概念，每个属性的值都可以是一个数组，例如：
 
{
	"username":"root",
	"age":25,
	"phone":"13800138001",
	"email":"root@163.com",
	"department":{
		"id":3,
		"name":"RD"
	},
	"skill":["Java","MySQL","SSM"]
}

//可以通过下标访问数组元素
console.log("skill-1=" + data.skill[0]);
console.log("skill-2=" + data.skill[1]);
console.log("skill-3=" + data.skill[2]);
 
在JSON的数组其实也是相对于JavaScript这门语言的数组，所以，某个属性是数组类型，对于JavaScript语言来说，就是一个数组，也是有`length`属性的，所以，在操作数组类型的数据时，也可以进行循环或遍历：
 
    for (var i = 0; i < data.skill.length; i++) {
		console.log("skill[" + i + "]=" + data.skill[i]);
	}
 
可以通过`JSON.parse(str)`将字符串转换为JSON对象，例如：
 
var str = '{"username":"admin","password":"123456","age":28}'
var data = JSON.parse(str);
 
服务器端向客户端响应JSON格式的数据
 
当服务器处理请求的方法添加了`@ResponseBody`注解后，表示响应正文，且返回值类型是`String`时，会将方法返回值中的字符串响应给客户端，但是，默认的响应头中的配置是：Content-Type: text/html;charset=ISO-8859-1 所以，默认的响应方式是不支持中文的！
 
正确的做法是自定义某个类型，用于表示所需要响应的数据内容：
 
	public class JsonResult<T> {
		// 操作状态，即成功或失败
		private Integer state;
		// 操作失败时的提示消息
		private String message;
		// 响应给客户端的数据
		private T data;
	}
 
当创建对象并为属性赋值后，表示将响应的JSON数据例如：
 
{"state":0,"message":"xxx","data":xxx}
 
使用这种响应结果时，必须添加Jackson依赖：
 
<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.9.8</version>
</dependency>
 
在使用之前，还应该在Spring的配置文件中配置注解驱动：
 
<!-- 注解驱动 -->
<mvc:annotation-driven />
 
该框架的作用就是将返回的对象组织成JSON格式，并将响应头中的`Content-Type`进行设置：
 
Content-Type: application/json;charset=UTF-8
 
在应用时，将控制器中处理请求的方法的返回值设置为`JsonResult`类型，并返回该类型的对象即可，最终，客户端就会收到与返回对象相匹配的JSON字符串，例如：
 
{"state":1,"message":"注册成功","data":null}
 
之所以将Jackson依赖添加到项目中就可以直接使用，是因为：当响应正文时，SpringMVC框架会根据匹配的转换器(Converter)将方法的返回值转换为响应的正文，并决定响应头的相关信息，在SpringMVC使用Converter时有一定的优先级，例如当方法的返回值是`String`时，优先级是较高的，会自动使用`StringHttpMessageConverter`转换器，当添加了Jackson依赖时，凡是返回值类型是SpringMVC默认不支持的，就会自动应用Jackson中的转换器，而Jackson中的转换器主要就设置了响应头中的`Content-Type`及将返回的对象转换为JSON格式。

jQuery的Ajax API是对XMLHttpRequest对象的抽象，解决了浏览器之间的兼容性问题，同时提供了一些方便的方法。这篇博客的撰写参考了jQuery官网，jQuery Ajax API
 
关于XMLHttpRequest对象请参照我的另一篇博客：XMLHttpRequest进行异步请求（包括文件上传）详解
 
核心概念
 
GET or POST
 
GET用于从服务器获取数据
POST用于向服务器提交数据
 
数据类型
 
jQuery需要一些指令作为你的Ajax请求期望返回的数据类型，可以通过方法来指定，例如$.getJSON()，还可以通过选项对象来指定。
 下面是数据类型：
 
类型
描述
text
字符串
html
传输被替换到页面中的一块HTML代码
script
新增一个script到页面中
json
串json编码的数据，可以是数组，字符串，对象
jsonp
跨域请求json数据
xml
xml格式的数据
请求是异步的
 
因为jQuery的Ajax请求默认是异步的（可以通过配置选项属性async:false来变成同步的），所以响应只能在回调函数中被处理。
 
同源策略和JSONP
 
通常Ajax请求只能限制请求相同协议、相同端口、以及相同的域名下的资源。但是这个限制在使用jQuery加载script标签时不会起作用。
 
JSONP使用一个script标签来执行跨域请求，因为script标签的请求不受同源策略的限制。script中会携带我请求的数据，并将其包裹在我指定的回调函数中。
 
jQuery的Ajax相关的方法
 
最核心的方法是$.ajax()。
 
$.ajax()
 
$.ajax()方法是一个有力并且直接的创建Ajax请求的方法。使用一个选项对象作为参数传给它，这个选项对象的属性配置了完成请求所需要的所有指令。
 $.ajax()提供了成功以及失败的回调函数。
 
实例代码如下：
 
$.ajax({
	url: "post.php",
	type: "post",
	data: { // 传输的数据，如果是get请求将会被转为URL中的请求参数
		id:1
	},
	dataType: json // 我们期待返回的数据类型
})
.done(function(json){}) // 请求成功的回调
.fail(function(xhr,status,errorThrown){}) // 请求失败的回调
.always(function(xhr,status){}) // 不论成功或者失败都会被调用
 
注意:$尽管dataType被设置了，但是如果服务器返回的类型不是我们期待的类型的时候，这时可能不会正常工作，所以一定要保证后端返回的Content-Type是我们所需要的类型。$
 
$.ajax()常用选项一览表
 
属性名
属性值
async
false：同步HTTP请求，true：异步HTTP请求
cache
除了dataType设置为script或者jsonp其他都默认为true，如果设置为false，则在GET请求的URL末尾会自动加上一个防重的参数
done
请求成功自动触发的回调，这个函数会收到自动转换过格式的数据，例如返回的是json格式的数据，则会自动转成JavaScript对象。以及原始的请求对象和返回状态码
fail
请求失败时触发
always
完成时触发的回调无论成功或者失败
context
指定回调函数的this
data
发送的数据
dataType
期望接收的数据类型
jsonp
回调函数的名字当进行jsonp请求的时候，默认是”callback“
timeout
请求时长
type
GET、POST、PUT、DELETE后两者不一定被所有的浏览器支持
url
请求的url
便捷方法
 
方法
描述
$.get(url,data,callback,datatype)
get请求，指定url和回调函数（参数是返回的内容）
$.post(url,data,callback,datatype)
post请求
$.getScript(url,callback)
添加一个脚本到页面中
$.getJSON(url,callback)
获取json数据
使用JSONP
 
使用$.ajax()请求时可以将dataType设置为jsonp，这样这可以发起一个JSONP跨域请求，可以和另一个选项jsonp配合使用。jsonp选项用于指定前端传过去的回调函数，如果没有指定，jQuery会自动指定一个callback参数。我们可以通过jsonp选项来指定需要调用的回调函数。
 
当既指定了jsonp、又指定了success回调函数的时候，先调用jsonp指定的回调函数，再调用success回调函数。
 
jsonp需要服务器端和前端配置来实现跨域请求。关于jsonp请看这篇博客

关于Ajax异步请求(实时刷新)
 
异步请求简介
 AJAX = 异步 JavaScript 和 XML。
 AJAX 是一种用于创建快速动态网页的技术。
 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等
 
准备工作
 
本博客是基于ssm框架的OA项目来实现的,具体环境是ssm+idea+mysql+maven+tomcat等，具体坐标我就不多介绍了
 
预期效果
 众所周知我们进行软件开发的时候，很多的时候会进入到一个界面中，是需要我们来添加或者查询数据的，这些数据可能是有关联的，也有可能是没有关联的,很多很多下拉框，这些数据其实都是从数据库中读取，动态填充的，下面咱们来做一个二级的请求，实现Ajax的异步请求，进而实现我们的效果
 
 实现思路
 
1.首先我们要进入一个jsp页面
 2.将数据显然在对应的区域中，通过后台请求来获取
 3.由于这是关联查询，显然是一个数据的传递会使另一个对象实现改变，这才是我们关心的重点(接下来我们会重点分析这一点)
 
1.首先咱们进入一个jsp页面
 
 2.咱们要分析一个我们的下拉框选项
 首先肯定是我们这两个下拉框都是哟自己的属性和相关的数据，可以看出来这都是一个下拉框，里面有对应的属性和数据，既然使用拼接的情况我们就会用到ajax异步请求，然后我们循环遍历，取出我们的数据
 
<tr >
	<td align="right" bgcolor="#FAFAF1" height="22">选择项目：</td>
	<td  align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
		<select id="pro" name="myproname" onchange="addayalisys(this.value)">
			<option value=0>选择项目</option>
		</select>
	</td>
</tr>
<tr >
	<td align="right" bgcolor="#FAFAF1" height="22">需求：</td>
	<td  align='left' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22">
		<select id="anid" name="analysisFk">

		</select>
	</td>
</tr>
 

 3.数据关联的过程
 那么重点来了，我们怎么知道我们在上面的数据变化了，我们下面的下拉框会随着上面的变化而随着发生改变的呢，显然我们会发现这些每个第一个下拉框后面会写一个onchange事件，当我们点击不同的事件的时候会发生不同的数据，从而实现我们想要改变第一个数据的时候第二个数据也会随之而发生改变，这就是实现了数据的二级显示
 
 4.二级数据拼接的数据
 
 实现代码
 
<%--使用ajax发送异步请求把项目和需求来刷新到页面上--%>
<script type="text/javascript">
    /*页面一加载便异步加载获取数据*/
	$(function () {
		$.ajax({
            url:'${pageContext.request.contextPath}/mod/getProHasNeed',
            type:'post',
            dataType:'json',
            success:function (data) {
                $.each(data,function(index){
                    $("#pro").append("<option value='"+data[index].id+"_"+data[index].title+"_"+data[index].proname+"'>"+data[index].proname+"</option>")
                });
            }
        })
	});
	//根据项目获取项目对应的需求
	function addayalisys(obj) {
		alert(obj);
        var arr = obj.split("_");
        $("#anid option").remove(); //移除上一次添加的数据
        $("#anid").append("<option value='"+arr[0]+"'>"+arr[1]+"</option>")
    }
</script>
 
 
友情提示：无论我们写多少级联动窗口，都是这个思路，一个ajax对应一个方法，然后这几个依次遍历，最终能够达到我们的需求

 
Ajax异步请求原理和过程
 
1.什么是Ajax
2.AJAX创建异步对象XMLHttpRequest ( 考虑兼容性 )
3.操作XMLHttpRequest 对象
 

 
1.什么是Ajax
 
Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。
 
2.AJAX创建异步对象XMLHttpRequest ( 考虑兼容性 )
 
AJAX 的要点是 XMLHttpRequest 对象。
 
不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的，IE浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
 
例如：
 
　　var xhr=null; 
　　if (window.XMLHttpRequest)
　　 {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
    　　    xhr=new XMLHttpRequest();
   } else{// 兼容 IE6, IE5 
 　　 xhr=new ActiveXObject("Microsoft.XMLHTTP");  
    }
 
 
3.操作XMLHttpRequest 对象
 
（1）设置请求参数（请求方式，请求页面的相对路径，是否异步）
 
 xhr.open(method,url,async);  
 send(string);//post请求时才使用字符串参数，否则不用带参数。
 
 
 
method：请求的类型；GET 或 POST
 url：文件在服务器上的位置
 async：true（异步）或 false（同步）
 
 
注意：post请求一定要设置请求头的格式内容，get请求的参数拼接在url后面
 
（2）设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange ，类似函数指针，如
 
　xhr.onreadystatechange=function()
　　{
　　　　// 相应的执行代码
　　}
 
（3）获取异步对象的readyState 属性
 
该属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
 
readyState 属性可能的值：
 
 
 
0：未初始化 – 尚未调用.open()方法；
 1：启动 – 已经调用.open()方法，但尚未调用.send()方法；
 2：发送 – 已经调用.send()方法，但尚未接收到响应；
 3：接收 – 已经接收到部分响应数据；
 4：完成 – 已经接收到全部响应数据，而且已经可以在客户端使用了；
 
 
在调用时，我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成（意味着可获得数据）：
 
　　xhr.onreadystatechange=function()
　　{
　　　　if(xhr.readyState==4)
　　　　{
　　　　　　// 从服务器的response获得数据
　　　　}
　　}
 
（4）判断响应报文的状态，若为200说明服务器正常运行并返回响应数据，
 （5）读取响应数据，可以通过 responseText 属性来取回由服务器返回的数据。
 
xhr.onreadystatechange=function()
　　{
　　　　if(xhr.readyState==4){

　　　　　　if(xhr.status==200){

　　　　　　　　document.myForm.time.value=xmlHttp.responseText;

　　　　　　}
　　　　}
　　}
 
整体示例如下：
 

<form name="myForm"> 
　　用户: <input type="text" name="username" onkeyup="ajaxFunction();" /> 
　　时间: <input type="text" name="time" /> 
</form> 


function ajaxFunction()
 {
 　　var xhr=null; //定义XMLHttpRequest对象
　　 if (window.XMLHttpRequest)
　　 {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
    　　    xhr=new XMLHttpRequest();
     } else{// 兼容 IE6, IE5 
 　　 		xhr=new ActiveXObject("Microsoft.XMLHTTP");  
    }
　　
　　xhr.open("GET","****.ashx",true)//设置请求方法，请求的目标页面，以及是否异步
　　xhr.setRequestHeader("If-Modified-Since","0");

　　xhr.onreadystatechange=function(){　　//定义XMLHttpRequest对象的onreadystatechange属性  　　

　　　　if(xhr.readyState==4)　{　　　//判断XMLHttpRequest对象的状态 
　　　　　　if(xhr.status==200){
　　　　　　　　document.myForm.time.value=xhr.responseText;//通过XMLHttpRequest对象的responseText属性获取回传的数据 
　　　　　　} 
　　　　}
　　} 
　　xhr.send(null);//发送异步请求 
}