php - 对 AJAX 的基础知识感到困惑

Question

所以现在，我只是使用基本表单来检查密码。我希望它检查密码并基本上保留在 page.html 上，这样我就可以使用 JavaScript 来提醒不正确的密码或其他东西。我不太确定该怎么做。它似乎会带我到 check.php。我对整个过程不太确定，任何帮助表示赞赏!谢谢!

页面.html

<form action="check.php" method="post">
    <input type="password" name="password" />
    <input type="submit" value="Submit" />

</form>

检查.php

   <?php
    $password = $_POST['password'];
    if ( $password != "testing" ) {
        die();
    }
?>

Answer 1

PHP 在网络服务器上运行，而网络服务器通常在 物理上不同 的机器(服务器端)和网络浏览器运行的地方(客户端)运行。这些机器通常通过网络连接。 HTTP 是一种网络协议(protocol)。 Web 浏览器发送 HTTP 请求。 Web 服务器检索 HTTP 请求，其 URL 指示应将其转发给 PHP 以进行进一步处理。 PHP 检索 HTTP 请求并进行处理并返回 HTTP 响应。通常具有普通 HTML 页面的风格。网络服务器将 HTTP 响应发送回网络浏览器。

JavaScript 在网络浏览器上运行，对 PHP 一无所知，因为它在网络服务器上运行。 PHP 反过来也对 JavaScript 一无所知(尽管它可以生成一些 JS 代码，这些代码又会通过 HTTP 发送到网络浏览器)。 JS 和 PHP 之间唯一的通信方式是 HTTP。让 JS 触发 HTTP 请求并检索 HTTP 响应的方法之一是使用 XMLHttpRequest .这是 Ajax 背后的核心技术.

我在您的问题历史记录中看到您已经熟悉 jQuery .它是一个 JS 库，有很多方便的函数来触发 ajaxical 请求。在这种特定情况下，您想使用 $.post .例如

$('#formId').submit(function() {
    $.post('check.php', $(this).serialize(), function(valid) {
        if (valid) {
            alert('Valid!');
        } else {
            alert('Invalid!');
        }
    });
    return false; // Important! This blocks form's default action.
});

在 check.php 中:

<?php
    echo $_POST['password'] != "testing";
?>

但这不是 unobtrusive .如果用户禁用了 JS，则所有操作都将失败。最好的办法是在 PHP 中检查 ajaxical 请求是否被 jQuery 触发并进行相应处理:

if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
    // Ajax.
} else {
    // No ajax.
}

或者，您可以让 jQuery 也到达不同的 URL 或附加一个额外的参数。

---

更新:这是不使用 jQuery 时 JavaScript 的样子:

document.getElementById('formId').onsubmit = function() {
    var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            if (xhr.responseText) {
                alert('Valid!');
            } else {
                alert('Invalid!');
            }
        }
    }
    xhr.open('POST', 'check.php', true);
    xhr.send(serialize(this));
    return false; // Important! This blocks form's default action.
}

function serialize(form) {
    var query = '';
    for(var i = 0; i < form.elements.length; i++) {
        var e = form.elements[i];
        if (!e.disabled && e.name 
            && ((e.type != 'checkbox' && e.type != 'radio') || e.checked)
            && (e.type != 'submit' || e == document.lastClicked))
        {
            if (query.length) query += '&';
            query += e.name + '=' + encodeURIComponent(e.value);
        }
    }
    return query;
}   

document.onclick = function(e) {
    e = e || event;
    document.lastClicked = e.target || e.srcElement;
}

是的，臃肿冗长;)