1.介绍
1.描述从基于Web的应用到基于数据的应用的转换。
2.Ajax的核心是JavaScript对象XmlHttpRequest(异步请求的技术)。XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
3.独立于 Web服务器软件的浏览器技术,用于创建更好更快以及交互性更强的 Web应用程序的技术。可以提高系统性能,优化用户界面
2.主要包含的技术
基web标准(standards-based presentation)XHTML+CSS的表示;
使用 DOM(Document Object Model)进行动态显示及交互
使用 XML和 XSLT进行数据交换及相关操作;
使用 XMLHttpRequest进行异步数据查询、检索
3.优点和缺点
优点 ->更迅捷的响应速度
无页面刷新,适合大量的数据
例如:
1.AJAX应用可以仅向服务器发送并取回必需的数据,
2.使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据
3.Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
缺点
1.不能发送图片只能传送字符串.
2.不能跨站,跨域名发信息.
4.Ajax有两种方式:
1.iframe
2.xmlhttp-XmlHttpRequest
5.get,post方式,同步异步区别
// readyState的取值如下:0-未初始化,1-正在装载,2-装载完毕,3-交互中,4-完成.
1.同步和异步的区别:
1.同步适合少量数据,它是需要等待的,异步是适合大批量数据,它无需等待
2.异步需要一个回调函数.
异步需要在open和send之间加一个:
XmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//消息头
2.get-send()不可以传参,
1.同步
var url = "AjaxServlet.do?timerId=" + (new Date()).getMilliseconds();
//创建一个请求对象(协议)
var xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");
//打开链接,创建一个新的http请求(并指定此请求的方法、url、验证信息)
xmlHttpReq.open("GET", url, false);
xmlHttpReq.send();
alert("getSyncRequest()"); //执行完后台再输出.
//将响应信息作为字符串返回 Thread.sleep(3000); 3秒钟后连续输出.
alert(xmlHttpReq.responseText);
2.异步-较同步的速度快.
//时间戳-缓存问题.
var url = "AjaxServlet.do?name=zhangsan&timerId="+ (new Date()).getMilliseconds();
//创建一个请求对象(协议)
xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");
xmlHttpReq.onreadystatechange = HandleStateChange;
//打开链接,创建一个新的http请求(并指定此请求的方法、url、验证信息)
xmlHttpReq.open("GET", url, true);
xmlHttpReq.send("age=444");//Get方式不能用send传参.
alert("getNSyncRequest()"); //先输出,再等待响应结果.
function HandleStateChange() {
if (xmlHttpReq.readyState == 4) {
alert("HandleStateChange:" + xmlHttpReq.responseText);//返回响应结果
}
}
3.post-send()可以传参,传参需要头文件信息.
1.同步(open - false)
var url = "AjaxServlet.do?name=zhangsan&timerId="+ (new Date()).getMilliseconds();
//创建一个请求对象(协议)
var xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");
//打开链接,创建一个新的http请求(并指定此请求的方法、url、验证信息)
xmlHttpReq.open("POST", url, false);
xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //头文件
xmlHttpReq.send("age=555&sss=ddd");
alert("This postSyncRequest"); //等后台执行完,再输出
alert(xmlHttpReq.responseText);
2.异步(true)
//时间戳
var url = "AjaxServlet.do?name=zhangsan&timerId="+ (new Date()).getMilliseconds();
//创建一个请求对象(协议)
var xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");
xmlHttpReq.onreadystatechange = HandleStateChange;
//打开链接,创建一个新的http请求(并指定此请求的方法、url、验证信息)
xmlHttpReq.open("POST", url, true);
xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpReq.send("age=444"); //post可以有send传参.
alert("This postNSyncRequest");//先输出,再等待响应结果
function HandleStateChange() {
if (xmlHttpReq.readyState == 4) {
alert("" + xmlHttpReq.responseText);
}
}
6.处理从服务器得到的数据的两种方式
1.以文本字符串的方式返回服务器的响应.
2.以XMLDocument对象方式返回响应.
7.浏览器兼容:
1. 解决方案1
function createXMLHttp() {
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
var aVersions = [ "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0",
"MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "Microsoft.XMLHttp" ];
for ( var i = 0; i < aVersions.length; i) {
try {
var oXmlHttp = new ActiveXObject(aVersions[i]);
return oXmlHttp;
} catch (oError) {
}
}
}
}
2.解决方案2(引入js)
json数据格式对后台数据返回,以对象的方式响应 eval("("+{code:'sss',name:'name',gender:'gender'}+")")json
1.学生信息填写框,javascript进行动态验证.
2.document.getElementsByClassName("xxx");//兼容firefox 不兼容ie自定义getElementsByClass(className,scope)