本机测试(一台电脑)ajax的方法_本地如何测试ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/q411020382/article/details/56489037

本文介绍如何在本地电脑上搭建HTTP服务器环境，以便于进行AJAX等前端技术的测试。主要步骤包括下载安装WAMP软件、配置HTTP服务器路径及测试页面。

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

在没有服务器的情况下，一般在自己电脑上测试AJAX的时候会报跨域错误或是不能访问本机文件
在这种情况下可以自己在本机搭建一个HTTP服务器环境
要用到的软件叫wamp 大家百度一下很容易下载可以使用中文版
快安装的时候会提示让你选择一个默认的浏览器选一个常用的就行

安装成功后看右下角当能用的时候软件会显示绿色

点击软件选择WWW目录然后在目录新建一个文件夹随便起名

然后找到你软件安装的目录按顺序找bin-apache-apache2.4.9(不同版本显示不一样)-conf-httpd.conf(打开这个文件文本文档就能打开)

在里面找到DocumentRoot "f:/wamp/www/" 一般是这样显示（那个目录是我安装的目录）

改成DocumentRoot "f:/wamp/www/hhh" (hhh是我在WWW目录下新建的文件夹)

再找一个<Directory "f:/wamp/www/"> 也改成 <Directory "f:/wamp/www/hhh">

然后打开浏览器输入127.0.0.1测试一下应该能看到内容为It works!的网页

以后用ajax测试的时候目录就用这个新建的目录我这里是hhh文件夹

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ajax</title>
</head>
<body>
<button id="btn">请求数据</button>
<div id="myDiv"></div>
<script>
    document.getElementById("btn").onclick = function(){
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function(){
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        }
        xmlhttp.open("GET", "ajax.json");
        xmlhttp.send();
    }
</script>
</body>
</html>

把上面这一段代码保存为ajax.html文件