初识Ajax

灰太狼 2021-05-03 16:46 484阅读 0赞

# 一. 概述 #

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。  
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。  
使用了Ajax技术的网页通过在后台跟服务器进行少量的数据交换，在不重新加载整个页面的情况下网页就可以实现异步局部更新

**同步与异步：**  
同步：页面请求实时传给服务器，导致必填数据没有填的时候，要回到页面上重新从头填写，耗时长、客户体验差。  
异步：在页面必填项写上必填选项，不用通过传给服务器判断必填内容是否已经填写完整，耗时短、用户体验强。

**如何实现ajax：**

*  HTML 和CSS 实现页面 表达信息
 *  运用XMLHttpRequest 对象和 web服务器进行数据的异步交换
 *  运用 js操作dom 实现动态局部刷新

# 二. XMLHttpRequest对象 #

### 1. 创建XMLHttpRequest对象 ###

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。  
为了应对所有的现代浏览器，包括 IE5 和 IE6，需检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xhr;
    if (window.XMLHttpRequest)
      {
       // code for IE7+, Firefox, Chrome, Opera, Safari
      xhr=new XMLHttpRequest();
      }
    else
      {
       // code for IE6, IE5
      xhr=new ActiveXObject("Microsoft.XMLHTTP");
      }

### 2. 向服务器发送请求 ###

在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：要发送的请求类型(get 、post)、请求的 URL 和表示是否异步。

xhr.open('get', 'demo.php', false); //对于 demo.php 的 get 请求，false 同步

open()方法并不会真正发送请求，而只是启动一个请求以备发送。通过 send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。当使用get方法请求时，则可以不填参数。执行 send()方法之后，请求就会发送到服务器上。

xhr.send(); //发送请求

当请求发送到服务器端，收到响应后，响应的数据会自动填充xhr对象的属性。一共有四个属性：

| 属性名       | 说明                                                         |
| ------------ | ------------------------------------------------------------ |
| responseText | 作为响应主体被返回的文本                                     |
| responseXML  | 如果响应主体内容类型是”text/xml”或”application/xml” ，则返回包含响应数据的 XML DOM 文档 |
| status       | 响应的 HTTP 状态                                             |
| statusText   | HTTP 状态的说明                                              |

接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般而已 HTTP 状态代码为 200 作为成功的标志。除了成功的状态代码，还有一些别的：

| HTTP 状态码 | 状态字符串            | 说明                                 |
| ----------- | --------------------- | ------------------------------------ |
| 200         | OK                    | 服务器成功返回了页面                 |
| 400         | Bad Request           | 语法错误导致服务器不识别             |
| 401         | Unauthorized          | 请求需要用户认证                     |
| 404         | Not found             | 指定的 URL 在服务器上找不到          |
| 500         | Internal Server Error | 服务器遇到意外错误，无法完成请求     |
| 503         | ServiceUnavailable    | 由于服务器过载或维护导致无法完成请求 |

如果需要像 HTML 表单那样 POST 数据，需使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-formurlencoded");
    xmlhttp.send("fname=Bill&lname=Gates");

### 2. 获取服务器响应 ###

readyState属性的变化代表服务器响应的变化：  
0：请求未初始化，open还没有调用  
1：服务器连接已建立，open已经调用了  
2：请求已接收，也就是接收到头信息了  
3：请求处理中，也就是接收到了响应主体  
4：请求已完成，且响应已就绪，也就是响应完成了

通过对readyState属性进行监听（即对服务器的响应进行监听），我们可以获取服务器响应的内容或者在页面上做一些呈现：  
\* responseText : 获得字符串形式的响应数据  
\* responseXML ：获得XML形式的响应数据  
\* status和statusText : 以数字和文本形式返回HTTP状态码  
\* getAllResponseHeader() ：获取所有的响应报头  
\* getResponseHeader() ：查询响应中的某个字段的值

var xtr = new XMLHttpRequest() //建立XHR对象
    xtr.open("GET","get.php",true); //用get方法异步打开get.php
    xtr.send(); //发送请求头信息
    xtr.onreadystatechange=function(){ 
    if(request.readState===4&&request.status===200){
            document.getElementById("myDiv").innerHTML=xtr.responseText;
        }
    }