什么是 Ajax

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图等等。

XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest方法
（1）open(请求方式, 服务器端的访问地址，异步还是同步)
（2）send(): 使用异步对象发送请求
XMLHttpRequest属性

• readyState属性：请求的状态
  0：表示创建异步对象时，new XMLHttpRequest();
  1：表示初始异步对象的请求参数。 执行open()方法
  2：使用send()方法发送请求。
  3：使用异步对象从服务器接收了数据
  4：异步对象接收了数据，并在异步对象内部处理完成后。
• status属性：网络的状态，和Http的状态码对应
  ​ 200：请求成功
  ​ 404： 服务器资源没有找到
  ​ 500： 服务器内部代码有错误
• responseText属性：表示服务器端返回的数据
  var data = xhr.responseText;

Ajax 请求的基本步骤

1、创建ajax核心对象XMLHttpRequest
2、注册回调函数
3、开启浏览器和服务器之间的通道
4、发送ajax请求

原生Ajax代码

<script type="text/javascript">
	function checkName(username){
		var xhr = null;
		if(window.XMLHttpRequest){
			/* 创建ajax核心对象XMLHttpRequest（浏览器内置的可以直接使用） */
			xhr = new XMLHttpRequest();
		}else{
			/* IE5和IE6是不支持XMLHttpRequest对象的 它只支持ActiveXObject对象 */
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		/* 注册回调函数 
		   xhr对象的readystate属性发生改变时会执行函数
		   XMLHttpRequest对象在请求和响应的过程中该对象的readyState状态从0-4
			0：请求为初始化
			1：服务器连接已建立
			2：请求已接收
			3：请求处理中
			4：求情已完成且响应已就绪
		 */
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4){
				if(xhr.status == 200){/* 200表示服务器正常响应 */
					/* 处理服务器响应的数据 */
					//var s = xhr.responseText;
					document.getElementById("xxx").innerHTML=xmlhttp.responseText;
				}else{
					/* 这里写发生错误的处理代码
					 alter.status属性可以获取到http的响应状态码*/
					alter(xhr.status);
				}
		}
		/* 开启浏览器和服务器之间的通道
		   xhr.oprn(method,url,asyn);
		   method:指定请求方式是get还是post
		   url：请求路径
		   asyn：true表示支持异步，false表示支持同步
		 */
		xhr.open("GET","请求路径",true);
		/* 发送ajax请求 */
		xhr.send();
		
		/* 
		xhr.open("POST","请求路径",true);
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");//使用post请求这行代码必须有
		xhr.send("username="+username+"&password="+password);//post请求数据在send方法中提交 
		*/
	}
</script>

JQuery Ajax

语法：$.ajax({json格式的参数})
json格式的参数：key是定义好的，我们只需要给key赋值即可。json格式中常用的key：

• url：请求地址
• trpe：表示请求的方式get和post，默认是get（不区分大小写）
• data：表示请求的参数。可以是String，数组，json。推荐使用json
• dataType：希望服务器端返回的数据格式。如html，text，xml，json
• success：函数function 相当于xhr对象的readyStatus == 4 && status == 200的情况
• error：当请求发生错误时执行该函数
• async：true表示异步false表示同步，默认为true

$.ajax({
	url:"",
	type:"get",
	data:{"name":"张三","age":"20"},
	dataType:"json",
	success:function(resp){获取数据更新dom对象代码},
	error:function(){错误处理代码}
})

/*$.get()函数相当于执行get请求方式的ajax
  $.get(url,请求参数,success函数,dataType)*/
  
/*$.post()函数相当于执行post请求方式的ajax
  $.post(url,请求参数,success函数,dataType)*/