ajax 学习笔记
又是一个第一次，第一次接触AJAX突然发现有了AJAX网络交互的方式好像完全被颠覆了，习惯了点击请求后的等待，突然用到异步交互感觉不可思议，传统在一次被颠覆。
第一次AJAX程序，老套图直接上代码。
代码环境：Struts2 + Ajax
页面代码
<html><head><script type="text/javascript">var xmlHttp;//定义个XMLHttp//创建一个XMLHttprequestfunction createXMLHttpRequest() {//IE系列的浏览器 if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } //firefox等浏览器 else if (window.XMLHttpRequest) { //实例化一个XMLHttprequest。 xmlHttp = new XMLHttpRequest(); }}//启动Ajax请求--GETfunction startRequestGet() { createXMLHttpRequest(); //注册回调方法 xmlHttp.onreadystatechange = handleStateChange; var userName = document.getElementById("names").value ; //设置提交方式，此处用的是GET xmlHttp.open("GET", "ajaxAction?name="+userName, true); xmlHttp.send(null);}//启动Ajax请求--POSTfunction 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="" ></td><td ><div id="message"></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;}@Overridepublic 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();}}
配置文件省略
页:
[1]