第一个ajax实例:
项目图参见附件:
实例源代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>第一个ajax实例</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<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;
}
}
}//第一个catch
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.getElementById("reuslt").innerHTML = xmlHttp.responseText;
//document.myForm.time.value = xmlHttp.responseText;
}
}
xmlHttp.open("POST", "time.jsp", true);
xmlHttp.send(null);
}//function
</script>
</head>
<body>
<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction() ;" />
<br></br>时间: <input type="text" name="time" />
</form>
<div id="reuslt"></div>
</body>
</html>
——————————————————————————————————————
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'time.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
Date date = new Date();
String time = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
//response
out.print(time);
%>
</body>
</html>
- 大小: 1.3 KB
分享到:
相关推荐
check.rar 第3章 第一个Ajax实例 pageinfo.rar 第9章 鼠标信息提示 suggest.rar 第10章 文本框输入提示 relatechg.rar 第11章 下拉列表自动关联 checkname.rar 第12章 自动检查用户名 savepad.rar 第13章 ...
本Ajax实例将深入讲解如何实现这一功能。 ### 1. Ajax的基本原理 Ajax的工作流程主要包括以下步骤: 1. **创建XMLHttpRequest对象**:这是Ajax的基础,它负责与服务器进行通信。 2. **打开连接**:使用...
4. **AJAX实例应用场景:** - **表单验证**:在提交前验证用户输入,无需跳转即可反馈错误信息。 - **分页加载**:动态加载更多内容,减少页面加载时间。 - **实时数据更新**:如股票报价、天气预报等实时信息,...
**JS使用AJAX实例** AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在JavaScript中,我们通常使用`XMLHttpRequest`对象或者jQuery库来实现AJAX请求。 1...
总的来说,通过学习这个ASP.NET AJAX实例,你可以了解如何使用UpdatePanel、ScriptManager和其他相关控件来创建动态、响应式的Web界面,提升用户的交互体验。同时,你也将掌握如何在服务器端处理异步请求,并将结果...
当用户在第一个选择框中选择省份(如ZHEJIANG或JIANGSU)时,第二个选择框会显示对应省份的城市。这个功能可以提升用户在填写表单时的效率,无需多次刷新页面。 首先,我们需要在`web.xml`配置文件中定义一个...
第1章 PHP基础实例 实例1 构建PHP运行环境 实例2 “你好,PHP”实例 实例3 中文时间显示实例 实例4 删除字符串中的空白 实例5 字符串反转 实例6 字符串加密 实例7 检查日期的有效性 实例8 简单猜数游戏 实例9 验证...
这个简单的Ajax实例“AjaxSample”旨在演示如何通过JavaScript实现异步数据交换,从而提升用户体验,减少页面刷新带来的延迟感。 在Ajax的核心概念中,有以下几个关键组成部分: 1. **XMLHttpRequest对象**:这是...
文章中提到的第一个AJAX实例是基于Servlet的Web应用,具体场景是在用户选择省份后动态加载对应城市列表。实现这一功能的关键步骤包括: 1. **配置Servlet**:在`web.xml`中配置一个名为`SelectCityServlet`的...
在 JavaScript 中,Ajax 的第一步是创建一个 XMLHttpRequest 对象。这个对象是浏览器内置的,可以用来与服务器进行通信。在所有现代浏览器中,我们可以通过 `new XMLHttpRequest()` 来创建。 2. **设置请求属性** ...
"asp.net+ajax网站开发典型实例(第一篇)"这个主题意在通过具体的项目案例,帮助学习者理解如何将理论知识应用到实际开发中。实例通常涵盖常见的应用场景,如数据的异步加载、用户界面的动态更新等,有助于提升...
3.2,用onreadystatechange来指定数据装载的方式.(onreadystatechange是一个异步响应事件,就是因为它,ajax才那么完美.onreadystatechange事件中可以接收到服务器传回来的数据,通过分析和利用这些数据从而完成...
第1章 PHP基础实例 实例1 构建PHP运行环境 实例2 “你好,PHP”实例 实例3 中文时间显示实例 实例4 删除字符串中的空白 实例5 字符串反转 实例6 字符串加密 实例7 检查日期的有效性 实例8 简单猜数游戏 ...
在本篇“AJAX学习总结(一)--基于jQuery第一个实例”中,我们将探讨如何使用jQuery库实现异步JavaScript和XML(AJAX)技术。AJAX允许我们在不刷新整个页面的情况下,更新网页的部分内容,从而提供更流畅的用户体验...
- 第一个参数表示请求类型,如`GET`或`POST`。 - 第二个参数表示请求的URL地址。 - 第三个参数表示请求是否为异步,`true`表示异步请求。 **2. 发送请求** - 使用`send`方法发送请求数据到服务器。 - 如果请求...
**Ajax 实例与联动技术详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分...这个实例展示了如何用Java和Ajax结合实现联动效果,提供了前后端交互的一个基本框架。
在这个典型的实例第四篇中,我们将深入探讨Ajax核心基础,了解如何利用这些技术创建更富用户体验的动态网页。 首先,让我们来理解一下ASP.NET。ASP.NET是由微软开发的一种服务器端Web应用程序框架,它允许开发者...
文件名称"lession_1"暗示了这是一个逐步教学的系列,第一课可能主要涉及基础设置和简单的Ajax请求。开发者可能会通过一个简单的例子,如创建一个数据加载器,展示如何从服务器获取数据并在AIR应用中显示。这可能包括...
第一个实例可能是"发送GET请求"。在这个例子中,用户可能会触发一个按钮点击事件,JavaScript将利用XMLHttpRequest创建一个HTTP GET请求到服务器,获取数据。服务器处理请求后,返回的数据会被XMLHttpRequest的...
2. 使用JavaScript(如jQuery或其他库)监听第一个菜单的选择事件。 3. 当选择改变时,发送AJAX请求到服务器,传递选定的主类别ID。 4. PHP后端接收到请求,根据ID查询数据库,并将子类别的数据以JSON格式返回。 5. ...