9.3.1 AJAX与服务器数据交互

AJAX可以与几乎所有的服务器进行数据交互，比如现在市场上主流的Apache、Tomcat、NGINX、IIS等几款服务器，AJAX都可以与它们进行数据交互。为了便于不同学习方向的读者理解，下面以PHP服务器和Java服务器分别进行讲解。

与PHP服务器交互

PHP程序设计语言主要应用于Web服务端开发、命令行和编写桌面应用程序，是非常流行的一种程序设计语言。PHP应用开发主要使用Apache服务器，AJAX通过PHP可以与Apache服务器进行数据交互。

搭建PHP服务器环境，需要Apache服务器和PHP开发模块。Apache服务器和PHP都是开源的，可以直接从其官网上下载。为了方便搭建服务器，网上有多款一键安装PHP服务器的软件，里面封装了Apache、MySQL、PHP等常用的PHP开发组件。下面介绍两款PHP服务器环境搭建软件。


1. PHP服务器环境搭建

（1）XAMPP服务器环境搭建

① XAMPP介绍。

XAMPP（Apache+MySQL+PHP+PERL）是一个功能强大的建站集成软件包。XAMPP可以在Windows、Linux、Solaris、macOS等多种操作系统下安装使用，并支持英文、简体中文、繁体中文、韩文、俄文、日文等多种语言。读者可以在网络搜索这个软件，安装方法非常简单，安装并启动后如图9-10所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/fecc79513e8ae954f63f699e66be1a1c.image.webp)
② XAMPP的使用。

XAMPP启动后，单击图9-10所示的Moudle列Apache服务器的“Start”按钮。因为默认的端口号是80，所以在浏览器上直接输入“http://localhost:”就可打开服务器首页。出现如图9-11所示界面就意味着XAMPP服务器启动成功。


ps:注意，安装要重启，教室机房的环境安装时，重启会恢复，所以教室里无法使用这种方式来实现 。


（2）PhpStudy服务器环境搭建

PhpStudy是另一款非常好用的PHP调试环境集成包，包含Apache和PHP等程序，下面详细介绍用PhpStudy搭建PHP服务器的方法。
① 下载PhpStudy。
从PhpStudy官网上下载安装软件。图9-12所示为PhpStudy官网首页。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f3b7f7b42f04654e6e07e6a1094df908.image.webp)

② 安装PhpStudy。
下载完成后，按照安装向导进行安装。安装时尽量不要安装在C盘上，以防影响系统性能。安装的默认文件夹为phpstudy_pro，WWW文件夹为项目存储位置，如图9-13所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e50874f1e05deb7eb3b926e732b50339.image.webp)

③ 启动PhpStudy服务器。
启动PhpStudy，在弹出的小皮面板上启动Apache组件，如图9-14所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f41ac87dc46e20c9f8c57c973c548a3a.image.webp)

接下来，在浏览器地址栏输入“http://localhost”，如果出现如图9-15所示的界面，说明PhpStudy服务器启动成功。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/b7b1fc86acdb6fe314476be3247bedc2.image.webp)

2. Visual Studio Code集成开发环境搭建

PHP服务器环境搭建以后，为了方便开发，在实际开发中往往使用一些集成开发工具，如PhpStorm、Visual Studio Code等，这里我们采用Visual Studio Code集成开发工具来进行说明。

（1）配置Visual Studio Code服务器环境
① 下载并安装Visual Studio Code。
从Visual Studio Code官网下载该软件，下载、安装、启动后的界面如图9-16所示。


② 配置服务器。
在Visual  Studio  code的扩展中安装相应的插件，如图9-17所示，然后在搜索框中依次搜索php server、Code Runner这两个插件，并进行安装。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/51ee021690d61ec524703e9566f016dc.image.webp)

接下来设置系统的环境变量，此时选择PhpStudy的安装路径，设置如图9-18所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e5e00196716b13a0e20e754cd24c097f.image.webp)

（2）运行调试程序
在运行程序时，单击“Run Code”按钮，可以直接在界面上就可以看到运行结果。或者在右键快捷菜单中单击“PHP Server: Reload Sever”命令，在浏览器可查看运行结果，如图9-19所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/52b65315b1b4f54ba6f704b658ca96c4.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/816297dec65d4462820d54fc047b8043.image.webp)

