ajax-day01

发布时间：2020-12-16 02:46:35 所属栏目：百科来源：网络整理

导读：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

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属性状态

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!