AJAX教程系列一：环境安装及第一个ajax程序_ajaxpro win2016 server-优快云博客

本文介绍了如何通过WAMP服务器环境搭建并运行首个Ajax程序，包括环境配置、编写简单的Ajax代码及访问测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

去官网下载wamp服务器，一路next即可。PS：也可下载我本人所使用版本http://pan.baidu.com/s/1slOmEYx
下载dw
wamp安装成功后，在你所在磁盘目录!![其中画红框的地方为本教程之后所有项目的放置地点。](https://img-blog.youkuaiyun.com/20160707155649853)
安装成功后，访问localhost/index.php.出现如下图所示，表示安装访问成功。
接下来开始写第一个ajax程序：
首先在www目录下创建一个ajax-1文件夹，在其下建立一个1.txt文件。随后开始写你的第一个ajax程序

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script>
    window.onload = function() {

        var oBtn = document.getElementById('btn');  

        oBtn.onclick = function() {
            var xhr = null;
            // 打开浏览器
            try {
                xhr = new XMLHttpRequest();
            } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }

            // 在地址栏输入地址
            xhr.open('get','1.txt',true);
            // 提交
            xhr.send();

            // 等待服务器返回内容
            xhr.onreadystatechange = function() {

                if(xhr.readyState == 4){
                    alert(xhr.responseText);
                }   
            } 

        }
    }
</script>
</head>

<body>
    <input type="button" value="按钮" id="btn" />
</body>ML
</html>
6.输入你的访问路径，不要在本地直接双击此HTML文件，会导致报错。
![如下图所示](https://img-blog.youkuaiyun.com/20160707160826382)
7.第一个ajax程序完成。