输入城市代码:
发送请求
返回城市名称。
如下:
request.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <mce:script language="javascript"><!-- function GetXmlHttpObject(){ var xmlHttp = null; try{ xmlHttp = new XMLHttpRequest(); }catch(e){ try{ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; } function showMsg(str){ xmlHttp = GetXmlHttpObject(); if(xmlHttp == null){ alert ("you browser don't support the ajax"); return; } var url = "response.jsp"; url = url + "?q="+ str; url = url + "&sid ="+ Math.random(); xmlHttp.onreadystatechange = stateChanged; xmlHttp.open("GET", url, true); xmlHttp.send(null); } function stateChanged() { if(xmlHttp.readyState==4) { document.getElementById("city").value = xmlHttp.responseText; } } // --></mce:script> </head> <body> <form name="form1" action="" method="post"> <label >City Code:</label> <input type="text" name="code" onblur = "showMsg(this.value)" /> <br></br> <label>City Name:</label> <input type="text" name="city" id="city" ></input> </form> </body> </html>
response.jsp
<%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="com.lwf.eus.util.*,java.util.*,com.lwf.eus.entity.*,com.lwf.eus.bean.*" %> <% String code = request.getParameter("q"); System.out.println(code); if(code.equals("140")) out.print("上海"); else if(code.equals("150")) out.print("北京"); else if(code.equals("160")) out.print("天津"); else out.print("未知地"); %>
这里要注意的是由于返回的结果要在文本框中显示,因此在response.jsp中没有<html>等标签,因为测试发现如果有这些标签的话,在cityname文本框中这些标签也会显示。。
您还没有登录,请您登录后再发表评论
例如,发起一个GET请求: ```javascript xhr.open('GET', 'ajaxchina', true); ``` 3. **设置回调函数**:Ajax请求是异步的,所以我们需要设置事件监听器来处理响应。主要有`onreadystatechange`和`ontimeout`等...
综上所述,【Ajax示例】中的中国省份、城市、城镇联动选择列表框展示了Ajax如何结合JavaScript和DOM操作,实现动态交互和数据加载,提供了一种高效、流畅的用户界面设计。同时,它也涵盖了Web开发中的多个重要概念和...
下面是一个简单的Ajax请求示例,使用jQuery库: ```javascript $.ajax({ url: '/api/posts', // 调用Spring MVC的URL type: 'GET', dataType: 'json', success: function(data) { // 更新DOM元素,显示返回的...
以下是一个关于如何在.NET环境下创建最简单AJAX示例的详细讲解。 首先,我们需要了解AJAX的基本工作原理。它允许浏览器在不重新加载整个页面的情况下,通过JavaScript向服务器发送异步请求并接收响应数据。这提高了...
本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制,它规定了只有来自同一协议、同一域名和同一...
在这个示例中,我们将探讨如何在JSP中实现一个简单的用户存在性验证功能,利用Ajax来发送异步请求。 首先,我们需要创建一个JSP页面作为客户端,用于显示用户界面并处理Ajax请求。在JSP中,我们通常会引入jQuery库...
1. 同步请求:将Ajax请求设置为同步(async: false),这样可以确保请求按照发出的顺序执行。但这种方法会导致浏览器阻塞,直到所有请求完成,可能导致页面无响应。 2. 请求队列:手动管理请求队列,当有新的请求时...
在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax功能,特别是如何利用它进行异步用户名验证。Ajax,即Asynchronous JavaScript and ...
通过学习和理解这些Ajax示例源码,开发者可以更好地掌握Ajax的运用,从而在实际项目中构建更加动态和交互丰富的网页应用。无论是简单的数据获取,还是复杂的表单提交、文件上传,Ajax都能提供有效的解决方案。
总的来说,这个简单的Ajax示例展示了如何在不刷新整个页面的情况下与服务器进行通信,以及如何在Struts框架中配合使用Ajax。在实际开发中,我们还可以进一步优化,比如添加错误处理、使用Promise等现代JavaScript...
本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据通信。 首先,jQuery是一个强大的JavaScript库,它为DOM操作、事件处理、动画效果和Ajax交互提供了...
下面是一个简单的jQuery AJAX请求示例,从服务器获取JSON数据并显示在页面上: ```html <!DOCTYPE html> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <button id="loadData">Load ...
在本资料中,我们将通过18个具体的Ajax示例,帮助你轻松掌握Ajax的核心概念和实践技巧。** ### 1. 基础概念 - **异步通信**:Ajax的核心特性,允许页面在不重新加载的情况下与服务器交互。 - **XMLHttpRequest对象*...
这一行代码的作用是在完成Ajax请求后,阻止按钮默认的提交行为,代码示例如下: ```javascript $('#submit').click(function(){ // 这里省略了之前的Ajax请求代码 ... // 请求成功后,阻止按钮默认行为 return ...
上述示例展示了如何使用jQuery发起Ajax请求并处理服务器响应,对于初学者来说是一个很好的起点。随着技术的发展,虽然Ajax的原始形式可能逐渐被Fetch API等新技术所取代,但其核心理念——异步通信——仍然是现代Web...
Ajax的工作原理是通过JavaScript创建XMLHttpRequest对象,该对象负责与服务器进行异步通信,发送请求并接收响应。通过这种方式,用户可以在不离开当前页面的情况下获取和更新数据,提升了用户体验。 **二、核心组件...
这个“ajax示例java版本”应该是一个Java实现的Ajax应用,用于演示如何在后台处理和前端交互。 在Java中实现Ajax通常涉及到以下关键知识点: 1. **JavaScript库**:虽然Ajax的核心是JavaScript,但实际开发中我们...
在压缩包文件"ajaxBasicJavaScript"中,可能包含了一些基础的Ajax示例代码,这些代码可能涵盖了上述步骤的实现,用于展示如何使用JavaScript进行Ajax请求。通过学习和分析这些示例,你可以更好地理解Ajax的工作原理...
总之,`ajax示例 原代码`中的这三个文件展示了如何使用Ajax技术来实现动态页面更新,提供了一种非刷新方式的数据交互,增强了Web应用的交互性和响应速度。通过学习和理解这些示例,开发者可以更好地掌握Ajax的使用,...
这个“Ajax 示例”旨在展示如何使用 Ajax 技术来实现异步请求,从而获取并显示静态内容,例如系统当前时间。 **Ajax 的核心组成部分** 1. **XMLHttpRequest 对象**:这是 Ajax 的基石,它允许 JavaScript 在后台与...
相关推荐
例如,发起一个GET请求: ```javascript xhr.open('GET', 'ajaxchina', true); ``` 3. **设置回调函数**:Ajax请求是异步的,所以我们需要设置事件监听器来处理响应。主要有`onreadystatechange`和`ontimeout`等...
综上所述,【Ajax示例】中的中国省份、城市、城镇联动选择列表框展示了Ajax如何结合JavaScript和DOM操作,实现动态交互和数据加载,提供了一种高效、流畅的用户界面设计。同时,它也涵盖了Web开发中的多个重要概念和...
下面是一个简单的Ajax请求示例,使用jQuery库: ```javascript $.ajax({ url: '/api/posts', // 调用Spring MVC的URL type: 'GET', dataType: 'json', success: function(data) { // 更新DOM元素,显示返回的...
以下是一个关于如何在.NET环境下创建最简单AJAX示例的详细讲解。 首先,我们需要了解AJAX的基本工作原理。它允许浏览器在不重新加载整个页面的情况下,通过JavaScript向服务器发送异步请求并接收响应数据。这提高了...
本示例"Jquery跨域Ajax请求测试"将详细讲解如何利用jQuery实现这一功能。 首先,了解同源策略是理解跨域问题的关键。同源策略是浏览器为了保障用户安全而设定的一项机制,它规定了只有来自同一协议、同一域名和同一...
在这个示例中,我们将探讨如何在JSP中实现一个简单的用户存在性验证功能,利用Ajax来发送异步请求。 首先,我们需要创建一个JSP页面作为客户端,用于显示用户界面并处理Ajax请求。在JSP中,我们通常会引入jQuery库...
1. 同步请求:将Ajax请求设置为同步(async: false),这样可以确保请求按照发出的顺序执行。但这种方法会导致浏览器阻塞,直到所有请求完成,可能导致页面无响应。 2. 请求队列:手动管理请求队列,当有新的请求时...
在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理以及Ajax交互。本主题聚焦于jQuery中的Ajax功能,特别是如何利用它进行异步用户名验证。Ajax,即Asynchronous JavaScript and ...
通过学习和理解这些Ajax示例源码,开发者可以更好地掌握Ajax的运用,从而在实际项目中构建更加动态和交互丰富的网页应用。无论是简单的数据获取,还是复杂的表单提交、文件上传,Ajax都能提供有效的解决方案。
总的来说,这个简单的Ajax示例展示了如何在不刷新整个页面的情况下与服务器进行通信,以及如何在Struts框架中配合使用Ajax。在实际开发中,我们还可以进一步优化,比如添加错误处理、使用Promise等现代JavaScript...
本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据通信。 首先,jQuery是一个强大的JavaScript库,它为DOM操作、事件处理、动画效果和Ajax交互提供了...
下面是一个简单的jQuery AJAX请求示例,从服务器获取JSON数据并显示在页面上: ```html <!DOCTYPE html> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <button id="loadData">Load ...
在本资料中,我们将通过18个具体的Ajax示例,帮助你轻松掌握Ajax的核心概念和实践技巧。** ### 1. 基础概念 - **异步通信**:Ajax的核心特性,允许页面在不重新加载的情况下与服务器交互。 - **XMLHttpRequest对象*...
这一行代码的作用是在完成Ajax请求后,阻止按钮默认的提交行为,代码示例如下: ```javascript $('#submit').click(function(){ // 这里省略了之前的Ajax请求代码 ... // 请求成功后,阻止按钮默认行为 return ...
上述示例展示了如何使用jQuery发起Ajax请求并处理服务器响应,对于初学者来说是一个很好的起点。随着技术的发展,虽然Ajax的原始形式可能逐渐被Fetch API等新技术所取代,但其核心理念——异步通信——仍然是现代Web...
Ajax的工作原理是通过JavaScript创建XMLHttpRequest对象,该对象负责与服务器进行异步通信,发送请求并接收响应。通过这种方式,用户可以在不离开当前页面的情况下获取和更新数据,提升了用户体验。 **二、核心组件...
这个“ajax示例java版本”应该是一个Java实现的Ajax应用,用于演示如何在后台处理和前端交互。 在Java中实现Ajax通常涉及到以下关键知识点: 1. **JavaScript库**:虽然Ajax的核心是JavaScript,但实际开发中我们...
在压缩包文件"ajaxBasicJavaScript"中,可能包含了一些基础的Ajax示例代码,这些代码可能涵盖了上述步骤的实现,用于展示如何使用JavaScript进行Ajax请求。通过学习和分析这些示例,你可以更好地理解Ajax的工作原理...
总之,`ajax示例 原代码`中的这三个文件展示了如何使用Ajax技术来实现动态页面更新,提供了一种非刷新方式的数据交互,增强了Web应用的交互性和响应速度。通过学习和理解这些示例,开发者可以更好地掌握Ajax的使用,...
这个“Ajax 示例”旨在展示如何使用 Ajax 技术来实现异步请求,从而获取并显示静态内容,例如系统当前时间。 **Ajax 的核心组成部分** 1. **XMLHttpRequest 对象**:这是 Ajax 的基石,它允许 JavaScript 在后台与...