ajax简介
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
(以上摘自w3school)
这是第一次我使用ajax的jsp源文件,包括ajax.jsp和check.jsp。
<!-- ajax.jsp-->
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax使用</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">
<script type='text/javascript'>
var req;
function check(){
var field = document.getElementById("user");
var url = "check.jsp?id="+escape(field.value);
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
}else if(window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("Get", url, true, null, null);
req.onreadystatechange = callback;
req.send(null);
}
function callback(){
if(req.readyState == 4){
if(req.status == 200){
document.getElementById("check").innerHTML = req.responseText;
}
}
}
</script>
</head>
<body >
<form>
<table align='center'>
<tr>
<td>用户名</td>
<td><input type='text' id='user' onblur='check()'/></td>
<td id='check'></td>
</tr>
</table>
</form>
</body>
</html>
下面是check.jsp
<%--check.jsp --%>
<%
response.setCharacterEncoding("utf-8");
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-store");
response.setHeader("Pragma","no-cache");
response.setDateHeader("Expires", 0);
response.getWriter().write("OK ");
%>
分享到:
相关推荐
在使用JavaScript的Ajax请求时,如果在Ajax请求完成后没有阻止按钮的默认行为,即表单提交,就会发生“一次点击两次提交”的情况。下面详细探讨两种常用的解决办法。 ### 解决方案一:更改按钮的type属性 第一种...
### AJAX使用场景分析 #### 一、表单驱动的交互 传统的表单提交方式存在一定的局限性:当用户填写完表单并提交后,整个页面会进行刷新,以展示后台处理的结果。这种方式不仅可能导致用户体验下降,还可能使用户在...
然而,有时开发者可能会遇到一个问题:明明发送了一个Ajax请求,但在浏览器的开发者工具(如Chrome的F12)中却发现该请求被执行了两次。这种现象可能会导致数据处理错误,增加服务器负载,甚至影响用户体验。本文将...
这些文件共同构成了一次完整的AJAX交互过程。 总的来说,通过学习这个ASP.NET AJAX实例,你可以了解如何使用UpdatePanel、ScriptManager和其他相关控件来创建动态、响应式的Web界面,提升用户的交互体验。同时,你...
这个里面继承了一些东西包括css jquery,我都是之前听别人说今天特意验证一下,用了一天的时间写的,第一次有思路就是不熟悉,好多想做的功能没有做出来,还是可以拿来学习用的,希望对你们有用帮助吧!
在这个例子中,第一次Ajax请求获取省份数据,处理响应时,根据用户的选择发送第二个请求获取对应城市的列表。 四、XML在Ajax中的作用 尽管Ajax名字中有XML,但实际应用中,JSON已成为更常用的数据交换格式,因为...
在JavaWeb开发中,分页是一种常见的功能,用于处理大量数据的展示,它能提高用户体验,避免一次性加载过多数据导致页面响应慢。本教程将详细讲解如何使用Ajax和jQuery实现分页功能,同时也会探讨Ajax请求中的POST和...
在实际应用中,我们经常会遇到使用 Ajax 返回某一个网页的内容到模板页面的某一个 `<div>` 标签中显示的操作。如果返回的值仅仅是文本类数据,不会影响模板页面的功能,但是如果返回的数据包括 JavaScript,那么直接...
当用户在第一个选择框中选择省份(如ZHEJIANG或JIANGSU)时,第二个选择框会显示对应省份的城市。这个功能可以提升用户在填写表单时的效率,无需多次刷新页面。 首先,我们需要在`web.xml`配置文件中定义一个...
// 每3秒切换一次 } }); ``` 然而,如果我们想要从服务器动态获取图片数据,我们可以使用ajax从后台获取json格式的图片列表。假设我们的json数据如下: ```json { "images": [ {"url": "image1.jpg", "title":...
Direct Web Remoting (DWR) 是一个开源Java库,它允许在浏览器和服务器之间进行安全、高效的异步通信,即所谓的“反向AJAX”或“Comet”技术。DWR使得JavaScript能够调用服务器端的Java方法,就像它们是本地函数一样...
为了解决这个问题,开发者通常会借助AJAX技术,通过创建自定义的上传组件或者使用第三方库如jQuery File Upload、AjaxFileUpload等来实现多文件的异步上传。 在实现过程中,关键步骤包括: 1. **前端界面**:创建...
// 第一次等待10秒后进行轮询 checkLoading(10000); ``` 在上述代码中,我们首先使用setTimeout函数实现延时调用,这样可以在发起请求之前等待一段预设的时间。如果checkLoading函数在没有设置延时参数的情况下被...
HelloWorld 第一个Ajax应用程序 第2章 浏览器中的JavaScript Test4Navigator.htm User-Agent检测法 Test4Window1.htm window对象属性 test4Alert.htm 系统对话框 Test4Timeout.htm 时间间隔和暂停 Test...
Ajax技术的实现通常依赖于JavaScript库,如jQuery,它简化了XMLHttpRequest对象的使用,使得开发者能够轻松地实现异步请求。同时,XML不再是最常见的数据交换格式,JSON(JavaScript Object Notation)由于其简洁和...
选项卡组件的设计目的是优化用户体验,通过将大量信息分隔到不同的标签页,让用户可以有选择地查看和交互,而不是一次性呈现所有内容。AJAX技术的引入使得选项卡切换更加流畅,减少了服务器负载,并提升了页面响应...
补充:第一次发布时,忘了图片打包进来. 以下载的朋友可以在这里下载图片 http://p.blog.csdn.net/images/p_blog_csdn_net/alphayycn/337547/o_root.gif 依次为:t_L1.gif,t_L2.gif,t_L4.gif,t_M1.gif,t_M2.gif,t_P1....
ASP.NET 在2007年初推出了其第一个正式版本,并将Atlas更名为ASP.NET AJAX,对应服务器端和客户端分别对应有ASP.NET服务器端编程模型和ASP.NET客户端编程模型,前者包含ASP.NET 2.0 AJAX Extensions和,后者包含...
之所以叫处女秀,是因为这是我第一次上台做技术演讲,但是这句话却不是我自己想到的,而是江南白衣说出来的。 PPT的标题是《Ajax技术地图》,基本上是一个纯粹空对空的理论探索,不出现一行代码。还好随后曹晓钢的...
具体到本文中,开发者在第二次尝试中使用了setTimeout,将AJAX请求放入setTimeout所创建的函数中。这样做允许浏览器在执行AJAX请求之前先执行页面上其他未被阻塞的JavaScript代码和渲染操作。通过这种方式,页面的UI...