Ajax实战PDF是一本关于Ajax技术的书籍，它提供了一个完整的介绍，让读者可以快速学习和掌握Ajax技术。这本书以实例为基础，让读者可以快速理解Ajax的原理，并能够利用Ajax来开发动态Web应用。
首先，Ajax实战PDF介绍了Ajax的基本原理，包括XMLHttpRequest对象、JavaScript、DOM、CSS和XML等。然后，它还介绍了如何使用这些技术来开发动态Web应用。例如：如何使用XMLHttpRequest对象来发送HTTP请求、如何使用JavaScript来处理HTTP响应、如何使用DOM来创建动态内容、如何使用CSS来样式化页面元素以及如何使用XML来传输数据等。
此外，Ajax实战PDF还介绍了一些常见的Ajax应用场景，包括表单验证、文件上传、无刷新分页、无刷新表格数据加载等。此外，还有一章专门介绍如何在不同浏览器中使用Ajax。
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 监听 readystatechange 事件
xhr.onreadystatechange = function(){
// readyState 等于 4 表明请求已完成
if(xhr.readyState == 4){
// status 等于 200 表明请求成功
if(xhr.status == 200){
// 返回相应内容
console.log(xhr.responseText); } } }; // 发送 HTTP GET 请求 xhr.open('GET', 'http://example.com', true); xhr.send(); 本章为你提供了一个清晰的 Ajax 操作的具体步骤。
让我们一个接一个理解这些步骤。
validateUserId() 被映射为 id 为 "userid" 的表单输入字段的 onkeyup 事件的事件处理程序。<input type="text" size="20" id="userid" name="id" onkeyup="validateUserId();">。var AjaxRequest; // 缓存 XMLHttpRequest 对象
function AjaxFunction(){
try{
// Opera 8.0+, Firefox, Safari
AjaxRequest = new XMLHttpRequest();
}catch (e){
// IE 浏览器
try{
AjaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
AjaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// 错误处理
alert("Your browser broke!");
return false;
}
}
}
}在这个步骤中，我们将会编写一个将由客户端事件触发的函数，然后注册一个 processRequest() 回调函数。
function validateUserId() {
AjaxFunction();
// 这里的 processRequest() 就是回调函数
AjaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
AjaxRequest.open("GET", url, true);
AjaxRequest.send(null);
}上面的代码是有效的。加粗的代码负责发起一个到 Web 服务器的请求。这是使用 XMLHttpRequest 对象 AjaxRequest 做到的。
function validateUserId() {
AjaxFunction();
// 这里的 processRequest() 就是回调函数
AjaxRequest.onreadystatechange = processRequest;
__if (!target) target = document.getElementById("userid");__
__var url = "validate?id=" + escape(target.value);__
__AjaxRequest.open("GET", url, true);__
__AjaxRequest.send(null);__
}假设我们在 userid 输入框中输入 Zara，那么在上面的请求中，URL 会被设置为 "validate?id=Zara"。
我们可以使用任意语言实现服务端脚本，但是它应该包含如下逻辑。
我们假设你要编写一个 servlet 程序，下面是这段程序代码。
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("true");
} else {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("false");
}
}XMLHttpRequest 对象被配置为当 XMLHttpRequest 对象的 readyState 状态发生变化时调用 processRequest() 函数。这个函数接受从服务端返回的结果然后做必要的处理。正如下面的示例所示，它基于从 Web 服务器返回的值将消息变量设置为 true 或 false。
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
...
}这是最后一步，在这一步中我们的 HTML 页面会被更新。它发生在以下方式中：
document.getElementById("userIdMessage"),
// 这里 "userIdMessage" 就是 HTML 文档中某个元素的 ID 属性<script type="text/javascript">
<!--
function setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
var messageText;
if (message == "false") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
}
else
{
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
var messageBody = document.createTextNode(messageText);
// 如果 messageBody 元素已经创建了，则简单的替换它，否则插入一个新的元素。
if (userMessageElement.childNodes[0]) {
userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
}
else
{
userMessageElement.appendChild(messageBody);
}
}
-->
</script>
<body>
<div id="userIdMessage"><div>
</body>如果理解了上述 7 步，差不多就完成 Ajax 了。下一章中，我们会看到更详细的 XMLHttpRequest 对象。
AJAX提交form表单方法 AJAX提交form表单，这在日常项目中是经常用到的。前台无论是简单的html、jsp或者使用了easyui框架，只要...
AJAX如何工作？ AJAX 使用的 XMLHttpRequest 的对象与服务器通信。让我们尝试通过下面显示的图像了解 AJAX 的流程或 AJAX 的工...
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 thi...
本章节我们将讨论如何在 React 中使用表单。一个简单实例在实例中我们设置了输入框 input 值value = {this.state.data}。在输入...