-------------------------------------------------------------------
认识AJAX
-------------------------------------------------------------------
全称:Asynchronous Javascript And XML 异步JavaScript和XML(eXtensive Markup Language可扩展标记语言)
作用:
是指一种创建交互式、快速动态网页应用的网页开发技术,增强用户体验。
无需重新加载整个网页的情况下,能够更新部分网页的技术。
内容:是几个旧技术的融合。
①异步数据获取技术:XMLHttpRequest
②基于标准的表示技术:XHTML与CSS
③动态显示和交互技术:Documnet Object Model(文档对象模型)
④数据交互和操作技术:XML与XSLT
⑤JavaScript:将上述技术融合在一起。
①是所有技术的基础。
实例:
在没有使用AJAX的时候:
如果点击某个事件发生网页跳转,服务器繁忙的情况下。用户可能会面临一段空白界面的等待。
使用Ajax可以实现事件在后台异步进行,用户仍然能看到原始界面,直至完全跳转。
实现Ajax核心代码的五个步骤(以IE浏览器为例):
一、实例化对象:var 对象=new ActiveXObject("Msxml2 XMLHTTP或者Microsoft.XMLHTTP"); //其余浏览器new XMLHttpRequest();
//像IE浏览器这样内置对象:就是实现异步提交数据以及返回结果作用。
在不清楚客户端所使用的浏览器类型最好用if-else进行window.两种异步对象类型判断是否存在(不存在警告该浏览器不支持AJAX)。
var 对象为boolean类型。
二、设置提交方式和目标网页:
对象.open(“参数1”,“参数2”,参数3);
参数1:提交方式,POST或者GET
参数2:目标网页
参数3:是否使用异步请求TRUE|FALSE
三、对象调用状态改变函数:
对象.onreadystatechange=function(){//逻辑代码}
或者 对象.onreadystatechange=函数名; function 函数名(){}
四、调用状态函数中对5个状态要做的行为进行设置(不一定都要设置):
对象.readystate()==状态;
0:未初始化状态,对象创建,open();函数尚未调用
1:初始化完成,调用open函数以后。
2:初始化完成,调用send函数以后。
3:数据传输中断,但是未完全传输完毕。
4:数据传输中断,完全传输完毕。
常用的行为有:
将对象中响应结果获取文本内容 对象.responeText; 如果要获取XML内容 就是对象.responeXML;
而对于响应结果放在当前网页的那个ID-div、ID-span标签 区域内直接将上述内容赋值到:
ID.innerHTML或者ID.innerText表示在标签所在区域以什么样的格式表达。
如果是TEXT则忽略标签的效果变成文本形式。
五、调用发送请求函数:
函数send();//GET和POST都可以没有参数或者NULL,其中POST传出的*参数*以字符串的形式传出。
融合:将这五个步骤全部放与<JavaScript></JavaScript>标签的*自定义函数*中。