第一个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 简单猜数游戏 ...
第一章 动态加载数据 1.1动态加载的FAQ 1.2根据邮政编码获取地区信息 1.3动态树形列表 1.4多级联动菜单 1.5条件设置向导 1.6页面关键词提示 第二章 改善用户体验 2.1无刷新显示回帖 2.2输入内容...
在本篇“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的...