ajax 学习札记-AJAX教程-爱易网页

ajax 学习札记

日期：2014-05-16　浏览次数：20570 次

ajax 学习笔记
又是一个第一次，第一次接触AJAX
突然发现有了AJAX网络交互的方式好像完全被颠覆了，习惯了点击请求后的等待，突然用到异步交互感觉不可思议，传统在一次被颠覆。

第一次AJAX程序，老套图直接上代码。

代码环境：Struts2 + Ajax

页面代码

<html>
	<head>	
	<script type="text/javascript">	
	var xmlHttp;//定义个XMLHttp	
	//创建一个XMLHttprequest
	function createXMLHttpRequest() {
		//IE系列的浏览器
	    if (window.ActiveXObject) {
	        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	    }
	   	//firefox等浏览器 
	    else if (window.XMLHttpRequest) {
	    	//实例化一个XMLHttprequest。
	        xmlHttp = new XMLHttpRequest();	     
	    }	
	}
	//启动Ajax请求--GET
	function startRequestGet() {
	    createXMLHttpRequest();
	    //注册回调方法
	    xmlHttp.onreadystatechange = handleStateChange;
	    var userName = document.getElementById("names").value ;  
	    //设置提交方式，此处用的是GET
	    xmlHttp.open("GET", "ajaxAction?name="+userName, true);
	    xmlHttp.send(null);
	}
	//启动Ajax请求--POST
	function startRequestPost() {
	    createXMLHttpRequest();
	    //注册回调方法
	    xmlHttp.onreadystatechange = handleStateChange;
	    var userName = document.getElementById("names").value ;  
	    //设置提交方式，此处用的是GET
	    xmlHttp.open("GET", "ajaxAction", true);
	    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	    xmlHttp.send("name="+userName);
	}
	    
	function handleStateChange() {
		//判断是否和服务器端的交互完成，还要判断服务器段是否正确返回数据
	    if(xmlHttp.readyState == 4) {
	    	//表示和服务器端的交互以完成
	        if(xmlHttp.status == 200) {
	        var message = xmlHttp.responseText;
	        //获得值的显示位置
	        var div = document.getElementById("message"); 
	        //在该位置显示值
	        div.innerHTML = message;
	        }
	    }
	}
	</script>
	</head>

	<body>
		This is my Test AJAX page!!
		<br>
		<form action="ajaxAction" method="get">
			<table>
				<tr>
					<td>
						<input type="text" name="name" id="names" value="" onblur="startRequestGet()">
					</td>
					<td ><div id="message"></div>  </td>
					<td>
						<input type="submit" value="submit">
					</td>
					<td>
						<input type="button" value="button" onclick="startRequest()">
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

Action代码

public class AjaxAction extends ActionSupport{
	private String name;	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	@Override
	public String execute() throws Exception {
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html;charset=gbk");//解决乱码问题
                response.setCharacterEncoding("GBK");//解决乱码问题
		PrintWriter out = response.getWriter();
		if(name.equals("cht")){
			out.println(name+"用户名被占用");
			System.out.println(name+"用户名被占用");
		}else{
			out.println(name+"该用户名可用");
			System.out.println(name+"该用户名可用");
		}
		out.close();
		return super.execute();
	}
}

配置文件省略

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

ajax 学习札记

相关资料更多>

推荐阅读更多>