在本文中，我们将深入探讨如何实现一个原始的Ajax请求，这是一个使用HTML、JavaScript（JS）和PHP进行异步数据交互的实例。虽然jQuery等库提供了更简洁的API，但理解基本原理对于任何Web开发者来说都是至关重要的。
让我们看HTML部分。HTML文件创建了一个简单的用户界面，包括两个输入框（用户名和密码）以及一个登录按钮。当用户点击登录按钮时，会调用JavaScript函数`showSelect()`。
```html
<html>
<head>
...
<script language="javascript" src="js/ajaxTest.js"></script>
</head>
<body>
用户名：<input id="userName" type="text"></input>
密码：<input id="passWord" type="password"></input>
<span id="showInputError" style="color:red;font-weight: bold;"></span><br>
<input type="button" value="登录" onclick="showSelect()">
</body>
</html>
```
接下来，我们分析JavaScript（JS）代码。在这个示例中，我们首先定义了一个名为`xmlHttp`的变量，它将用于创建XMLHttpRequest对象，这是实现Ajax请求的基础。`showSelect()`函数负责收集用户输入，检查用户名是否为空，然后构造URL并调用`xmlHttp.open()`和`xmlHttp.send()`来发送Ajax请求。
```javascript
var xmlHttp = GetXmlHttpObject();
function showSelect() {
// ...
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChanged() {
// ...
}
```
`xmlHttp.onreadystatechange`回调函数会在服务器响应准备好时被调用。当`readyState`属性为4时，表示请求已完成，我们可以访问响应数据。`stateChanged()`函数检查响应并根据结果更新页面。
`GetXmlHttpObject()`函数是一个兼容性函数，确保在不同浏览器中创建XMLHttpRequest对象。
现在转向PHP部分。在这个例子中，PHP脚本`ajaxTest.php`接收由Ajax请求传递的用户名和密码参数，然后可能对这些数据进行验证或查询数据库。由于没有提供具体的PHP代码，我们只能假设它会处理输入数据，并根据验证结果返回"yes"或"no"。例如：
```php
<?php
$username = $_GET['userName'];
$password = $_GET['passWord'];
// 这里应添加数据库连接和验证逻辑
// 如果验证通过
if (validCredentials($username, $password)) {
echo 'yes';
} else {
echo 'no';
}
?>
```
总结来说，这个原始Ajax请求示例展示了如何利用HTML表单收集数据，通过JavaScript异步发送到PHP服务器进行处理，然后根据服务器的响应更新页面。虽然jQuery和其他库简化了这个过程，但理解这些基本概念有助于我们更好地掌握Web开发的核心技术。
