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所示。

② 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官网首页。

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

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

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

1. 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这两个插件，并进行安装。

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

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

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

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

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