一、Ajax
Ajax = 异步JavaScript和XML，Ajax是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。可以再网页不重新加载的情况下，对网页的某部分进行更新。
传统网页（不使用Ajax）如果需要更新内容，必须重新加载整个网页。
注意：Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 web 应用程序技术。
二、Ajax所包含的技术
① 使用CSS和XHTML来表示
② 使用DOM模型来交互和动态显示
③ 使用XMLHttpRequest来和服务器进行异步通信
④ 使用JavaScript来绑定和调用
AJAX核心是XMLHTTPRequest对象，不同的浏览器创建XMLHTTPRequest对象方法是有差异的。
IE使用ActiveXObject，而其它的浏览器使用XMLHTTPRequest的JavaScript内建对象；
三、XMLHTTPRequest对象属性
1）onreadystatechange：状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
2）readySteat：请求的状态(0-1-2-3-4)
0 - （未初始化）还没有调用send()方法
1 - （载入）已调用send()方法，正在发送请求
2 - （载入完成）send()方法执行完成，已接收到全部响应内容
3 - （交互）正在解析响应内容
4 - （完成）响应内容解析完成，可以在客户端调用
3）responseText：服务器的响应，返回数据的文本（内容）
4）responseXML：服务器的响应，返回数据的兼容DOM的XML文档对象，这个对象可以解析为一个DOM对象
5）responseBody：服务器返回的主题（非文本格式）
6）responseStream：服务器返回的数据流
7）status：服务器的HTTP状态码（如：404="文件未找到"、200="成功"，等等）
8）statusText：服务器返回的状态文本信息，HTTP状态码的相应文本（OK或Not Found(未找到) 等等）
四、XMLHttpRequset对象方法
1）abort()：停止当前请求
2）getAllResponseHeaders()：把HTTP请求的所有响应首部作为键/值对返回
3）getResponseHeaders("header")：返回指定首部的串值
4）open(method,url,asyncFlag)：初始化一个请求，建立对服务器的调用；xmlHttp.open("GET","test.jsp",true)
参数 method：设置请求类型(GET或POST)。
参数 url：文件在服务器上的位置。
参数 asyncFlag：是否异步处理请求。
5）send(content)：向服务器发送请求
6）setRequestHeaders("header","value")：把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送('post')方法一定要
五、Ajax使用步骤
① 创建XMLHttpRequest对象
② 设置请求方式
③ 调用回调函数
④ 发送请求
六、XMLHttpRequest写法
//创建XMLHttpRequest对象 var xmlHttp ; if(window.XMLHttpRequest){ //非IE xmlHttp = = new XMLHttpRequest(); }else if(window.ActiveXObject){ //IE xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } //设置请求方式 xmlHttpxhr.open('POST', '/hello.json', true) //发送. psot数据要放在send里面 xmlHttp.send('username=luoshushu&passwore=123') xmlHttp.addEventListener('load', function () { if((xmlHttp.status >= 200 && xmlHttp.status < 300) || xmlHttp.status === 304){ var data = xmlHttp.responseText console.log(data) }else{ console.log('出错了') } })
七、ajax标准写法
$.ajax({ url:"http://www.microsoft.com", //请求的url地址 dataType:"json", //返回格式为json async:true,//请求是否异步，默认为异步，这也是ajax重要特性 data:{"id":"value"}, //参数值 type:"POST", //请求方式 beforeSend:function(){ //请求前的处理 }, success:function(req){ //请求成功时处理 }, complete:function(){ //请求完成的处理 }, error:function(){ //请求出错处理 } });