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>
下一节介绍 "time.jsp" 的脚本,这样我们完整的 AJAX 应用程序就搞定了。
分享到:
相关推荐
**Ajax(Asynchronous JavaScript and XML)**是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这个技术由JavaScript实现,通常与...通过不断实践和深入学习,你将能够运用Ajax创造出更多优秀的Web项目。
6. **错误处理**:理解如何在Ajax请求中捕获和处理可能出现的错误,确保程序的健壮性。 7. **范例源码**:每个文档(如6471ch01_final_idxv2.doc到6471ch11_final_idx_v2.doc)可能对应一个或多个示例,详细解释了...
3. **Controls**:DWR还提供了丰富的UI控件,如表格、树形结构等,这些控件可以直接与服务器进行数据交换,无需手动处理Ajax请求和响应。 4. **Caching**:DWR支持缓存策略,可以有效地减少网络传输,提高性能。 #...
分页则可以通过设置每页显示的许愿数量,结合Ajax请求不同页码的数据来实现。 最后,考虑到安全性,前端需要对用户输入进行验证,防止SQL注入等攻击。同时,服务器端也要进行数据校验和过滤,确保数据安全。 综上...
【Ajax实战——深入理解AJAX】 Ajax,全称为"Asynchronous JavaScript and XML",是一种在无需刷新整个网页的情况下,能够更新部分网页内容的技术。Ajax的核心在于利用JavaScript与服务器进行异步数据交换,结合XML...
1. **创建XMLHttpRequest对象**:在JavaScript中,首先需要创建一个XMLHttpRequest对象,这是Ajax的基础。现代浏览器通常都内置了这个对象,老版本的IE则需要通过ActiveXObject来创建。 2. **建立连接**:使用...
在"Ajax征服——Ajax小偷模块 源码"中,我们可能会涉及到以下几个关键知识点: 1. **XMLHttpRequest对象**:这是Ajax的基础,用于在后台与服务器进行通信。通过创建XMLHttpRequest实例,我们可以打开到服务器的连接...
在Ajax请求中,可以将数据序列化为JSON字符串发送到服务器,服务器处理后返回同样格式的响应。 ### 3. 相册模块设计 一个基本的相册模块应包含以下功能: - **图片加载**:使用Ajax动态加载图片,避免一次性加载...
Ajax Interceptor 是一款专为谷歌浏览器(Chrome)设计的插件,它允许开发者在Ajax请求发送后和响应返回前进行干预,从而实现对AJAX请求数据的修改。这款插件对于前端开发、调试以及测试来说是一个强大的工具,特别...
**Ajax异步请求服务器——基于Jquery** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新。在本...
在“使用JSON向服务器发送数据——ajax基础笔记”这个主题中,我们首先会了解如何创建一个XMLHttpRequest对象。在JavaScript中,你可以通过`new XMLHttpRequest()`来实例化一个对象,然后利用它的方法如`open()`、`...
- **后端处理**:服务器端接收并处理Ajax请求,可能涉及数据库操作,如存储新留言、检索旧留言等。 - **动态更新**:接收到服务器响应后,JavaScript将新数据插入到页面的适当位置,更新留言列表。 3. **Ajax请求...
6. **服务器端处理**:服务器接收到Ajax请求后,需要处理这些消息,可能涉及到数据库操作,如存储用户发送的消息,然后广播给其他在线用户。 7. **实时性**:为了实现实时聊天,可能需要使用WebSocket或者Server-...
2. **安全问题**:由于AJAX请求仍然遵循同源策略,跨域请求需要服务器端设置CORS头。 3. **SEO挑战**:搜索引擎爬虫可能无法抓取通过AJAX加载的内容,影响页面的搜索引擎排名。 **六、现代Web中的AJAX** 随着Fetch...
【标题】"Atlas基础教程——ASP.NET Ajax快速开发 code"主要涵盖了使用ASP.NET框架与Ajax技术进行高效Web应用开发的知识点。Atlas是微软在早期推出的一个用于构建富客户端Web应用程序的框架,它允许开发者在不刷新...
4. **Vue.js的Axios插件**:Vue生态中的常用插件,结合Vue的组件化特性,方便地处理Ajax请求。 **四、Ajax案例分析** 1. **无限滚动**:在新闻网站或社交媒体中,当用户滚动到底部时,通过Ajax加载更多内容,无需...
总结来说,J2EE中集成Ajax和DWR涉及的主要步骤包括:配置`dwr.xml`以定义可调用的Java对象和方法,设置`web.xml`中的DWR Servlet以处理Ajax请求,引入DWR的依赖库,并在HTML页面中引入DWR的JavaScript库。...
### Ajax基础学习资料知识点解析 #### 一、Ajax概述 **定义:** Ajax(Asynchronous JavaScript and XML)是一种创建交互式网页应用的技术组合,通过在后台与服务器进行少量数据交换,使得网页能够异步更新。这...