AJAX - 向服务器发送一个请求
要想把请求发送到服务器，我们就需要使用 open() 方法和 send() 方法。
open() 方法需要三个参数。第一个参数定义发送请求所使用的方法（GET 还是 POST）。第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。
send() 方法可将请求送往服务器。如果我们假设 HTML 文件和 ASP 文件位于相同的目录，那么代码是这样的：
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
现在，我们必须决定何时执行 AJAX 函数。当用户在用户名文本框中键入某些内容时，我们会令函数“在幕后”执行。
<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction();" />
时间: <input type="text" name="time" />
</form>
</body>
</html>
分享到：
相关推荐
Ajax，即Asynchronous JavaScript and XML，允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容，提供更流畅的用户体验。 在“jQuery-ajax-用户名异步请求”这个场景中，我们可能是在设计一个...
WEB开发之AJAX - 向服务器发送请求 AJAX（Asynchronous JavaScript and XML）是Web开发中的一种技术，用于实现客户端和服务器之间的异步通信。在本文档中，我们将学习如何使用XMLHttpRequest对象向服务器发送请求。...
Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、调试以及测试来说是一个强大的工具，特别...
在实际项目中，有时我们需要通过Ajax请求与远程服务器进行交互，但出于安全或跨域限制，这可能会遇到问题。为了解决这些问题，"ajax-forwarder"应运而生。 "ajax-forwarder"是一个Laravel包，其主要功能是作为代理...
3. **历史记录**：默认情况下，Ajax请求不会改变浏览器的历史记录，可能影响用户回退操作。 **五、学习资源与进阶** 1. **基础教程**：初学者可以通过在线教程和书籍学习Ajax的基本使用，如MDN的Ajax教程。 2. **...
1. **实时数据更新**：在网页中，如股票报价、天气预报等实时信息，Ajax-Bridge 可以定期向服务器请求最新数据，无须刷新页面即可更新内容。 2. **表单提交**：传统的表单提交会导致页面刷新，使用Ajax-Bridge 可以...
在Ajax-B项目中，可能使用Java编写了服务器端接口，比如Servlet或Spring MVC控制器，这些接口接收来自AJAX请求的数据，并返回需要更新的页面内容。 **JSON** 虽然在标签中未提及，但通常在现代AJAX应用中，代替XML...
2. **Caching**：缓存策略可以用于优化AJAX请求，减少不必要的服务器负载。 3. **Error Handling**：处理AJAX请求失败的情况，提供良好的用户反馈。 4. **Progress Indicators**：在长时间运行的AJAX操作中显示...
除了`context`，AJAX请求还有许多其他重要参数，如`url`指定服务器端的接口地址，`type`定义请求类型（GET, POST等），`data`发送到服务器的数据，`dataType`预期服务器返回的数据类型（JSON, XML, HTML等），以及...
其中，获取Ajax请求记录是开发者调试过程中非常关键的一环，因为它可以帮助开发者检查数据的发送和接收情况，排查网络问题，以及理解应用程序的工作流程。 Chrome扩展插件就是一种增强浏览器功能的方式，它们可以...
7. **跨域问题**：默认情况下，Ajax请求遵循同源策略，即只能访问同源（协议、域名、端口相同）的资源。为了实现跨域请求，可以使用CORS（跨源资源共享）或者JSONP（JSON with Padding）。 8. **Ajax库和框架**：...
9. **Promise和async/await**：在现代浏览器中，可以使用Promise和async/await语法处理AJAX请求，使异步编程更加简洁和易读。 10. **错误处理**：确保添加适当的错误处理机制，如检查请求状态、捕获异常，以及使用...
2. Ajax请求：这个事件会触发一个Ajax请求，向服务器发送数据，通常包含用户当前选择的tab标识。 3. 服务器处理：服务器接收到请求后，根据请求参数加载相应的内容，可以是HTML片段、JSON数据或其他格式。 4. 数据...
在这个项目中，PHP负责在服务器端生成验证码，存储其值，并在接收到Ajax请求后验证用户输入的验证码是否匹配。PHP代码可能包括生成随机字符串、设置session存储验证码以及处理Ajax请求的逻辑。 5. **Session管理** ...
当用户点击一个Tab时，不会立即跳转到新的URL，而是触发一个Ajax请求，这个请求会向服务器发送特定的数据（例如当前选中的Tab ID），然后服务器返回对应Tab内容的数据，如HTML片段、JSON等。JavaScript接收到响应后...
1. **Controller**：服务器端的Controller接收Ajax请求，处理业务逻辑，可能涉及到数据库查询或其他操作。 2. **Model**：Model层处理数据，如读取数据库、计算等，然后将结果返回给Controller。 3. **Response**...
2. **触发事件**：JavaScript监听到该事件并触发Ajax请求。 3. **发送异步请求**：使用XMLHttpRequest对象向服务器发送请求，请求可以是GET或POST，请求内容可以是XML、JSON或其他格式的数据。 4. **服务器处理**：...
在这个项目中，我们可能会遇到使用C#处理AJAX请求的函数，如处理POST或GET请求，以及返回JSON或XML数据。 3. 数据交换格式： 由于AJAX的异步特性，数据通常以JSON或XML格式在客户端和服务器之间传输。JSON...
2. **JavaScript事件**：Ajax通常与用户交互相关，例如点击按钮、提交表单等事件触发Ajax请求。JavaScript用于监听这些事件，并在事件触发时执行相应的Ajax操作。 3. **DOM操作**：接收到服务器返回的数据后，Ajax...
当用户触发一个AJAX请求时，JavaScript会创建一个新的XMLHttpRequest对象，然后调用其`open()`方法来指定请求类型（GET或POST）、URL以及是否异步执行。接着，使用`send()`方法发送请求。在请求处理期间，可以监听...