AJAX流程
2015-11-23 00:20
274 查看
创建一个XHR对象
或者写成try/catch形式
初始化请求 open()
设置请求的HTTP头信息 setRequestHeader() 注:必须在open()后调用。
发送请求 send()
指定请求状态改变时的事件句柄处理 onreadystatechange
获取当前请求状态 readyState对象
0(未初始化)-对象已经创建,但未调用open方法初始化;
1(初始化)-对象已经初始化,但未调用send方法;
2(发送数据)-send方法已经被调用,但是HTTP状态和HTTP头未知;
3(数据传送中)-已经开始接收数据,但由于响应数据和HTTP头信息不全,这时尝试获取数据会出现错误;
4(完成)-数据接收完毕。
返回当前请求的HTTP状态码 status属性
从返回信息中获取指定的HTTP头
获取返回信息的所有HTTP头 getAllResponseHeaders()
取得返回的数据
取消当前请求
最终版本
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
或者写成try/catch形式
try{ var xmlhttp = new XMLHttpRequest(); }catch(e){ var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
初始化请求 open()
xmlhttp.open("POST","ajax_test.php",true); xmlhttp.open("GET","ajax_test.php",true);
设置请求的HTTP头信息 setRequestHeader() 注:必须在open()后调用。
//用POST方法提交请求时,设置编码类型 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //提交COOKIE xmlhttp.setRequestHeader("COOKIE","cookiename=cookievalue"); //提交XML xmlhttp.setRequestHeader("Content-Type","text/xml");
发送请求 send()
xmlhttp.send()
指定请求状态改变时的事件句柄处理 onreadystatechange
xmlhttp.onreadystatechange = function(){ //code }
获取当前请求状态 readyState对象
0(未初始化)-对象已经创建,但未调用open方法初始化;
1(初始化)-对象已经初始化,但未调用send方法;
2(发送数据)-send方法已经被调用,但是HTTP状态和HTTP头未知;
3(数据传送中)-已经开始接收数据,但由于响应数据和HTTP头信息不全,这时尝试获取数据会出现错误;
4(完成)-数据接收完毕。
if(xmlhttp.readyState == 4){ //code }
返回当前请求的HTTP状态码 status属性
if(xmlhttp.status == 200){ //code }
从返回信息中获取指定的HTTP头
xmlhttp.getResponseHeader("property")
获取返回信息的所有HTTP头 getAllResponseHeaders()
xmlhttp.getAllResponseHeaders()
取得返回的数据
xmlhttp.responseText; //XML xmlhttp.responseXML;
取消当前请求
xmlhttp.abort();
最终版本
//创建XHR对象
try{ var xmlhttp = new XMLHttpRequest(); }catch(e){ var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
//初始化请求
xmlhttp.open("POST","ajax_test.php",true);
//设置请求的HTTP头信息
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定请求状态改变时的事件句柄处理
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
//获取返回信息的所有HTTP头
alert(xmlhttp.getAllResponseHeaders());
//取得返回的数据
alert(xmlhttp.responseText);
alert(xmlhttp.responseXML);
}
}
//发送请求
xmlhttp.send();
相关文章推荐
- 草莓派入门(五)
- UVA 11775 Unique Story(DP)
- think3.2 单页内容
- Go实现Web后端基础功能(附源码)
- freemarker 异常处理
- 关于思想,关于那些事
- 实时通讯库 libre/librem/restund/baresip
- OSGi在淘宝内部的使用
- Spring 上传文件
- TCP之close_wait
- thinphp3.2 表格案例
- 删除已经配置的类库和移除CocoaPods
- Effective C++ 笔记 第六部分 继承与面对对象设计
- Spring MVC 详解
- 树莓派入门(四)
- 由chmod改系统文件权限引ssh登录报ssh_exchange_identification: read: Connection reset by peer无法登陆问题
- OSGi之Bundle
- isInterleave
- BC #63 div(2) #2
- 树莓派入门(三)