① 在项目创建9-5.php文件，如图9-20所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/cf113873ab3c9ab34bbdb11f79474c30.image.webp)


② 在Visual Studio Code中编写前端代码，如图9-21所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/9fd2f9a32782f1414d3048598f6ce822.image.webp)

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/9ac57575362fbe8adc4b94cae949a336.image.webp)

③ 在程序界面右击鼠标，在弹出的快捷菜单中单击“PHP Server Reload server”命令，如图9-22所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/e218b141f9f1d3de35f9b5e28180d63b.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d1a462eb2d0f586a43135858e85c3d01.image.webp)

9.3 AJAX与服务器交互

# AJAX处理文本数据
- 文本数据是由一些普通文本组成的，是AJAX接收的服务器传递的最常用的数据。
- 使用XMHttpRequest对象的responseText属性来获取服务器的响应信息，信息内容保存在responseText属性中。
- 文本数据以字符的形式显示在浏览器上，可以直接以文本形式显示，也可以作为HTML内容显示。

AJAX可以直接请求文本文件的内容，也可以请求HTML文件内容 ，将请求后的数据存储在responseText属性中。

responseText中的数据，是HTML能够识别的格式，直接插入页面中即可。

插入HTML数据较简单的方法是更新innerHTML属性。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d881387d46b0137b46751538bb1e4948.image.webp)


- 在content文件夹下分别创建content.txt、content.html、content2.html文件。
- 在index.html文件中编写<body>部分的代码。
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/edb068c3f56593562e5cbb6b282e1299.image.webp)
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/cfd995b1677aeefdac2bd7e4d05e0182.image.webp)
- 在<head>...</head>标签中创建<script>...<script>，在<script>标签中创建XMLHttpRequest对象，获取content.txt文件

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/4cbf825cac3f2a304003ae95dc2198c2.image.webp)
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-2</title>
</head>
<body>
    <a href="content/content.txt">健走的好处</a>
    <br><span id="span1"></span><br>
    <a href="content/content.html">健走的好处</a>
    <br><span id="span2"></span><br>
    <a href="content/content2.html">健走的好处</a>
    <br><span id="span3"></span>
    <script>
        window.onload=function(){
            document.getElementsByTagName("a")[0].onclick = function(){
                var xhr = new XMLHttpRequest();
                var url = this.href;
                xhr.open("get",url);
                xhr.send(null);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4){
                        if(xhr.status==200){
                            var result = xhr.responseText;
                            document.getElementById("span1").innerHTML = result;
                        }
                    }
                }
                return false;
            }
        }
    </script>
</body>
</html>
```
效果如下

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f81ab8c793e92d81a8d335adf1db7483.image.webp)
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/4edd612878f7c21f52ccc29b5478aeb3.image.webp)
   这里需要注意，先参考9.3配置好php服务器，在服务器里运行才能生效
练习：给出另外2个链接的ajax效果，如下图所示
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/c08286a8b3f1add5186f8ab70fadcb87.image.webp)

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ae8042783550d28c72432dfdfaf712fe.image.webp)

```
<script>
        function ajax(elementId) {
            return function() { // 返回一个匿名函数，该函数在点击时执行
                var xhr = new XMLHttpRequest();
                var url = this.href; // this在这里指向当前的<a>元素
                xhr.open("get", url);
                xhr.send(null);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            var result = xhr.responseText;
                            document.getElementById(elementId).innerHTML = result;
                        }
                    }
                };
                return false;
            };
        }

        window.onload = function() {
            // 将函数本身作为事件处理器，而不是函数的调用结果
            document.getElementsByTagName("a")[0].onclick = ajax("span1");
            document.getElementsByTagName("a")[1].onclick = ajax("span2");
            document.getElementsByTagName("a")[2].onclick = ajax("span3");
        };
        
    </script>
