数据交互 - Ajax初体验

Posted 2020-08-15

2016-10-22　　　　12:22:42

相关概念

AJAX（Asynchronous Javascript And XML）即“异步javascript和XML”；

是指一种实现客户端和服务器的数据传递的网页开发技术；

核心：局部刷新，异步加载；

即“在不需要刷新页面的情况下，就可以与Web服务器交换数据，产生局部刷新的效果”。

基础步骤

　　第一步 ：先创建AJAX对象

 1     /*兼容处理*/        
 2     var xhr;  //声明AJAX对象变量
 3     if(window.XMLHttpRequest){ 
 4         xhr = new XMLHttpRequest();  //标准模式下创建的AJAX对象
 5     }else{ 
 6         xhr = new ActiveXObject("Microsoft.XMLHTTP"); //非标准模式下创建的AJAX对象
 7     }
 8     
 9     /*不考虑兼容*/11　　 var xhr = new XMLHttpRequest();

　　第二步 ：确定发送方式（连接服务器）

1　　 xhr.open("get", url, true)　　//get请求
2 　　xhr.open("post", url, true)　　//post请求

　　第三步 ：发送请求

1 　　xhr.send(null);

　　第四步：监听服务端响应的数据

 1 　　/*
 2      同步：不需要监听事件
 3          readystate  请求状态
 4          如果请求状态是4的话：
 5          表示的是http包已经完全接收！
 6          status  完全接收后的状态码
 7          如果状态码是200
 8          表示的是http包已经完全解析
 9 
10      异步：需要监听事件
11      xhr.onreadystatechange = function(){
12          readystate  请求状态
13          如果请求状态是4的话：
14          表示的是http包已经完全接收！
15          status  完全接收后的状态码
16          如果状态码是200
17          表示的是http包已经完全解析
18          responseText 
19          表示服务端给你返回过来的结果
20      }
21     */
22     xhr.onreadystatechange = function(){
23         if(xhr.readyState==4){
24             if(xhr.status==200){
25                 alert(xhr.responseText)
26             }else{
27                 //不是ok  会话失败
28                 alert(xhr.statusText)
29             }
30         }
31     }

（未完待续~~）