这个模型在本人的开发中已经使用多次表现良好：
async.txt文档
Hello client!
async.html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>AJAX Foundations: Using XMLHttpRequest</title>
<script type="text/javascript" src="async.js"></script>
</head>
<body onload="process()">
Hello, server!
<br/>
<div id="myDivElement" />
</body>
</html>
async.js文件
// holds an instance of XMLHttpRequest
//建立一个XmlHttpRequestObject对象实例
var xmlHttp = createXmlHttpRequestObject();
// creates an XMLHttpRequest instance
//建立XmlHttpRequestObject对象
function createXmlHttpRequestObject()
{
// will store the reference to the XMLHttpRequest object
//用于存储XmlHttpRequest对象的引用
var xmlHttp;
// this should work for all browsers except IE6 and older
//创建除了ie6 或者其更早版本外的所有浏览器
//（用try catch结构是我见过最好的最具兼容性的创建XMLHttpRequest对象实例的方法）
try
{
// try to create XMLHttpRequest object
xmlHttp = new XMLHttpRequest();
}
catch(e)
{
// assume IE6 or older
//假设是ie6 或其更早版本
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
// try every prog id until one works
//顺序尝试创建每一个对象，直到成功为止
for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++)
{
try
{
// try to create XMLHttpRequest object
//尝试创建XMLHttpRequest对象
xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
}
catch (e) {}
}
}
// return the created object or display an error message
//返回已经创建的对象，或显示错误信息
//实际应用中这里最好不要把错误信息发送到客户端
if (!xmlHttp)
alert("Error creating the XMLHttpRequest object.");
else
return xmlHttp;
}
// called to read a file from the server
// 创建process()函数，读取服务器上的回显文本
function process()
{
// only continue if xmlHttp isn't void
// 当 xmlHttp不为空时继续
if (xmlHttp)
{
// try to connect to the server
//尝试连接服务器
try
{
// initiate reading the async.txt file from the server
//开始读取服务器上的async.txt文件,也可以是http://www.a.com/index.php?app=ajax&act=response
xmlHttp.open("GET", "async.txt", true); //在这里只是设置，发送。设置get方法提交的request参数,像是在地址栏中输入http://async.txt，调用方法用异步(或者解释成设置异步读取的文件async.txt）
xmlHttp.onreadystatechange = handleRequestStateChange; //设置XMLHttpRequest处理状态变化的函数。
xmlHttp.send(null); //把以上设置发送到服务器，get方法直接在以上的open方法设置提交参数，如果为post,设置send（app=ajax&act=response）
}
// display the error in case of failure
//如果出现异常，显示错误信息
catch (e)
{
alert("Can't connect to server:\n" + e.toString());
}
}
}
// function that handles the HTTP response
//处理http响应的函数
function handleRequestStateChange()
{
// obtain a reference to the <div> element on the page
//获取页面上<div>元素的id
myDiv = document.getElementById("myDivElement");
// display the status of the request
//依次显示请求状态信息
if (xmlHttp.readyState == 1)
{
myDiv.innerHTML += "Request status: 1 (loading) <br/>";
}
else if (xmlHttp.readyState == 2)
{
myDiv.innerHTML += "Request status: 2 (loaded) <br/>";
}
else if (xmlHttp.readyState == 3)
{
myDiv.innerHTML += "Request status: 3 (interactive) <br/>";
}
// when readyState is 4, we also read the server response
//当转换到状态4时，读取服务器的响应
else if (xmlHttp.readyState == 4)
{
// continue only if HTTP status is "OK"
// xmlHttp.status为200时表示处理成功
if (xmlHttp.status == 200)
{
try
{
// read the message from the server
//读取服务器信息
response = xmlHttp.responseText;
// display the message
//显示信息到指定id
myDiv.innerHTML += "Request status: 4 (complete). Server said said: <br/>";
myDiv.innerHTML += response;
}
catch(e)
{
// display error message
alert("Error reading the response: " + e.toString());
}
}
else
{
// display status message
alert("There was a problem retrieving the data:\n" +
xmlHttp.statusText);
}
}
}
分享到：
相关推荐
这个最小请求包对于初学者来说是一个很好的起点，因为它包含了开发Web应用所需的基础工具，同时也适合经验丰富的开发者用于快速搭建原型或项目。 总结来说，这个压缩包提供的JavaScript资源是前端开发的重要工具。...
对于开发者来说，这是一个很好的学习资源，因为所有API都在其中，可以方便地查看和使用。然而，由于包含了许多不常用的功能，它的文件大小相对较大，这可能会影响网页的加载速度。 2. **最小版（jquery-1.2.3.min....
总的来说，这个基于jQuery的日期选择器源码结合了前端基础技术、交互设计以及数据管理，是一个很好的学习和实践案例。通过分析和理解这段代码，开发者可以提升自己的前端技能，尤其是对于jQuery库的掌握以及如何构建...
`jQuery Jcrop` 是基于 jQuery 库的一个插件，主要功能是提供一个交互式的图像选择区域，用户可以自由调整选区大小，从而实现图片的裁剪。这个插件支持多种浏览器，包括Chrome、Firefox、Safari、Edge以及Internet ...
这个压缩包中的代码示例，对于前端开发者来说，是一个很好的学习资源，它展示了如何使用jQuery和HTML5 Canvas技术来创建独特的用户体验。通过研究和理解这个代码，开发者可以进一步提升自己在移动端交互设计和...
这个双日历控件充分利用了jQuery的这些优点，确保在所有主流浏览器（如Chrome、Firefox、Safari、Edge、IE等）上都能正常运行，避免了因浏览器兼容性问题导致的用户体验下降。 日历控件通常包含以下几个关键功能： ...
在本“div层高度可拖动demo”中，开发者利用`div`来创建一个可交互的界面，使得用户可以通过鼠标...同时，这也是一个提升前端开发技能的好机会，尤其是对于理解DOM操作、事件处理和浏览器兼容性问题有很好的实践价值。
综上，"jQuery-Autocomplete-master"压缩包提供的实例，不仅展示了如何使用jQuery Autocomplete插件实现自动补全功能，还涵盖了本地和远程数据源的处理，对于前端开发者来说，这是一个很好的学习和实践资源。
【基于JQuery的虚拟桌面 VirtualDesktop】是...这个项目对于学习和实践前端开发，尤其是使用JQuery实现交互效果，是一个很好的实例。开发者可以通过研究这个项目来了解如何在浏览器环境中实现类似桌面系统的交互体验。
首先，jQuery是JavaScript的一个库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务。在这个项目中，jQuery库（jquery.2.1.4.min.js）被用来处理用户点击事件和动态添加图片到页面上的逻辑。 当用户点击网页的...
2. **兼容性**：jQuery具有良好的浏览器兼容性，可以很好地运行在大多数现代浏览器上。 3. **社区支持**：由于jQuery的广泛使用，有大量现成的插件和教程可供参考，开发和维护成本较低。 4. **事件绑定**：通过...
《传智播客用到的jQuery库详解》 在IT领域，jQuery是一个广泛使用的JavaScript库，它极大地简化...对于学习和理解jQuery的初级开发者来说，这是一个很好的起点，而对于有经验的开发者来说，这也是一个实用的工具集合。
jQuery Autocomplete 是一个非常流行的 jQuery 插件，它为网页表单输入框提供了强大的自动完成或自动补全功能。这个插件极大地提升了用户在输入搜索关键词或填写数据时的体验，使得用户可以快速找到并选择所需的内容...
此外，jQuery 2.2.4还引入了一些关键的改进和修复，包括对现代浏览器的更好兼容性，提高了性能，以及修复了一些已知的bug。这使得这个版本的jQuery在当时是一个可靠的选择，对于那些不需使用新特性的项目来说，至今...
如果"1.html"包含这些优化措施，那将是一个很好的学习示例。 综上所述，"P215网页作业.zip"可能涵盖了HTML结构、CSS样式、JavaScript交互、Web标准、响应式设计以及网页布局和优化等多个方面。对于初学者来说，这个...
- **延迟加载**：避免用户每次按键都发送请求，可以设置一个最小输入长度或输入间隔时间。 - **缓存结果**：用户多次输入相同的前缀时，可复用之前的查询结果。 - **分页加载**：如果建议列表很长，可以分页加载，...
jQuery是一个广泛应用于Web开发的...尽管jQuery 1.4.2是一个较旧的版本，但在很多场景下仍然可以正常工作，但为了保持代码的最新性和安全性，建议升级到更高版本，如jQuery 3.x或更高版本，以获取更好的性能和兼容性。
ASP.NET是一种基于微软.NET框架的Web应用程序开发平台，它提供了丰富的服务器...这个压缩包中的源码提供了一个很好的学习和参考实例，可以帮助开发者深入理解ASP.NET中日期选择控件的工作原理及其在商业编程中的应用。
5. **版本兼容性**：虽然`select2-4.0.6`进行了很多优化，但在使用过程中仍需注意与其他库的兼容性，避免冲突。 总结，`select2-4.0.6`是一个功能强大且易用的前端选择器组件，它的JS和CSS文件共同构成了一个完整的...
这个文件很可能包含了一个精简版的 jQuery Form Plugin，这个插件扩展了 jQuery 对象，以便更方便地操作HTML表单，实现无刷新的数据提交。 ### 使用 jQuery UI 1.7 Min 使用这个压缩版的步骤通常包括以下几步： 1...