ajax-day01
get
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <!-- 6 1.什么是ajax? 7 ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下 8 --> 9 <script type="text/javascript"> 10 //这里就不用到JQ了 11 12 window.onload = function(ev){ 13 var oBtn = document.querySelector("button"); 14 oBtn.onclick = function(ev1){ 15 //1.创建一个异步对象 16 var xmlhttp = new XMLHttpRequest(); 17 18 //2.设置请求方式和请求地址 19 /* 20 method:请求的类型:get & post 21 url:文件在服务器上的位置 22 async:true(异步)或false(同步) 23 */ 24 xmlhttp.open("GET","index.html",true); 25 26 //3.发送请求 27 xmlhttp.send(); 28 29 //4.监听状态的变化 30 xmlhttp.onreadystatechange = function(ev2){ 31 /* 32 0:请求未初始化 33 1:服务器连接以建立 34 2:请求已接收 35 3:请求处理中 36 4:请求已完成,且响应已就绪 37 */ 38 if(xmlhttp.readyState === 4){ 39 //判断是否请求成功 40 if(xmlhttp.status >= 200 && xmlhttp.status <300 || xmlhttp.status === 304){ 41 //5.处理返回的结果 42 console.log("接收到服务器返回的数据"); 43 }else{ 44 console.log("没有接收到服务器返回的数据"); 45 } 46 } 47 } 48 } 49 } 50 </script> 51 </head> 52 53 <body> 54 <button>发送请求</button> 55 </body> 56 </html>
异步对象onreadystatechange的作用是什么
发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态,XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能。这类似于回调函数的做法。
onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果,如:
ajaxObj=createAjaxObject();
var url="/MyTodoes/FetchText?id="+id;
ajaxObj.open("Get",url,true);
ajaxObj.onreadyStateChange=changeTabCallBack;
ajaxObj.send(null);
onreadyStateChange事件是在readyState属性发生改变时触发的,readyState的值表示了当前请求的状态,在事件处理程序中可以根据这个值来进行不同的处理。 readyState有五种可取值0:尚未初始化,1:正在加载,2:加载完毕,3:正在处理;4:处理完毕。一旦readyState属性的值变成了4,就可以从服务器返回的响应数据进行访问了。
通常在事件中判断readyState的值是在请求完毕时才做处理,如:
function changeTabCallBack(){
if(ajaxObj.readyState==4){
// 下一步验证
}
}
Status存储了服务器端返回的Http请求响应代码,它表示请求的处理结果,常见响应代码的含义如右。
在Ajax开发中,最常用就是200这个响应码,代码如下:
function changeTabCallBack(){
if(ajaxObj.readyState==4){
if(ajaxObj.status==200){
// 服务端返回了正确数据,开始响应处理
}
}
}
Http状态码 含义
200 请求成功
202 请求被接受但处理未完成
400 错误请求
404 请求资源未找到
500 内部服务器错误
异步对象readyState属性保存的是什么
readystate取值 描述
0 描述一种"未初始化"状态;此时,已经创建一个xmlhttprequest对象,但是还没有初始化。
1 描述一种"发送"状态;此时,代码已经调用了xmlhttprequest open()方法并且xmlhttprequest已经准备好把一个请求发送到服务器。
2 描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。
3 描述一种"正在接收"状态;此时,已经接收到http响应头部信息,但是消息体部分还没有完全接收结束。
4 描述一种"已加载"状态;此时,响应已经被完全接收。
XMLHttpRequest对象的status属性状态