`
ssun125
  • 浏览: 44643 次
文章分类
社区版块
存档分类
最新评论

第一次使用Ajax

 
阅读更多

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 ");
 %>


分享到:
评论

相关推荐

    按钮的Ajax请求时一次点击两次提交的解决方法

    在使用JavaScript的Ajax请求时,如果在Ajax请求完成后没有阻止按钮的默认行为,即表单提交,就会发生“一次点击两次提交”的情况。下面详细探讨两种常用的解决办法。 ### 解决方案一:更改按钮的type属性 第一种...

    AJAX使用场景分析

    ### AJAX使用场景分析 #### 一、表单驱动的交互 传统的表单提交方式存在一定的局限性:当用户填写完表单并提交后,整个页面会进行刷新,以展示后台处理的结果。这种方式不仅可能导致用户体验下降,还可能使用户在...

    ajax请求一次却执行两次.zip

    然而,有时开发者可能会遇到一个问题:明明发送了一个Ajax请求,但在浏览器的开发者工具(如Chrome的F12)中却发现该请求被执行了两次。这种现象可能会导致数据处理错误,增加服务器负载,甚至影响用户体验。本文将...

    asp.net ajax一个实例

    这些文件共同构成了一次完整的AJAX交互过程。 总的来说,通过学习这个ASP.NET AJAX实例,你可以了解如何使用UpdatePanel、ScriptManager和其他相关控件来创建动态、响应式的Web界面,提升用户的交互体验。同时,你...

    PHP AJAX 简单留言板

    这个里面继承了一些东西包括css jquery,我都是之前听别人说今天特意验证一下,用了一天的时间写的,第一次有思路就是不熟悉,好多想做的功能没有做出来,还是可以拿来学习用的,希望对你们有用帮助吧!

    使用Ajax进行级联编程

    在这个例子中,第一次Ajax请求获取省份数据,处理响应时,根据用户的选择发送第二个请求获取对应城市的列表。 四、XML在Ajax中的作用 尽管Ajax名字中有XML,但实际应用中,JSON已成为更常用的数据交换格式,因为...

    JAVA使用ajax实现了分页 jquery

    在JavaWeb开发中,分页是一种常见的功能,用于处理大量数据的展示,它能提高用户体验,避免一次性加载过多数据导致页面响应慢。本教程将详细讲解如何使用Ajax和jQuery实现分页功能,同时也会探讨Ajax请求中的POST和...

    解决ajax返回innerHTML中javascript不能运行问题

    在实际应用中,我们经常会遇到使用 Ajax 返回某一个网页的内容到模板页面的某一个 `&lt;div&gt;` 标签中显示的操作。如果返回的值仅仅是文本类数据,不会影响模板页面的功能,但是如果返回的数据包括 JavaScript,那么直接...

    AJAX实例入门讲解

    当用户在第一个选择框中选择省份(如ZHEJIANG或JIANGSU)时,第二个选择框会显示对应省份的城市。这个功能可以提升用户在填写表单时的效率,无需多次刷新页面。 首先,我们需要在`web.xml`配置文件中定义一个...

    jQuery-ajax-json实现自动轮播图.rar

    // 每3秒切换一次 } }); ``` 然而,如果我们想要从服务器动态获取图片数据,我们可以使用ajax从后台获取json格式的图片列表。假设我们的json数据如下: ```json { "images": [ {"url": "image1.jpg", "title":...

    dwr的例子 反向AJAX 实现时时提醒

    Direct Web Remoting (DWR) 是一个开源Java库,它允许在浏览器和服务器之间进行安全、高效的异步通信,即所谓的“反向AJAX”或“Comet”技术。DWR使得JavaScript能够调用服务器端的Java方法,就像它们是本地函数一样...

    asp.net ajax 多文件上传

    为了解决这个问题,开发者通常会借助AJAX技术,通过创建自定义的上传组件或者使用第三方库如jQuery File Upload、AjaxFileUpload等来实现多文件的异步上传。 在实现过程中,关键步骤包括: 1. **前端界面**:创建...

    为jquery的ajax请求添加超时timeout时间的操作方法

    // 第一次等待10秒后进行轮询 checkLoading(10000); ``` 在上述代码中,我们首先使用setTimeout函数实现延时调用,这样可以在发起请求之前等待一段预设的时间。如果checkLoading函数在没有设置延时参数的情况下被...

    Ajax完全自学手册(源代码).rar

    HelloWorld 第一个Ajax应用程序 第2章 浏览器中的JavaScript Test4Navigator.htm User-Agent检测法 Test4Window1.htm window对象属性 test4Alert.htm 系统对话框 Test4Timeout.htm 时间间隔和暂停 Test...

    ajax 基础介绍第一章

    Ajax技术的实现通常依赖于JavaScript库,如jQuery,它简化了XMLHttpRequest对象的使用,使得开发者能够轻松地实现异步请求。同时,XML不再是最常见的数据交换格式,JSON(JavaScript Object Notation)由于其简洁和...

    AJAX效果选项卡

    选项卡组件的设计目的是优化用户体验,通过将大量信息分隔到不同的标签页,让用户可以有选择地查看和交互,而不是一次性呈现所有内容。AJAX技术的引入使得选项卡切换更加流畅,减少了服务器负载,并提升了页面响应...

    纯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 AJAX入门系列教程

     ASP.NET 在2007年初推出了其第一个正式版本,并将Atlas更名为ASP.NET AJAX,对应服务器端和客户端分别对应有ASP.NET服务器端编程模型和ASP.NET客户端编程模型,前者包含ASP.NET 2.0 AJAX Extensions和,后者包含...

    Ajax技术地图

    之所以叫处女秀,是因为这是我第一次上台做技术演讲,但是这句话却不是我自己想到的,而是江南白衣说出来的。 PPT的标题是《Ajax技术地图》,基本上是一个纯粹空对空的理论探索,不出现一行代码。还好随后曹晓钢的...

    解决js ajax同步请求造成浏览器假死的问题

    具体到本文中,开发者在第二次尝试中使用了setTimeout,将AJAX请求放入setTimeout所创建的函数中。这样做允许浏览器在执行AJAX请求之前先执行页面上其他未被阻塞的JavaScript代码和渲染操作。通过这种方式,页面的UI...

Global site tag (gtag.js) - Google Analytics