对基本 AJAX 代码的困惑

Question

<script>
    try {
        function xmldo() {
            var xmlhttp;
            xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("para").innerHTML = xmlhttp.responseText;
                }
            }
            var URL = "http:\\127.0.0.1\ajax.php";
            xmlhttp.open("GET", URL, true);
            xmlhttp.send();
        }
    } catch (err) {
        document.write(err.message);
    }
</script>
<p id="para">Hey message will change</p>
<br>
<button type="button" onclick="xmldo()">Click me</button>

这是我的代码网页，我想通过我的另一个 php 文件 ajax.php 中的响应来更改#para.innerHTML 的内容

<?php
$response="hey is text changed";
echo $response;
?>

我正在使用 wamp，所以我将 ajax.php 放在我的 www 文件夹中，并将服务器上文件的位置设置为 127.0.0.1/ajax.php [URL] 但我按下按钮时 para 占位符处的文本不是改变。 我是 AJAX 的新手，所以在某些方面必须遗漏。请帮帮我。

Answer 1

更改 URL 中的斜杠。

你有：http:\\127.0.0.1\ajax.php，但正确的方法是：http://127.0.0.1/ajax.php

我还建议使用 jQuery 来执行 AJAX 请求 - 它更简单，并且您编写的代码更少！

我在下面添加了一个用 jQuery 编写的示例：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("#button_id").click(function(){

        $.ajax({
            url: 'http://127.0.0.1/ajax.php',
            cache: false,
            type: 'GET',
            dataType: 'HTML',
            error: function (e){
                console.log(e);
            },
            success: function (response){
                $("#para").empty().append(response);
            }
        });

    });

});
</script>

<p id="para">Hey message will change</p><br>
<button type="button" id="button_id">Click me</button>