当前位置:首页 > 开发 > 编程语言 > 编程 > 正文

AJAX入门

发表于: 2013-04-26   作者:chinrui   来源:转载   浏览次数:
摘要: 使用XMLHttpRequest对象进行异步的操作 效果:输入时,进行同步的用户名检验 第一步:静态的html页面,作为进行检验的对象,当光标离开输入框的时候,触发validate()方法,查找数据库进行检验 <td>用户名:</td> <td> <input type=text name=username id=userid onb
使用XMLHttpRequest对象进行异步的操作

效果:输入时,进行同步的用户名检验
第一步:静态的html页面,作为进行检验的对象,当光标离开输入框的时候,触发validate()方法,查找数据库进行检验
<td>用户名:</td>
	<td>
		<input type=text name=username id=userid onblur="validate()" />
		<div id=usermsg ></div>
	</td>

第二步:编写validate()方法
<script type="text/javascript" >
	var req;
	function validate() {
        //拿到输入用户名的节点
		var username = document.getElementById("userid");
       //写明请求的url地址,使用encodeURI/escape/encodeURIComponent方法对特殊字符进行编码
		var url = "validate.jsp?id=" + encodeURI(username.value);
        //根据不同的操作系统创建不同的XMLHttpRequest对象
		if(window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
        //使用open方法进行请求,第三个参数如果是true表示异步,false表示同步
		req.open("get", url , true);
        //onreadystatechange属性相当于监听器,此处相当于函数指针,触发时调用callback()方法
		req.onreadystatechange = callback;
		req.send(null);
	}
	
	function callback() {
//请求分为四个状态,1:已经连接上,2:连接上并成功发送请求,3:进行请求处理的过程中,4:请求处理完成
		if(req.readyState == 4) {
        //确定请求的状态为已经完成
			if(req.status == 200) {
             //确定请求的结果是正确的,而不是tomcat自己生成的结果
                 //对响应的数据进行处理,此处响应的是XML页面
				var node = req.responseXML.getElementsByTagName("msg")[0];
				var msg = node.childNodes[0].nodeValue;
				setMsg(msg);
			}
		}
	}
	//此方法根据响应的数据,进行相应的界面显示
	function setMsg(msg) {
		var node = document.getElementById("usermsg");		
		if(msg == "valid") {
			node.innerHTML = "<font color='green' >可以注册</font>";
		} else {
			node.innerHTML = "<font color='red' >用户名已经被注册过</font>";
		}
	}
</script>

使用AJAX产生二级菜单的联动
准备产生联动效果的静态页面的代码:
<form name="form2" method="post" >
	<select name="category1" onchange="changeCategory()" >
		<option selected >--选择一级目录--</option>
		<option value=93 >电脑/软件/网络/办公</option>
		<option value=95 >珠宝手饰/银饰礼品</option>
		<option value=96 >运动户外/休闲</option>
	</select>
	<select name="category2" >
		<option selected >--选择二级目录--</option>
	</select>
</form>

第一种方法:不使用AJAX产生二级联动的效果,直接从数据库中读出所有的数据:
第一:在客户端动态的生成javascript代码
<%!
private String getSecondCategoriesStr(List<Category> categories , Category category) {
	StringBuilder str = new StringBuilder();
	str.append("if(document.form2.category1.value == " + category.getId() + ") {\n");
	str.append("subNode.options.length = 1;\n");
	for(int i = 0; i < categories.size(); i++) {
		Category c = categories.get(i);
		if(c.getPid() == category.getId()) {
			str.append("var selOption" + i + " = document.createElement('option');\n");
			str.append("selOption" + i + ".innerText = '" + c.getName() + "';\n");
			str.append("selOption" + i + ".value = " + c.getId() + ";\n");
			str.append("subNode.appendChild(selOption" + i + ");\n\n");
		}
	}
	str.append("}\n");
	return str.toString();
}
%>

第二步:编写javascript代码做动态展示
<script type="text/javascript">
	<!--
	function changeCategory() {
		var subNode = document.form2.category2;
		<%=str %>
	}
	-->
</script>

第二种方法:使用AJAX产生返回作息为非xml的二级联动
<script type="text/javascript">
	<!—
     //向处理的文件发送请求,进行异步处理
	var req;
	function changeCategory() {		
		var id = document.form2.category11;
		url = "getchildcategory.jsp?id=" + escape(id.value);
		if(window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			req = new ActiveXObject("microsoft.XMLHTTP");
		}
		req.open("get", url, true);
		req.onreadystatechange = callback;
		req.send(null);
	}
	//监听处理状态,调用处理反馈的函数
	function callback() {
		if(req.readyState == 4) {
			if(req.status == 200) {
				parse(req.responseText);
			}
		}
	}
	//编写处理返回信息的函数,对返回的信息进行解析
	function parse(msg) {
		var subNode = document.form2.category22;
         //使用正则表达式,去除首尾的空格
		msg = msg.replace(/(^\s+)|(\s+$)/g,"");
         //对返回信息为空串的信息进行特殊处理
		if(msg == null || new String(msg) == "") {
			subNode.options.length = 1;
		} else {
			var categories = msg.split(",");
			subNode.options.length = 1;
			for(var i = 0; i < categories.length; i ++) {
				var categoryProperty = categories[i].split("_");
				var id = categoryProperty[0];
				var name = categoryProperty[1];
				var selOption = document.createElement("option");
				selOption.innerText = name;
				selOption.value = id;
				subNode.appendChild(selOption);
			}
		}
	}
	-->
</script>

编写处理请求的函数,处理请求并返回处理结果
<%@ page import="yuan.rui.love.*" %>
<%@ page import="java.util.*" %>
<%
String strId = request.getParameter("id");
int id = -1;
if(strId != null && !strId.equals("")) {
	id = Integer.parseInt(strId);
}
List<Category> categories = new ArrayList<Category>();
categories = Category.getChilds(id);
StringBuilder strBuild = new StringBuilder();
for(int i = 0; i < categories.size(); i++) {
	Category c = categories.get(i);
	if(i != categories.size() - 1) {
		strBuild.append(c.getId() + "_" + c.getName() + ",");
	} else {
		strBuild.append(c.getId() + "_" + c.getName());
	}
}
response.setContentType("text/xml;charset=gbk");
response.setHeader("Cache-Control", "no-store");  //HTTP 1.1
response.setHeader("Pragma", "no-cache");  //HTTP 1.0
response.setDateHeader("Expires", 0);  //prevents caching at the proxy server
response.getWriter().write(strBuild.toString());
%>

第三种方法:在服务器端生成javascript代码,在用户端直接执行
<script type="text/javascript">
	<!--
	var req;
	function changeCategory() {		
		var id = document.form2.category11;
		url = "getchildcategory_1.jsp?id=" + escape(id.value);
		if(window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			req = new ActiveXObject("microsoft.XMLHTTP");
		}
		req.open("get", url, true);
		req.onreadystatechange = callback;
		req.send(null);
	}
	
	function callback() {
		if(req.readyState == 4) {
			if(req.status == 200) {
				var subNode = document.form2.category22;
				eval(req.responseText);
			}
		}
	}
	-->
</script>

处理请求的程序,服务器端动态地生成javascript代码
<%@ page import="yuan.rui.love.*" %>
<%@ page import="java.util.*" %>

<%
String strId = request.getParameter("id");
int id = -1;
if(strId != null && !strId.equals("")) {
	id = Integer.parseInt(strId);
}
List<Category> categories = new ArrayList<Category>();
categories = Category.getChilds(id);
StringBuilder strBuild = new StringBuilder();
strBuild.append("subNode.options.length = 1;\n");
for(int i = 0; i < categories.size(); i++) {
	Category c = categories.get(i);
	strBuild.append("var selOption" + i + " = document.createElement('option');\n");
	strBuild.append("selOption" + i + ".innerText = '" + c.getName() + "';\n");
	strBuild.append("selOption" + i + ".value = " + c.getId() + ";\n");
	strBuild.append("subNode.appendChild(selOption" + i + ");\n");
}
response.setContentType("text/html;charset=gbk");
response.setHeader("Cache-Control", "no-store");  //HTTP 1.1
response.setHeader("Pragma", "no-cache");  //HTTP 1.0
response.setDateHeader("Expires", 0);  //prevents caching at the proxy server
response.getWriter().write(strBuild.toString());
%>

第四种方法:使用AJAX产生返回信息为xml的二级联动
<script type="text/javascript">
	<!--
	var req;
	function changeCategory() {		
		var id = document.form2.category11;
		url = "getchildcategory_2.jsp?id=" + escape(id.value);
		if(window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			req = new ActiveXObject("microsoft.XMLHTTP");
		}
		req.open("get", url, true);
		req.onreadystatechange = callback;
		req.send(null);
	}
	
	function callback() {
		if(req.readyState == 4) {
			if(req.status == 200) {
				parseXML(req.responseXML);
			}
		}
	}
	
	function parseXML(xml) {
		var categories = xml.getElementsByTagName("categories")[0];
		var subNode = document.form2.category22;
		subNode.options.length = 1;
		for(var i = 0; i < categories.childNodes.length; i++) {
			var category = categories.childNodes[i];
			var id = category.childNodes[0].childNodes[0].nodeValue;
			var name = category.childNodes[1].childNodes[0].nodeValue;
			var selOption = document.createElement("option");
			selOption.innerText = name;
			selOption.value = id;
			subNode.appendChild(selOption);
		}
	}
	-->
</script>

处理请求并返回格式为xml处理信息的页面:
<%@ page import="yuan.rui.love.*" %>
<%@ page import="java.util.*" %>

<%
String strId = request.getParameter("id");
int id = -1;
if(strId != null && !strId.equals("")) {
	id = Integer.parseInt(strId);
}
List<Category> categories = new ArrayList<Category>();
categories = Category.getChilds(id);
StringBuilder strBuild = new StringBuilder();
for(int i = 0; i < categories.size(); i++) {
	Category c = categories.get(i);
	strBuild.append("<category><id>" + c.getId() + "</id><name>" + c.getName() + "</name></category>");
}
//xml文件中必需有要节点,最好也写上头文件
strBuild.insert(0,"<?xml version='1.0' encoding='gb2312'?><categories>");
strBuild.append("</categories>");

response.setContentType("text/xml;charset=gbk");
response.setHeader("Cache-Control", "no-store");  //HTTP 1.1
response.setHeader("Pragma", "no-cache");  //HTTP 1.0
response.setDateHeader("Expires", 0);  //prevents caching at the proxy server
response.getWriter().write(strBuild.toString());
%>


AJAX入门

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
在近几年的各种网站和应用系统中,经常会碰到这样的现象,如百度搜索引擎进行搜索时,只需要输入关
Ajax笔记 1、 Ajax定义及其工作原理 Ajax 由 HTML、JavaScript 技术、DHTML 和 DOM 组成,这一杰出
同步和异步交互,了解互动 对于一个样本:一般B/S模式(同步) AJAX技术(异步) * 同步: 提交请求->
jQuery入门[5]-AJAX jQuery入门[1]-构造函数 jQuery入门[2]-选择器 jQuery入门[3]-事件 jQuery
下面这个是没有应用Prototype: 最近研究了一下Ajax,越看越有趣。Ajax其实就是JavaScript+DOM+CSS+X
下面这个是没有应用Prototype: 最近研究了一下Ajax,越看越有趣。Ajax其实就是JavaScript+DOM+CSS+X
l 一个实例 在开始正式讲解 Ajax之前,首先让我们先来看看Google Map使用Ajax改善其产品设计的效果
l 一个实例 在开始正式讲解 Ajax之前,首先让我们先来看看Google Map使用Ajax改善其产品设计的效果
dwrtest.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html&g
这些时间,瞎子也看得见,AJAX正大踏步的朝我们走来。不管我们是拥护也好,反对也罢,还是视而不见,
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号