Ajax是一种不刷新整个页面便可与服务器通信的技术。
1,原理:在页面显示时,利用JS代码,在页面和服务器之间构建了一个中间媒介:Ajax引擎,它允许页面异步的动态的向服务器发送请求,然后接受响
应更新页面
2,应用场景:百度搜索框,谷歌地图,即时有效性验证
3,Ajax包含的技术
Ajax是多种技术的组合:Javascript,XHTML,CSS,DOM,XML和XMLHttpRequest
XML:用来携带信息
XHTML,CSS:用来标准化显示结果
DOM:实现动态显示和交互
XMLHttpRequest:异步数据读取
Javascript:总指挥,绑定的处理所有数据
4,XMLHttpRequest
1,创建方式不相同但使用方式相同
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox, Opera 8.0+, Safari
s xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
2,可像桌面应用程序一样只进行数据层面的交互
3,XMLHttpRequest的方法
1,abort() 停止当前请求
2,getAllResponseHeaders
3,getResponseHeader("name");
4,open("method","url",isAsync)
1,为了避免缓存带来的影响,在url后面拼接当前日期字符串实现每次请求的不同
2,若单纯的只是想请求服务器数据时,使用method=GET,这时send(data)无效,并不能发送data,
不过可以在url携带一些参数
当method=POST时,需要设置Content-type=application/x-www-form-urlencoded
,以告知服务器请求数据已使用URL编码
5,send(data)
6,setRequestHeader(name,value);
4,XMLHttpRequest的属性
1,onreadystatechange 状态改变的事件触发器,当赋值为一个函数时,每当XMLHttpRequest对象状态发生改变,就调用一次该函数
此触发器由服务器通过改变readyState的值来触发
2,readyState 对象状态,当此值发生改变时,就执行onreadystatechange注册的函数
0 :未初始化,未调用open方法
1 :正在加载,open已调用,send 未调用
2 :send以调用,请求开始
3 :代表交互中,服务器正在发送响应
4 :代表响应完成
3,responseText 文本方式的响应内容
4,responseXML 把响应内容包装成XML 的DOM 对象
只有响应头包含text/xml时才可以使用
5,status 响应状态码,status标识响应状态,readyState标识请求状态
6,statusText 响应状态文本信息
5,开发步骤
有固定的步骤,利用XMLHttpRequest的方法和属性控制程序逻辑
1,创建XMLHttpRequest对象
2,注册onreadystatechange 的事件处理函数
3,open 打开到服务器的连接
4,send 发送数据
5,XMLHttpRequest 的一些属性会被服务器修改
readyState status reqponseText respnseXML
|