AJAX学习

清疚 2021-12-22 03:07 139阅读 0赞

**一、AJAX简介**

AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

**二、什么是AJAX？**

AJAX全称为 Asynchronous JavaScript and XML（异步的JavaScript和XML）。

AJAX是一种用于快速创建动态网页的技术。

通过在后台与服务器进行少量的数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不适用AJAX）如果需要更新内容，必须重载整个网页面。

AJAX并不是一种新的编程语言，而是几种原有技术的结合体。它有以下几种技术组合而成：

*  HTML/XHTML——主要的内容表示语言
 *  CSS——为数据提供样式
 *  DOM——对已载入的页面进行动态更新
 *  XML——作为转换数据的格式
 *  XSLT——将XML转换为XHTML（用CSS修饰样式）
 *  XMLHttp——用XMLHTTPRequest来和服务器进行异步通信，是主要的通信代理
 *  JavaScript——用来编写AJAX引擎的脚本语言

**三、同步交互与异步交互**

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。

异步交互：客户端发出一个请求后，无需等待服务器的响应结束，就可以发出第二个请求。

**四、AJAX工作原理**

![1482941-20190603222420934-648765117.png][]

AJAX的原理简单来说通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对XmlHttpRequest有所了解。

** 五、AJAX创建XMLHttpRequest对象**

XMLHttpRequest是AJAX的基础。

工作原理：

浏览器先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器。XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上。

1.XMLHttpRequest对象

所有的现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。

XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2.创建XMLHttpRequest对象

**语法：variable = new XMLHttpRequest();**

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

*variable*=new ActiveXObject("Microsoft.XMLHTTP");

** **

**六、AJAX向服务器发送请求**

XMLHttpRequest对象用于和服务器交换数据。

1、向服务器发送数据

如需将请求发送到服务器，我们需要使用XMLHttpRequest对象的 open() 和 send() 方法。

xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();

<table> 
 <tbody> 
 <tr> 
 <td> 方法 </td> 
 <td> 描述 </td> 
 </tr> 
 <tr> 
 <td> open(method, url, async) </td> 
 <td> 请求规定的类型、URL以及是否异步处理请求 
 <ul> 
 <li>&nbsp; method：请求的类型，GET或POST</li> 
 <li>&nbsp; url：文件在服务器上的位置</li> 
 <li>&nbsp; async：true（异步）或false（同步）</li> 
 </ul></td> 
 </tr> 
 <tr> 
 <td> send(string) </td> 
 <td> 将请求发送到服务器。 
 <ul> 
 <li>&nbsp;string：仅用于POST请求</li> 
 </ul></td> 
 </tr> 
 </tbody> 
</table>

2、GET还是POST？

与POST相比，GET更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用POST请求：

1）无法使用缓存文件（更新服务器上的文件或数据库）

2）向服务器发送大量数据（POST没有数据量限制）

3）发送包含未知字符的用户输入时， POST 比 GET 更稳定也更可靠

3、GET请求

如果希望通过GET方法发送信息，需向URL添加信息：

xmlhttp.open("GET", "/try/ajax/demo_get2.php?fname=Henry&lname=Ford", ture);
    xmlhttp.send();

4、POST请求

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

xmlhttp.open("POST", "/try/ajax/demo_post2.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("fname=Henry&lname=Ford");

<table style="width:563px;"> 
 <tbody> 
 <tr> 
 <td> 方法 </td> 
 <td> 描述 </td> 
 </tr> 
 <tr> 
 <td> setRequestHeader(header, value) </td> 
 <td> 向请求添加HTTP 头 
 <ul> 
 <li>&nbsp; header：规定头的名称</li> 
 <li>&nbsp; value：规定头的值</li> 
 </ul></td> 
 </tr> 
 </tbody> 
</table>

七、服务器响应

如需获得来自服务器的响应，需使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

<table> 
 <tbody> 
 <tr> 
 <td> 属性 </td> 
 <td> 描述 </td> 
 </tr> 
 <tr> 
 <td> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;responseText </td> 
 <td> 获得字符串形式的响应数据 </td> 
 </tr> 
 <tr> 
 <td> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;responseXML </td> 
 <td> 获得XML形式的响应数据 </td> 
 </tr> 
 </tbody> 
</table>

## responseText 属性 ##

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

八、onreadystatechange事件

当请求被发送到服务器的时候，我们需要执行一些基于相应的任务。每当readyState发生改变的时候，就会触发onreadystatechange事件。readyState属性存有 XMLHttpRequest 的状态信息。下面是XMLHttpRequest 对象的三个重要属性：

<table> 
 <tbody> 
 <tr> 
 <td> 属性 </td> 
 <td> 描述 </td> 
 </tr> 
 <tr> 
 <td> onreadystatechange </td> 
 <td> 存储函数（或函数名），每当readyState属性改变时，就会调用该函数 </td> 
 </tr> 
 <tr> 
 <td> readyState </td> 
 <td> 存有 XMLHttpRequest 的状态，从0到4发生变化。 
 <ul> 
 <li>0：请求未初始化</li> 
 <li>1：服务器已建立连接</li> 
 <li>2：请求已接收</li> 
 <li>3：请求处理中</li> 
 <li>4：请求已完成，且响应已就绪</li> 
 </ul></td> 
 </tr> 
 <tr> 
 <td> status </td> 
 <td> 200：“OK” 404：未找到页面 </td> 
 </tr> 
 </tbody> 
</table>

在 onreadystatechange 事件中，我们规定当服务器响应已经做好被处理的准备时所执行的任务。

当readyState等于4且状态为200时，表示响应已就绪。

xmlhttp.onreadystatechange = function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                  document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
            } 
    }

**注意：** onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

转载于:https://www.cnblogs.com/peng19920430/p/10958765.html

[1482941-20190603222420934-648765117.png]: /images/20211220/8834716574634e67bcaaf5095cc3c608.png