AJAX为 ”Asynchronous Javascript and XML“(异步Javascript与XML技术),是一种广泛应用于网页开发的技术。
AJAX是一种在2005年由google推广的编程模式。它并不是一种新的编程语言,而是一种使用现有的标准的新方法。AJAX基于Javascript和HTTP请求。
AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行相应的更新。
传统的网页(不使用AJAX)如果需要更新内容,必须重新载入整个网页面。
AJAX请求
AJAX 的 XMLHttpRequest 对象(XMLHttpRequest是AJAX的基础)
XMLHttpRequest用于在后台与服务器交换数据。(就是可以进行网页的部分更新)
所有现代浏览器(IE7+、firefox和Opera)均内建XMLHttpRequest对象。
创建 XMLHttpRequest对象的语法: variable = new XMLHttpRequest ( );
XMLHttpRequest对象 向 服务器发送请求:使用XMLHttpRequest 对象的 open() 和 send () 方法。
open( method, url, async ) // 规定请求的类型、 URL 以及 是否 异步处理请求。
method: // 请求的类型(GET 或 POST)
url : // 文件在服务器上的位置
async: // true(异步) 或 false (同步)
send ( string ) // 将请求发送到服务器
string: 仅用于POST请求
xmlhttp.open( "GET" , "test.txt", true );
xmlhttp.send( ”test“ );
GET 与 POST 方法的选择
与 POST 相比,GET更简单 也 更快, 并且在大部分情况下都能用。
在以下情况中,请使用 post 请求:
1.无法使用 缓存文件(更新 服务器上的 文件或 数据库)
2. 向 服务器 发送大量的 数据(POST 没有数据量的限制)
3. 发送包含未知字符的用户输入时,POST 比 GET 更稳定 也更可靠。
需要 像 HTML 表单 那样 POST 数据, 请使用 setRequestHeader ( ) 来添加HTTP 头(与GET方法的区别)。
sendRequestHeader(header, value):向 请求 添加 HTTP 头。
header: // 规定的头名称
value: // 规定头的值
通过 AJAX,JavaScript 无需等待服务器的响应,而是在等待服务器响应时执行其他脚本,当响应就绪后对响应进行处理。
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数。
AJAX响应
如果需要获得来自服务器的响应, 请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText 属性: 获得 字符串形式的响应 数据。
Eg: document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML属性 : 获得XML形式的响应数据。如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性 。
Eg:xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; }
document.getElementById("myDiv").innerHTML=txt;
AJAX - onreadystatechange 事件
当 请求 被发送到 服务器时,我们需要执行一些记忆响应的 任务。
每当 readyState 改变时,就会触发 onreadystatechange事件。
readyState 属性 存有 XMLHttpRequest 的 状态 信息。
XMLHttpRequest 对象 的 三个重要的属性:
onreadystatechange // 存储函数(或函数名),每当readyState属性改变时,就会调用该函数
readyState // 存有 XMLHttpRequest 的状态。从0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已经完成,并且响应已就绪
status 200: “OK” ; 404:“未找到页面” 。
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
onreadystatechange 事件被触发 4 次,对应着 readyState 的每个变化。
BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。
当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。
这个插件的用法很简单。
1 阻止用户与页面交互:$.blockUI();
2 自定义提示信息:$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
3 自定义显示样式:$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });
4 解除对页面的锁定:$.unblockUI();
5 如果要使用默认设置来同步所有的AJAX请求动作,代码如下:$().ajaxStart($.blockUI).ajaxStop($.unblockUI);