`
asdzheng
  • 浏览: 95210 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

AJAX 初探

阅读更多
之前用过一次AJAX,太久忘光了,最近找工作拿起来复习一下。AJAX的英文全程为Asynchronous JavaScript and XML,即异步的javascript 和 xml 结合。这种技术已经用了很多年,举一个例子就是注册用户名时,用ajax技术去访问后台数据库,查看用户名是否已被注册,然后在文本框后面或者下面给出提示,少去了跳转页面的步骤,增加了交互性。在此我们就可以用这个例子来练练手:
在用户名属性哪里设置
onblur = "validate()"
,即当用户名的文本框失去焦点时触发这个事件。
接下来就用js来实现validate()函数:
 <script type="text/javascript">
	var req;
	function validate() {
		var idField = document.getElementById("userid");//取得文本框里用户名
		
		var url = "validate.jsp?id=" + escape(idField.value);//设置待会跳转的URL,并把用户名传进过去
		//alert(url);
		if(window.XMLHttpRequest) { //判断是否为IE7+, Firefox, Chrome, Opera, Safari浏览器
			req = new XMLHttpRequest()//浏览器内部的对象-XMLHttpRequest-用来实现发送和接收HTTP请求与响应信息
		} else if (window.ActiveXObject) {//ie5, ie6
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
		req.open("GET", url, true);//用get方式打开刚才设置的url,true设置为异步
		req.onreadystatechange = callback; //req调完open后,readystate的值为1,当state的状态改调用callback()
		req.send(null);
	}
	
	function callback() {
		if(req.readyState == 4) { //readystate为4表示已把xml数据加载完毕
			if(req.status == 200) { //http协议中server反馈给客户端时,status=200表示正常,404表示不正常
				//alert(req.responseText);
				var msg = req.responseXML.getElementsByTagName("msg")[0];//接收标签为msg的内容
				//alert(msg);
		        setMsg(msg.childNodes[0].nodeValue);//调用setmsg函数
			}
		}
	}
	
	function setMsg(msg) {
		
		mdiv = document.getElementById("usermsg");
		
		if(msg == "invalid") {
			mdiv.innerHTML = "<font color='red'>用户名已经存在</font>";//判断xml中传来的数据,如果用户名已被注册,既提示“用户名已存在”
		} else {
			mdiv.innerHTML = "<font color='green'>恭喜你,此用户名可以注册!</font>";//否则提示可以注册
		}
	}
	

</script>
 

XM里面的部分内容:
   <%@page import="com.User" pageEncoding="ISO-8859-1"%>

<%
	
	response.setContentType("text/xml");
	response.setHeader("Cache-Control", "no-store"); //HTTP1.1
	response.setHeader("Pragma", "no-cache"); //HTTP1.0
	response.setDateHeader("Expires", 0); //prevents catching at proxy server
	//前面四句是设置返回的头文件名
	
	//下面是到后台查数据库,然后用<msg>标签返回不同的结果
	String name = request.getParameter("id");
	//System.out.println(name);
	if(name != null && !name.trim().equals("")) {
		boolean isExist = User.idExist(name);
		
		if(isExist) {
			response.getWriter().write("<msg>invalid</msg>");
		} else {
			response.getWriter().write("<msg>valid</msg>");
		}
	}
	
%>
 


这就是一个简单的Ajax例子。
分享到:
评论

相关推荐

    基于PHP编程微软ASP.NET Ajax初探.pdf

    基于PHP编程微软ASP.NET Ajax初探.pdf

    Ajax的应用初探.pdf

    Ajax的应用初探.pdf

    基于Ajax的WEB编程初探.pdf

    基于Ajax的WEB编程初探.pdf

    Ajax 博客网站系统

    1)MVC结构本实例在实现上严格遵循MVC结构。...4)本实例系统对Ajax交互做了一个初探,并利用Ajax实现本章实例系统一个功能界面的开发。 5)本系统介绍了一种彻底解决中文乱码问题的方法-UTF-8配置。

    使用Ruby on Rails开发LBS网站初探示例代码

    这几天一直在学习使用RoR(Ruby on Rails),想建立一个功能全面一点的LBS(Location Based Service)网站。但是对于我这个RoR的初学者(仅有几天时间)来说,毕竟太复杂了。...掌握Ajax在RoR中的一般用法(RJS)。

    MSChart使用手册

    AJAX(三)——AJAX更新 31 五. AJAX(四)——Real Time Chart 35 解决MSChart底部横坐标显示不全的问题 收藏 38 mschart 上下限阈值 画横线 收藏 38 MSChart for vs2008 收藏 39 MSCHART全部属性方法介绍 收藏 41 在...

    MSChart控件手册

    AJAX(三)——AJAX更新 31 五. AJAX(四)——Real Time Chart 35 解决MSChart底部横坐标显示不全的问题 收藏 38 mschart 上下限阈值 画横线 收藏 38 MSChart for vs2008 收藏 39 MSCHART全部属性方法介绍 收藏 ...

    由prototype_1.3.1进入javascript殿堂-类的初探

    还是决定冠上ajax的头衔,毕竟很多人会用这个关键词搜索。虽然我认为这只是个炒作的概念,不过不得不承认ajax叫起来要方便多了。ajax的意思我就不详细解释了。 写这个教程的起因很简单:经过一段时间的ajax学习,有...

    详解Tomcat7中WebSocket初探

    Ajax + 轮询 :这种方案仅仅是一个模拟实现,本质还是HTTP请求响应的模式,由于无法预期什么时候推送消息,造成很多无效的请求; 通过 Flash等第三方插件 :这种方式能够实现双向通信,但有一个前提条件就是依赖第...

    详解vue服务端渲染(SSR)初探

    服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加 服务端渲染的优劣 首先是seo问题,前端动态渲染的内容是不能被抓取到的,而使用服务端渲染就可以解决这个问题。还有就是首屏加载过慢这种问题,比如在SPA中...

    使用IE6看老赵的博客 jQuery初探

    jQuery 代码: 代码如下: $.ajax({ url: “test.html”, cache: false, success: function(html){ $(“#results”).append(html); } }); ”results”&gt;&lt;/div&gt; 就用这个了,把地址换成老赵的博客,看看会有什么效果,...

    JavaScript核心技术 PDF扫描版

    《JavaScript核心技术》最后对于Ajax和几个流行的JavaScript库的介绍,无疑会开阔我们在JavaScript使用上的思路。 《JavaScript核心技术》是一本真正意义上的“新书”,不仅介绍了最新的JavaScript知识和方向,还...

    django中瀑布流写法实例代码

    django中瀑布流初探 img.html &lt;!DOCTYPE html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .w{ width: 1000px; margin: 0 auto; } ...

    麦子学院招牌课程[明星python编程视频VIP教程]

    第二阶段:Pythonweb开发本阶段是主要Python开发基础知识的讲解,通过系统学习mysql数据库、django、ajax、Tornado入门、个人博客系统实战等相关技术,全面掌握python基础开发技能技巧。 第三阶段:Python扩展开发...

    javaeye热点阅读

    1.13 Excel Report 一个小巧实用基于java实现的Excel报表生成工具 1.14 Spring(十四) Spring和Hibernate的结合--声明式事务管理1.15 Apache Click 框架初探1.16 Spring AOP 详解 1.17 2 Spring2.0用注解实现事务...

    asp.net知识库

    asp.net 运行机制初探(httpModule加载) 利用反射来查看对象中的私有变量 关于反射中创建类型实例的两种方法 ASP.Net应用程序的多进程模型 NET委托:一个C#睡前故事 [推荐] - [原创] Microsoft .NET策略及框架概述 ...

    asp.net毕业论文开题报告2008年6月

    毕业论文开题报告 ...AJAX技术框架及开发工具(佚名) 博客“私人日志” 传播特征初探(刘津) 引爆流行:Web2.0的传播理论(星汉) Web2.0时代,RSS你会用了吗?(佚名) web2.0知识汇总(佚名) 共8篇

    亮剑.NET深入体验与实战精要.part1.

     第8章 用户体验的杀手锏——ajax  第9章 系统与文件操作  第10章 网络应用开发  第11章 windows service开发  第12章 新技术初探 第2篇 系统架构设计思想  第13章 面向对象思想  第14章 三层架构项目...

    亮剑.NET深入体验与实战精要.part3

     第8章 用户体验的杀手锏——ajax  第9章 系统与文件操作  第10章 网络应用开发  第11章 windows service开发  第12章 新技术初探 第2篇 系统架构设计思想  第13章 面向对象思想  第14章 三层架构项目...

    亮剑.NET深入体验与实战精要.part4(完)

     第8章 用户体验的杀手锏——ajax  第9章 系统与文件操作  第10章 网络应用开发  第11章 windows service开发  第12章 新技术初探 第2篇 系统架构设计思想  第13章 面向对象思想  第14章 三层架构项目...

Global site tag (gtag.js) - Google Analytics