```
# 读取XML文件
AJAX通过XMLHttpRequest对象的responseXML属性接收和保存服务器发送的XML格式的数据。
    
XML数据是HTTP传输的通用数据类型，支持各种传输环境，特别是远程传输。
    
在兼容性和速度上，XML格式的数据都具有很大的优势。XML格式数据的缺点是，在解析时比较麻烦。
    

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/89a11b31eb2dfa8c648fc70c58683992.image.webp)

    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/2f00c95938c635317fed73ba84b4edd2.image.webp)
    
    
```
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-3</title>    
</head>
<body>
    <a href="content/content3.xml">健走的好处</a>
    <br><span id="span1"></span><br>
    <a href="content/content.html">健走的好处</a>
    <br><span id="span2"></span><br>
    <a href="content/content2.html">健走的好处</a>
    <br><span id="span3"></span>
    <script>
        window.onload = function(){
            document.getElementsByTagName("a")[0].onclick = function(){
                var xhr=new XMLHttpRequest();
                var url=this.href;
                xhr.open("get",url,true);
                xhr.send(null);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4 && xhr.status==200){
                        var result = xhr.responseXML;
                        console.log(result);
                        var users = result.getElementsByTagName("user");
                        console.log(users);
                        console.log(users[0]);
                    }
                }
                return false;
            }
        }
    </script>
</body>
</html>
```

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/29868c7ef956d1e4b09c142417a38512.image.webp)
  
# 读取JSON文件
    
JSON是一种轻量级的数据交互格式，全称为JavaScript Object Notation，是较常用的一种数据格式。JSON基于 ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。JSON中的所有数据以键值对的形式存在，多个键值对之间用逗号隔开，键值对的键和值之间用冒号连接。可以用花括号或方括号标注，对应JavaScript中的object和array。“键”类似属性，“值”可以是4种基本数据（字符串、数值、布尔值、空值），也可以是两种结构（数组、对象），具体如图9-8所示：

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/f28f3a2b00b8bf6ce06794bd683e7880.image.webp)

    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/8d025656391abd58bbae9f3d3e13e3c4.image.webp)
   
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/c881935a9a4209b9611001a33f229e4d.image.webp)
    
```
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-4</title>
    
</head>
<body>
    <a href="content/content.json">健走的好处</a>
    <br><span id="span1"></span><br>
    <a href="content/content.html">健走的好处</a>
    <br><span id="span2"></span><br>
    <a href="content/content2.html">健走的好处</a>
    <br><span id="span3"></span>
    <script>
        window.onload = function(){
            document.getElementsByTagName("a")[0].onclick = function(){
                var xhr=new XMLHttpRequest();
                var url=this.href;
                xhr.open("get",url,true);
                xhr.send(null);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4 && xhr.status==200){
                        var result = xhr.responseText;
                        console.log(result);                        
                    }
                }
                return false;
            }
        }
    </script>
