ajax 学习札记_H5之家 - 中国HTML5教程资源分享第一站

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" value="" onblur="startRequestGet()"> </td> <td ><div></div> </td> <td> <input type="submit" value="submit"> </td> <td> <input type="button" value="button"> </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(); } }
配置文件省略