AJAX:”Asynchronous JavaScript and XML” 中文意思:异步JavaScript和XML。 指一种创建交互式网页应用的网页开发技术。 AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词。
不是指一种单一的技术,而是有机地利用了一系列相关的技术: web标准( Standards-Based Presentation )XHTML+CSS的表示, 使用 DOM( Document Object Model )进行动态显示及交互, 使用 XML 和 XSLT 进行数据交换及相关操作, 使用 XMLHttpRequest 进行异步数据查询、检索. 简单理解为:JavaScript + XMLHttpRequest + CSS +服务器端 的集合.
网页请求回执过程(请求响应模式)
AJAX优点
- Ajax在本质上是一个浏览器端的技术
- Ajax技术之主要目的在于局部交换客户端及服务器间之数据
- 这个技术的主角XMLHttpRequest 的最主要特点,在于能够不用重新载入整个版面来更新资料,也就是所谓的Refresh without Reload(轻刷新) 与服务器之间的沟通,完全是透过Javascript 来实行
- 使用XMLHttpRequest 本身传送的数据量很小,所以反应会更快,也就让网络程式更像一个桌面应用程序
- AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料,最后再由Javascript 或DOM 来帮你呈现结果,因为所有动作都是由Javascript 代劳,所以省去了网页重载的麻烦,使用者也感受不到等待的痛苦
XMLHTTPRequest
Ajax应用程序的核心就是它。
XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。
简而言之:它可以异步从服务器端获取txt或者xml数据
创建XMLHTTPRequest对象
使用XMLHttpRequest对象 按照下面模式,可以同步地XMLHttpRequest对象:
创建对象; - new (叫助手过来)
创建请求; - open (告诉他要去做的事情)
发送请求; - send (去吧)
一、
先来创建XMLHttpRequest对象 、Firefox、safari和Opera中创建该对象的JavaScript代码为:
var xhr = new XMLHttpRequest();
在IE5/6中代码为:
var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
注意,JavaScript区分大小写。
二、
为XMLHttpRequest对象设置请求参数
1.GET方式:
1.1设置参数
xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
1.2GET方式请求可以设置浏览器不使用缓存
xhr.setRequestHeader("If-Modified-Since", "0");
1.3发送:
xhr.send(null);//GET方式
2.POST方式:
2.1设置参数:
xhr.open("POST", "GetAreasByAjax.aspx", true);
2.2添加请求头:
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
2.3发送:
xhr.send("isAjax=1&na=123");//POST方式
设置回调函数
异步使用XMLHttpRequest对象
异步使用XMLHttpRequest对象时,必须使用:onreadystatechange事件。
使用模式应该是:
- 创建该对象;-new
- 设置readystatechange事件触发一个回调函数; -onreadystatechagne
- 打开请求;-open
- 发送请求;-send
- 注:在回调函数中检查readyState属性,看数据是否准备就绪(是否等于4)。
- 如果没有准备好,隔一段时间再次检查。因为数据没有下载完时,我们无法使用它的属性和方法。
- 如果已经准备好,就继续往下执行;
XMLHttpRequest常用方法 | |
方法 | 说明 |
abort | 取消请求 |
open | 需要使用多个参数,第一个设置方法属性,第二个设置目标URL,第三个指定是同步(false)还是异步(true)发送请求 |
send | 发送请求到服务器 |
setRequestHeader | 添加自定义HTTP头到请求 |
getAllResponseHeaders | 获取HTTP响应头的整个列表 |
getResponseHeader | 仅获取指定的HTTP响应头 |
【编写回调函数】
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);
}
}
异步对象常用的属性 | |
属性 | 说明 |
onreadystatechange | 返回或设置异步请求的事件处理程序 |
readyState | 返回状态码:0:未初始化;1:打开;2:发送;3:正在接收;4:已加载 |
responseText | 使用字符串返回HTTP响应 |
responseXML | 使用XML DOM对象返回HTTP响应 |
status | 返回HTTP状态码 |
【异步对象readyState属性】
readyState属性
readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
0:未初始化。对象已经创建,但还未初始化,即还没调用open方法;
1:已打开。对象已经创建并初始化,但还未调用send方法;
2:已发送。已经调用send 方法,但该对象正在等待状态码和头的返回;
3:正在接收。已经接收了部分数据,但还不能使用该对象的属性和方法,因为状态和响应头不完整;
4:已加载。所有数据接收完毕
AjaxDemo.aspx
<title></title>
<script src="../Js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGetDate").cli(function () {
//开始通过Ajax向服务器发送请求
var xhr;
if (XMLHttpRequest) {//表示用户使用的高版本IE,谷歌,狐火等浏览器
xhr = new XMLHttpRequest();
} else {// 低IE
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", "GetDate.ashx", true);
xhr.send();//开始发送
//回调函数:当服务器将数据返回给浏览器后,自动调用该方法。
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {//表示服务端已经将数据完整返回,并且浏览器全部接受完毕。
if (xhr.status == 200) {//判断响应状态码是否为200.
alert(xhr.responseText);
}
}
}
});
});
</script>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="获取服务端时间" id="btnGetDate" />
</div>
</form>
</body>
GetDate.ashx.cs
context.Response.ContentType = "text/plain";
context.Response.Write(DateTime.Now.ToString());
xhr.open("get", "GetDate.ashx?name=zhangsan&age=12", true);
context.Response.Write(context.Request.QueryString["name"]);
<title></title>
<script src="../Js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGetDate").click(function () {
//开始通过Ajax向服务器发送请求
var xhr;
if (XMLHttpRequest) {//表示用户使用的高版本IE,谷歌,狐火等浏览器
xhr = new XMLHttpRequest();
} else {// 低IE
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", "GetDate.ashx?name=zhangsan&age=12", true);
xhr.send();//开始发送
//回调函数:当服务器将数据返回给浏览器后,自动调用该方法。
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {//表示服务端已经将数据完整返回,并且浏览器全部接受完毕。
if (xhr.status == 200) {//判断响应状态码是否为200.
alert(xhr.responseText);
}
}
}
});
});
</script>
<input type="button" value="获取服务端时间" id="btnGetDate" />
context.Response.Write(context.Request.Form["name"]);
//或者context.Response.Write(context.Request["name"]);
//让他自己判断是queryString还是form