Ajax
1:ajax引擎(XMLHttpRequest)为对象注册一个监听器(事件处理函数,对状态的改变事件(readyStatechange)监听)
2:等待用户执行操作(例如点击)
3:触发了事件处理代码
4:调用ajax引擎
5:发送请求,ajax引擎被调用后单独向服务器发送请求(不是整个界面)——异步请求
6:服务器接受到了处理请求--开始处理
7:服务器将处理结果(xml或者文本)返回给了ajax引擎
8:监听相应数据
9:监听器对GUI数据更新
1:获得引擎XmlHttpRequest对象
注意点:ie与别的浏览器获得方式不同
function getXmlHttpRequest(){
var xhr=null;
if((typeof XMLHttpRequest)!='undefined'){
xhr=new XMLHttpRequest();
alert('dom')
}else{
xhr=new ActiveXObject('Microsoft.XMLHttp');
alert('IE')
}
return xhr;
}
重要参数:onreadystatechange——注册一个监听器(绑定时间处理函数)
readyState返回与服务器通讯状态码Number类型:
0对象创建,但是没有初始化
1对象建立但是没有调用
2发送数据(send方法被调用)
3数据传送中
4响应结束
responseText——服务器返回的文本
responseXML——服务器返回的xml dom对象
status 获得状态码:
200;404;500
案例:
function getXmlHttpRequest(){
var xhr=null;
if((typeof XMLHttpRequest)!='undefined'){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
function fun(){
//1:获得ajax核心对象
var xhr=getXmlHttpRequest();
//打开一个新的请求
xhr.open('get','students.json',true);
//添加一个监听器
//监听器---ajax核心对象状态
xhr.onreadystatechange=function(){
//状态码来监听
//xhr.status---服务器响应状态 ---200 xhr.readyState---ajax状态码 4
if(xhr.status==200&&xhr.readyState==4){
//响应成功
var data=xhr.responseText;
var stus=eval(data);
alert(stus[0].name)
}
}
//发送请求
xhr.send(null);
}
</script>
--“Asynchronous Javascript And XML”(异步JavaScript和XML ),是指一种创建交互式网页应用的网页开发技术。
1:ajax引擎(XMLHttpRequest)为对象注册一个监听器(事件处理函数,对状态的改变事件(readyStatechange)监听)
2:等待用户执行操作(例如点击)
3:触发了事件处理代码
4:调用ajax引擎
5:发送请求,ajax引擎被调用后单独向服务器发送请求(不是整个界面)——异步请求
6:服务器接受到了处理请求--开始处理
7:服务器将处理结果(xml或者文本)返回给了ajax引擎
8:监听相应数据
9:监听器对GUI数据更新
1:获得引擎XmlHttpRequest对象
注意点:ie与别的浏览器获得方式不同
function getXmlHttpRequest(){
var xhr=null;
if((typeof XMLHttpRequest)!='undefined'){
xhr=new XMLHttpRequest();
alert('dom')
}else{
xhr=new ActiveXObject('Microsoft.XMLHttp');
alert('IE')
}
return xhr;
}
重要参数:onreadystatechange——注册一个监听器(绑定时间处理函数)
readyState返回与服务器通讯状态码Number类型:
0对象创建,但是没有初始化
1对象建立但是没有调用
2发送数据(send方法被调用)
3数据传送中
4响应结束
responseText——服务器返回的文本
responseXML——服务器返回的xml dom对象
status 获得状态码:
200;404;500
案例:
<button οnclick="fun();">click me</button>
function getXmlHttpRequest(){
var xhr=null;
if((typeof XMLHttpRequest)!='undefined'){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
function fun(){
//1:获得ajax核心对象
var xhr=getXmlHttpRequest();
//打开一个新的请求
xhr.open('get','students.json',true);
//添加一个监听器
//监听器---ajax核心对象状态
xhr.onreadystatechange=function(){
//状态码来监听
//xhr.status---服务器响应状态 ---200 xhr.readyState---ajax状态码 4
if(xhr.status==200&&xhr.readyState==4){
//响应成功
var data=xhr.responseText;
var stus=eval(data);
alert(stus[0].name)
}
}
//发送请求
xhr.send(null);
}
</script>