</body>
</html>
```
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/48168eeb338db9ef56230a44aa878e91.image.webp)

9.2  AJAX处理数据

# 基本介绍
jQuery是一个非常流行且广泛使用的JavaScript库，由John Resig在2005年创建。它的设计宗旨是“Write Less, Do More”（写得更少，做得更多），意在通过提供一系列简洁、强大的API来简化Web开发中的JavaScript编程任务。以下是关于jQuery的一些关键点：

- 简化DOM操作：jQuery极大地简化了对HTML文档对象模型（DOM）的操作，使得查找、修改和操作页面元素变得异常简单快捷。

- 事件处理：它提供了一套统一的API来处理各种网页事件，如点击、鼠标悬停等，使得事件绑定和解绑工作变得高效且兼容性好。

- 动画效果：jQuery内置了一系列方法来实现页面元素的动画效果，如淡入淡出（fadeIn/fadeOut）、滑动（slideDown/slideUp）和自定义动画，使得网页交互更加生动。

- AJAX支持：jQuery简化了异步JavaScript和XML（AJAX）请求的编写，使得与服务器的无刷新数据交换变得轻松易行。

- 兼容性：jQuery在设计时充分考虑了跨浏览器的兼容性问题，确保在不同浏览器上运行时的行为一致，包括对老旧浏览器如Internet Explorer的支持。

- 链式操作：jQuery支持链式调用，允许开发者在一行代码内连续调用多个方法，使得代码更加紧凑和易读。

- 插件丰富：拥有庞大的开发者社区，创建了大量的插件，几乎可以满足任何网页特效或功能需求，进一步扩展了jQuery的功能。

- 核心函数 $：$ 是jQuery的别名，也是其核心函数，用于选择元素、执行方法和创建插件等，是使用jQuery的基础。

尽管随着现代浏览器对原生JavaScript API支持的增强，以及像Vue.js、React这样的前端框架的兴起，jQuery的使用有所减少，但它仍然是许多遗留系统和新项目中不可或缺的一部分，特别是在需要快速原型开发或与旧代码集成时。

# javascript介绍

JavaScript库是预先编写好的JavaScript代码集合，它们为开发者提供了一系列实用功能，以便更高效地实现网页交互、数据处理、动画效果等。这些库封装了许多复杂的操作，使开发者能够以更简洁的方式完成任务，提高开发速度并减少错误。以下是一些知名的JavaScript库及其特点简介：

1. **React.js**：
   - **类型**：用户界面库。
   - **特点**：由Facebook维护，用于构建组件化的用户界面。React采用虚拟DOM来优化性能，支持服务器端渲染，常与Redux等状态管理库配合使用。

2. **Angular**：
   - **类型**：全功能框架。
   - **特点**：由Google支持，适合构建大型企业级应用。Angular是一个完整的解决方案，包含模板语法、依赖注入、模块化等特性，支持TypeScript开发。

3. **Vue.js**：
   - **类型**：渐进式框架。
   - **特点**：易于上手，同时支持复杂应用的开发。Vue的核心库关注视图层，可与其他库或现有项目整合，也提供了路由、状态管理的官方解决方案。

4. **jQuery**：
   - **类型**：通用JS库。
   - **特点**：已介绍过，重点在于简化DOM操作、事件处理、Ajax请求等，适合快速开发及兼容性要求高的项目。

5. **Lodash/Underscore.js**：
   - **类型**：实用工具库。
   - **特点**：提供一系列函数来处理数组、对象、函数等，增强JavaScript原生能力，如遍历、过滤、映射等，提升代码的简洁性和效率。

6. **Axios**：
   - **类型**：HTTP客户端库。
   - **特点**：用于浏览器和node.js中发起HTTP请求，支持Promise API，易于处理异步请求和响应。

7. **Moment.js / Day.js**：
   - **类型**：日期时间处理库。
   - **特点**：简化日期和时间的解析、验证、 manipulation和显示。Day.js是Moment.js的轻量级替代，专为现代浏览器设计，体积更小。

8. **D3.js**：
   - **类型**：数据可视化库。
   - **特点**：强大的数据驱动文档库，用于生成各种复杂的可交互的数据可视化图表，适用于Web端的数据展示和分析。

9. **Three.js**：
   - **类型**：3D图形库。
   - **特点**：基于WebGL，使得在浏览器中创建和展示3D图形成为可能，适用于游戏、产品展示、数据可视化等领域。

这些库各有侧重，选择时应根据项目需求、团队熟悉度及生态系统的支持情况来决定。
# jQuery如何获取及安装
jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等方面的操作。以下是获取及安装jQuery的步骤：

### 获取jQuery

1. **从官方网站下载**：
   访问[jquery.com/download/](https://jquery.com/download/)，你可以选择下载不同版本的jQuery。有两个主要版本可供选择：
   - **Production version**（生产版本）：这是已经压缩过的版本，适用于实际部署的网站，文件较小，加载速度快。
   - **Development version**（开发版本）：这个版本没有经过压缩，包含注释，便于阅读和调试，适用于开发环境。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/be46991d1513e1312f36d119f412bbae.image.webp)
2. **使用CDN**：
   为了简化流程，可以直接在HTML文件中通过内容分发网络（CDN）链接引入jQuery。这样可以减少服务器带宽消耗，并且由于CDN的全球分布，可以加快加载速度。常用的CDN链接包括：
   - Google CDN:
     ```html
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     ```
   - jQuery CDN:
     ```html
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     ```
   请替换版本号以获取特定版本的jQuery。

### 安装到项目中

1. **手动下载后引入**：
   如果从官网下载了jQuery文件，将下载的`.js`文件放到项目的相应目录下，然后在HTML文件的`<head>`部分通过`<script>`标签引入：
   ```html
   <script src="path/to/jquery-3.6.0.min.js"></script>
   ```
   其中`path/to/`应替换为实际的文件路径。

2. **使用包管理器安装**：
   对于现代前端开发，通常使用包管理器如npm（Node.js包管理器）或yarn来安装jQuery：
   - **npm**:
     在命令行中运行：
     ```sh
     npm install jquery
     ```
   - **Yarn**:
     在命令行中运行：
     ```sh
     yarn add jquery
     ```
   安装后，如果你使用的是模块打包工具（如webpack或rollup），可以通过ES6模块导入语句来使用jQuery：
   ```javascript
   import $ from 'jquery';
   ```
   或在非模块环境中（如通过<script>直接引入的情况）使用：
   ```javascript
   const $ = require('jquery');
   ```

确保在使用jQuery之前已经正确引入了库文件，然后就可以在JavaScript代码中使用`$`或`jQuery`来调用其提供的函数和方法了。
    
    
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/ac90949bb7960552ed06e429f1a50447.image.webp)


10.1 jQuery介绍及安装

AJAX是杰西·詹姆斯·加勒特（Jesse James Garrett）创造的，是Asynchronous JavaScript And XML（异步JavaScript和XML）的缩写，由一组相互关联的Web开发技术（JavaScript、XML、CSS、DOM）组成，是用来创建交互式网页应用的网页开发技术。它通过在后台与服务器进行少量数据交换，能够使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，只对网页的部分内容进行更新，而且可以不用立刻得到结果，也不需要等待结果，实际处理这个调用的部件在完成处理后，通过状态、通知和回调函数等方式来通知调用者。

可以说，AJAX是“增强的JavaScript”，而且JavaScript提供了很多与AJAX技术相关的API，这样可以方便地实现AJAX功能。有很多使用AJAX的应用程序案例，如新浪微博、谷歌地图等。

在“Web 1.0时代”，多数网站都采用传统的开发模式，从Web 2.0开始，越来越多的网站采用AJAX开发模式。在这种模式下，首先页面中用户的操作将通过AJAX引擎与服务器端进行通信，然后将返回结果提交给客户端页面的AJAX引擎，最后由AJAX引擎将这些数据插入页面的指定位置。

AJAX是XMLHttpRequest对象和JavaScript、XML、CSS、DOM等多种技术的组合。其中XMLHttpRequest对象是较核心的技术，它是浏览器接口，开发者可以使用它发出HTTP和HTTPS请求，而且不需要刷新页面就可以修改页面的内容。它可以实现如下功能。

- （1）在不重新加载页面的情况下更新网页。
- （2）在页面已经加载后可以从服务器接收数据、请求数据。
- （3）在后台向服务器发送数据。

9.1.1 XMLHttpRequest对象 

XMLHttpRequest对象是AJAX的核心技术，它是一个具有API的JavaScript对象，能够使用HTTP连接服务器，在1999年由微软公司在IE 5.0中率先推出。

进行操作前，首先需要初始化这个对象，由于它不是一个W3C标准，所以对于不同的浏览器，初始化的方法是不同的。
通常情况下，初始化XMLHttpRequest对象时只需要考虑两种情况，一种是IE，一种是非IE，下面分别介绍。所有现代浏览器（IE 7+、火狐浏览器、Chrome浏览器、Safari浏览器以及Opera浏览器）都内建了XMLHttpRequest对象。

1.创建 XMLHttpRequest 对象

创建XMLHttpRequest对象比较简单，在<script>...</script>标签中通过new关键字就可以创建XMLHttpRequest对象。
var xhr=new XMLHttpRequest( );

2.低版本IE的兼容问题

现代浏览器都可以直接通过关键字new的方式创建XMLHttpRequest对象。IE 5.0以下的浏览器会出现兼容性问题，可以通过下面的方法进行兼容性处理。
![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/2136c78219e6307897e21318389d76d9.image.webp)

XMLHttpRequest对象提供了一些常用的属性，通过访问这些属性可以获取服务器的相应状态及响应内容。常用的属性如表9-1所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/81fb60f1d2171e46d94522642f454533.image.webp)



XMLHttpRequest对象提供了一些常用的方法，通过这些方法可以处理请求。常用的方法如表9-2所示。

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a50d7432f6441d95e3c3d613f3475944.image.webp)

9.1.4 AJAX请求  

- 一种请求数据的方式，不需要刷新整个页面
- 核心是 XMLHttpRequest 对象

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/a6e15faf6d405ff3d9388015d699fe81.image.webp)
1. 创建对象

首先需要创建XMLHttpRequest对象。该对象的主要作用是在后台与服务器交换数据，这就意味着可以不重新加载整个页面，而实现对网页内容的局部更新。具体创建过程如下：  

2. 建立连接

通过XMLHttpRequest 对象的open()方法来建立连接，语法格式如下所示。

xhr.open(method,url,async);  //发送请求使用open()方法设置请求方式和请求地址

其中，method用于设置请求的方式是GET还是POST，后面具体介绍这两者的区别。url 表示AJAX请求的资源地址，这个地址可以是绝对地址也可以是相对地址，在实际应用中，一般都使用相对地址。async用于设置请求方式是同步还是异步，取值为true或false，取值为true时，表示异步请求，脚本执行send()方法后不等待服务器的执行结果，继续执行脚本代码；取值为false时，表示同步请求，脚本执行send() 后等待服务器的执行结果。具体示例如下代码所示。

`
xhr.open("GET","example.jsp",true);  //异步请求example.jsp资源
`

3. 发送请求

采用XMLHttpRequest 对象的send()方法将请求发送到服务器，过程如下：

`
xhr.send(data);//发送数据
`

      
在不同的请求方式中，data的取值是有区别的。在第2步中我们讲到method用于设置AJAX的两种请求方式，主要有GET和POST，这两种请求方式在实际应用中是有区别的。

GET是AJAX请求中最常见的请求，一般用于查询信息。GET请求没有请求体，如果需要传递参数，可以将参数追加到URL的末尾，以“？”来引导，参数的格式为“参数名=参数值”，如果有多个参数值，中间需以“&”号分隔。这里发送的请求参数设置为null，具体形式如下所示：

```
xhr.open( “get", "example.jsp?name1=value1&name2=value2",true )； //发送GET请求
xhr.send(null);//发送GET请求，不需要参数
```

POST请求在AJAX请求中的使用频率仅次于GET请求，POST请求数据作为请求的主体向服务器提交，可以包含许多数据，格式不限。POST请求发送到服务器的数据是可以保存的。发送POST请求必须使用setRequestHeader()方法，为请求的HTTP头设置“Content-Type：application/x-form-www-urlencoded”，接下来使用send()方法发送请求，需要设置请求参数，如下。
```
xmlhttp.open("POST", "example.jsp", true); //发送POST请求
xmlhttp.setRequestHeader("Content-type", "application/x-www-form- urlencoded"); //对于POST请求需设置请求头
xhr.send(param); //设置参数
```

4. 接收数据
当异步HTTP请求发送到服务器时，接下来就需要进行响应。使用xhr对象的onreadysta- techange来监听请求状态的变化，状态的变化主要通过readyState和status属性来表示，其具体数值如表9-1所示。当readyState值为4和status的值为200时，表示请求成功。

每当 readyState的值发生改变时，就会触发 onreadystatechange事件。readyState 属性用来表示XMLHttpRequest 的状态信息，当readyState的结果为4时代表请求已完成，且响应已就绪，此时若status的值为400，就可以获取响应的数据了。

AJAX接收的返回数据主要有文本数据、XML格式数据和JSON格式数据。AJAX使用XMLHttpRequest对象的responseText、responseXML接收这些数据，如下代码所示。
```
xhr.onreadystatechange =  function(){//等待数据
   if(xhr.readyState == 4 && xhr.status == 200){     
console.log(JSON.parse(xhr.responseText));
        }
    }
```

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/9087d17b35293785b84466172487fe17.image.webp)


![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/c704946b284e071f3eb4a0b7ffcfb874.image.webp)

注意，在VSCode中右击运行，如图所示

![image.png](https://site-1314099117.cos.ap-guangzhou.myqcloud.com/img/d81d301b9d0913c08e18bce17786c15a.image.webp)

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读取个人信息</title>
</head>
<body>
    <p id="p1"></p>
    <input type="button" value="读取个人信息" onclick="readText()">
    
    <script>
        function readText(){
            var xhr =  new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    document.getElementById("p1").innerHTML = xhr.responseText;
                    console.log(xhr.responseText);
                }
            }
            xhr.open("get","content/1.txt",true);
            xhr.send(null);
        }
    </script>
</body>
</html>
```



