AJAX:”Asynchronous JavaScript and XML” 中文意思：异步JavaScript和XML。 指一种创建交互式网页应用的网页开发技术。
不是指一种单一的技术，而是有机地利用了一系列相关的技术： 简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端 的集合
AJAX特点
Ajax在本质上是一个浏览器端的技术 Ajax技术之主要目的在于局部交换客户端及服务器间之数据
这个技术的主角XMLHttpRequest 的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新) 与服务器之间的沟通，完全是透过Javascript 来实行 使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序 AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦 注：JavaScript是一门单线程语言。无法将指定的一段js开启一个新的线程来执行。
这个技术的主角XMLHttpRequest 的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新) 与服务器之间的沟通，完全是透过Javascript 来实行 使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序 AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦 注：JavaScript是一门单线程语言。无法将指定的一段js开启一个新的线程来执行。
XMLHttpRequest对象
简而言之：它可以异步从服务器端获取txt或者xml数据 老版本IE: new ActiveXObject("Microsoft.XMLHTTP"); 新版本浏览器： new XMLHttpRequest();
异步请求基本步骤
使用XMLHttpRequest对象 按照下面模式，可以同步地XMLHttpRequest对象：
创建对象； - new (叫助手过来) 创建请求； - open (告诉他要去做的事情) 发送请求； - send (去吧)
主要方法及操作步骤： <1>获取对象：构造方法 <2>建立连接：方法open(method（采用HTTP协议请求方式GET POST）,url(网址地址),isAsync（是否异步 true---同意异步）) <3>配置获取反馈：属性onreadystatechange（状态变化的监听） <4>发送消息：方法send
创建XMLHttpRequest对象
先来创建XMLHttpRequest对象 在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为： var xhr = new XMLHttpRequest(); 在IE5/6中代码为： var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”); 注意，JavaScript区分大小写。
编写回调函数
1.在xhr.send之前添加设置回调函数代码： xhr.onreadystatechange = watching;
2.回调函数 function watching() { if (xhr.readyState == 4) {//请求状态 if (xhr.status == 200) {//服务器返回的状态码 var msg = xhr.responseText; //服务器返回的字符串 } else alert("服务器错误!" + ajaxH.status); } } 判断时注意，要：xhr.readyState == 4&&xhr.status == 200，不要xhr.status == 200&&xhr.readyState == 4
异步对象readyState属性
readyState属性 readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。 0：未初始化。new完后; 1：已打开。对象已经创建并初始化，但还未调用send方法 2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回； 3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整； 4：已加载。所有数据接收完毕
XMLHttpRequest对象属性
一、onreadystatechange属性，设置回调函数。 二、readyState属性，获取当前XMLHttpRequest对象执行的状态： 1> 0表示以创建XMLHttpRequest对象，但是还没有初始化，即没有调用open()方法设置XMLHttpRequest对象。 2>1表示创建了XMLHttpRequest对象，并且调用了open()方法进行初始化，但是还没有调用send()方法。 3>3表示浏览器正在接受服务器的响应数据。 4>所有数据已经被接受完毕。 三、status属性，服务器返回的http状态码。（>=200 and <300、304未修改，读取缓存。都表示成功） 四、statusText属性，服务器返回的状态码对应的友好的文字说明，比如200对应的OK. 五、responseText属性，以字符串方式获取服务器对客户端的响应。 六、responseXml属性，当请求的是一个xml文件时，或者响应头中Content-Type为：text/xml或application/xml时，返回一个XmlDocument对象（Dom节点对象），支持标准的dom的成员，比如：childNodes、documentElement、firstChild、lastChild、nextSibling、nodeName、nodeType、nodeValue、parentNode、doctype等。
XMLHttpRequest对象常用方法
一、open("get","url",true)初始化，如果第三个参数为false,则js等待请求完毕后才会继续执行。 二、setRequestHeader("","")增加http请求头信息。在open()之后，send()之前调用。 三、send(null);发送请求。send()方法的参数表示为在请求报文体中发送的数据内容。为了最大化的浏览器兼容问题，如果没有请求报文体就传递null。get请求没有请求报文体，所以一般为null。使用post请求时才需要设置报文体。 四、getResponseHeader("Content-Type"),根据响应的报文头获得报文内容。 五、getAllResponseHeaders();获取所有的响应报文头内容。 六、abort();取消当前的http请求，取消之后如果要重新发起请求，建议重新创建一个XMLHttpRequest对象。
XMLHttpRequest常用方法
方法 说明 abort 取消请求 open 需要使用多个参数，第一个设置方法属性，第二个设置目标URL，第三个指定是同步(false)还是异步(true)发送请求 send 发送请求到服务器 setRequestHeader() 添加自定义HTTP头到请求 getAllResponseHeaders() 获取HTTP响应头的整个列表 getResponseHeader('key') 仅获取指定的HTTP响应头
XMLHttpRequest常用属性
属性 说明 onreadystatechange 返回或设置异步请求的事件处理程序 readyState 返回状态码：0：未初始化；1：打开；2：发送；3：正在接收；4：已加载 responseText 使用字符串返回HTTP响应 responseXML 使用XML DOM对象返回HTTP响应,返回的是一个对象，不是xml字符串。 status 返回HTTP状态码
Ajax使用注意
xhr只能向同一个域中的相同端口号、相同协议的url发起请求，不能跨域,否则会引起错误。 为了浏览器兼容,get请求时最好为send()传递null参数。 在创建了xhr对象后立刻设置onreadystatechange事件，这样就能监视到所有的状态。如果不需要监视其他状态只监视readyState==4的状态则可以在send()之后设置。 get请求时，请求中的QueryString的参数名称与参数值最好使用encodeURIComponent()进行编码。否则在某些浏览器下无法获取该值，比如IE. post请求时，为了像表单那样提交数据需要设置请求的Content-Type为：application/x-www-form-urlencoded。send("键=值&键=值") 解析json格式时eval("("+json+")")。但有安全性问题。
-》使用注意 -》示例2：使用post方式提交 需要设置头信息：xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); -》如果中文乱码的解决：在客户端使用window.encodeURIComponent()进行编码 在服务器端使用Server.UrlDecode()进行解码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title>
<script type="text/javascript"> window.onload = function () { var btnGettime = document.getElementById("btnGetTime"); btnGettime.onclick = function () {
//--------GET------------- ////1.创建对象 //var xhr = new XMLHttpRequest(); ////2.打开连接 //xhr.open('get', 'GetTime.ashx?title=xlb', true); ////3.配置 //xhr.onreadystatechange = function () { // //如果成功返回则展示 // if (xhr.readyState==4) {//通信成功 // if (xhr.status == 200)//成功返回信息 // { // var showTime = document.getElementById('showTime'); // showTime.innerHTML = xhr.responseText; // } // } //}; ////4.发送 //xhr.send(null);//当使用GET请求时，最好设置为null
//-----------POST--------------
var showTime = document.getElementById('showTime'); showTime.innerHTML = '<img src="images/loading.gif" />';
//1.创建对象 var xhr = new XMLHttpRequest(); //2.打开连接 xhr.open('post', 'GetTime.ashx', true); //3.配置 xhr.onreadystatechange = function () { //如果成功返回则展示 if (xhr.readyState == 4) {//通信成功 if (xhr.status == 200)//成功返回信息 { var showTime = document.getElementById('showTime'); showTime.innerHTML = xhr.responseText; } } }; //4.发送 //以post请求发送请求 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send('title=yg');
}
} </script>
</head> <body> <input type="button" id="btnGetTime" value="获取当前时间" /> <div id="showTime">
</div> </body> </html>
--------GetTime.ashx----------
using System; using System.Collections.Generic; using System.Linq; using System.Threading; using System.Web;
namespace t1_HelloWorld { /// <summary> /// GetTime 的摘要说明 /// </summary> public class GetTime : IHttpHandler {
public void ProcessRequest(HttpContext context) {
Thread.Sleep(5000);
string title = context.Request["title"]; context.Response.ContentType = "text/plain"; context.Response.Write(DateTime.Now.ToString()+"---"+title); }
public bool IsReusable { get { return false; } } } }
=======================================================
使用jquery完成异步操作 -》参考文档介绍提供的异步api url：请求地址 type：请求方式，主要是get、post data:{}：请求的数据 dataType:返回值的类型，主要有xml、text、json、script、html success:function(data){...}成功的回调函数（4，200）