|
AJAX
对于WEB开发者来说，AJAX这个词一点也不陌生，现在说说大概会想到以下几点：
•无刷新改变页面数据
•异步通信
•$.ajax、$.get、$.post
•Asynchronous Javascript And XML
•...
AJAX就是一种交互式的网页应用技术，主要目的的提升用户体验，其原理是利用 Javascript的XMLHttpRequest对象与服务器通信获取数据后填充在页面中，从而实现不刷新整个页面却能把信息反馈给用户的效果。
通常使用的AJAX
我们通常使用的AJAX应该绝大多数都是jQuery封装好的，所以时间久了我们会对jQuery 形成很大的依赖。而且，在有些使用场景里，我们只用到了AJAX却把整个jQuery文件包含进来，这样会影像网页的加载时间（在用户网络不好的情况下更糟糕）。
所以，掌握原生的AJAX写法还是很有必要的，不仅能摆脱jQuery的依赖，还能进一步加深对异步通信的理解。如果抽时间再去研究XMLHttpRequest对象那就更赞了。
原生的AJAX
•生成XMLHttpRequest对象
| 代码如下 |
复制代码 |
var XMLReq;
if (window.XMLHttpRequest) {
XMLReq = new XMLHttpRequest();
} else {
XMLReq = new ActivateXObject('Microsoft.XMLHTTP');
}
|
在IE浏览器里没有XMLHttpRequest这个对象，要使用 ActivateXObject('Microsoft.XMLHTTP')来替代。
•向服务器发送请求
| 代码如下 |
复制代码 |
|
// for GET method
XMLReq.open('GET', 'ajax_get.html', true);
XMLReq.send();
// for POST method
XMLReq.open('POST', 'ajax_post.html', true);
XMLReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XMLReq.send('key=value&key2=value2');
|
上面代码中XMLReq.open()的第三个参数就是控制是否异步请求的，当为true的时候就是我们说的异步通信，为false的时候就按照正常的javascript逻辑顺序执行。真正异步的目的就是在向服务器请求数据的时候不影响正常的javascript代码执行，否则一旦请求时间过长或者出错可能影响整个页面的浏览。
•处理服务器响应数据
| 代码如下 |
复制代码 |
|
XMLReq.onreadystatechange = function () {
if (4 == XMLReq.readyState && 200 == XMLReq.status) {
var data = XMLReq.responseText;
// return xml data
// var data = XMLReq.responseXML;
}
}
|
一个完整的AJAX请求过程可以对照XMLReq.readyState参数清晰的理解清楚，不同的值表示过程如下：
readyState 过程变化
0 请求未初始化
1 服务器连接已建立
2 请求已接收
3 请求处理中
4 请求已完成，且响应已就绪
Simple Demo
ajax.html
| 代码如下 |
复制代码 |
|
<html>
<script type="text/javascript" charset="utf8">
function my_ajax(url, callback) {
var XMLReq;
if (window.XMLHttpRequest) {
XMLReq = new XMLHttpRequest();
} else {
XMLReq = new ActivateXObject('Microsoft.XMLHTTP');
}
XMLReq.onreadystatechange = function() {
// alert(XMLReq.readyState);
if (4 == XMLReq.readyState && 200 == XMLReq.status) {
callback(XMLReq.responseText);
}
}
XMLReq.open('GET', url, false);
XMLReq.send();
}
function btn_click() {
my_ajax('ajax_get.html', function (data) {
document.getElementById('result').innerHTML = data;
}
);
alert('ok');
}
</script>
<body>
<input type="button" value="Click" onclick="btn_click()" />
<div id="result"></div>
</body>
</html>
|
ajax_get.html
| 代码如下 |
复制代码 |
|
<div> I am ajax get data </div>
|
本文意在抛砖引玉，有空的时候能看一看原生的东西，尽管比较复杂。
使用XMLHttpRequest 实现ajax效果
这里我们用客户端通过XMLHttpRequest 请求服务端获取当前系统时间，实现异步交互！
客户端myAjax.html代码：
| 代码如下 |
复制代码 |
|
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>AJAXDEMO</title>
</head>
<mce:script language="javascript" type="text/javascript"><!--
function btn_onclick()
{
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象，相当于
if (!xmlhttp) {
alert("创建xmlhttp对象异常！");
return false;
}
xmlhttp .open("POST","GetDate1.ashx?&ts" +new Date(),false);//准备向服务器的GetDate1.ashx发出Post请求
xmlhttp.onreadystatechange = function() //需要监听onreadyStatechange事件
{
if(xmlhttp.readyState == 4) //服务器完成
{
if(xmlhttp.status == 200) //如果状态码为200则是成功
{
document.getElementById ("Text1").value=xmlhttp.responseText; //responseText属性为服务器返回的文本
}
else
{
alert("AJAX服务器返回错误！");
}
}
}
xmlhttp.send(); //才开始发送请求
}
// --></mce:script>
<body>
<input id="Text1" type="text" disabled="disabled" /><input id="button1" type="button" value="显示系统时间" onclick="btn_onclick()" />
</body>
</html>
|
服务端GetDate1.ashx 代码 (用ashx文件来处理 ,不需要HTML代码,只需服务端处理返回数据 )
| 代码如下 |
复制代码 |
|
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
context.Response.Write(DateTime.Now.ToString()); //显示服务端时间
}
|
|
