`
xiaotao.2010
  • 浏览: 216697 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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 学习笔记源代码

    ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习笔记源代码ajax 学习...

    ajax学习笔记

    ### AJAX学习笔记 #### 一、引言 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。...

    Ajax 学习笔记,超详细的噢!不看后悔

    在这份超详细的Ajax学习笔记中,我们将深入探讨以下几个关键知识点: 1. **基础概念**:Ajax的核心是JavaScript对象XMLHttpRequest,它使得前端和后端能够进行异步通信。异步意味着用户在等待服务器响应时可以执行...

    AJAX学习笔记(内含实例)

    AJAX学习笔记。内含Java调用的两个实例,及JavaScript的ajax工具函数,可快速入门,也可当手册使用。个人精心整理,值得收藏。 更多:http://download.csdn.net/user/daillo/all

    Ajax学习笔记个人总结

    ### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心,它负责在客户端与服务器之间发送异步请求,无需刷新整个页面即可实现局部数据更新。要使用 ...

    ajax学习笔记代码

    **Ajax学习笔记代码详解** Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术的...

    Ajax学习笔记

    ### Ajax学习笔记精要 #### 一、Ajax概述 ##### 1.1 什么是Ajax? Ajax,全称为Asynchronous JavaScript and XML(异步的JavaScript和XML),是一种用于改善网页应用性能的技术。它允许网页在无需重新加载整个...

    AJAX学习笔记1

    **标题:“AJAX学习笔记1”** 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。AJAX的核心是利用...

    16ajax学习笔记1

    在本篇16ajax学习笔记1中,我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求: Ajax的首要任务是创建XMLHttpRequest对象,这是浏览器提供的API。在JavaScript中,我们可以通过new ...

    jQuery+AJAX学习笔记

    jQuery+AJAX学习笔记

    经典ajax学习笔记

    以下是一份详细的Ajax学习笔记,涵盖了其基本概念、工作原理、优势与限制,以及实际应用。 ### 一、基本概念 Ajax的核心是JavaScript对象XMLHttpRequest(XHR),它允许浏览器在后台与服务器进行通信,而不会打断...

    web前端开发AJAX学习笔记

    web前端开发AJAX学习笔记

    Head First Ajax学习笔记

    ### Head First Ajax 学习笔记知识点总结 #### 一、异步请求与AJAX概念 - **异步请求**:允许页面在发送请求时继续执行后续任务,无需等待服务器响应,提高了用户体验。 - **AJAX (Asynchronous JavaScript and ...

    Ajax 学习笔记(1).

    Ajax 学习笔记(1).rtf

    ZK-AJAX学习笔记

    从给定的文件信息来看,这是一份详细的ZK-AJAX学习笔记,记录了从准备环境、下载运行ZK到深入学习各个组件的过程。ZK是一款基于Ajax的开源Web应用框架,它允许开发者使用类似桌面应用的组件来构建Web应用,而无需...

    夏玉保整理Ajax学习笔记.doc

    以下是夏玉保整理的Ajax学习笔记的关键点: 1. **处理IE缓存问题**: Internet Explorer浏览器在执行Ajax请求时,有时会缓存请求结果,导致即使服务器上的数据已更新,客户端仍显示旧的数据。为解决这个问题,通常...

    AJAX学习笔记忘记了看一眼

    AJAX学习笔记忘记了看一眼

Global site tag (gtag.js) - Google Analytics