Ajax范例讲解与技术原理(4)_H5之家 - 中国HTML5教程资源分享第一站

内容如下：

log4j.rootLogger =DEBEG,stdout log4j.appender.stdout = org.apache.log4j.ConsoleAppender log4j.appender.stdout.Target = System.out log4j.appender.stdout.layout = org.apache.log4j.PatternLayout log4j.appender.stdout.layout.ConversionPattern = [%-5p] %d{yyyy-MM-dd HH:mm:ss,SSS} method:%l%n%m%n
4、Ajax的使用

在WEB-INF下新建view文件夹，然后新建一个first.jsp文件，内容如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script language="javascript"> /* *获取工程的路径 */ function getRootPath() { var pathName = window.location.pathname.substring(1); var webName = pathName == '' ? '' : pathName.substring(0, pathName .indexOf('http://www.myexception.cn/')); return window.location.protocol + '//' + window.location.host + 'http://www.myexception.cn/' + webName + 'http://www.myexception.cn/'; } /* *提交Ajax请求并处理返回数据 */ function sendAjax(id) { //第一步：创建XMLHttpRequest对象 var xmlHttp; if (window.XMLHttpRequest) {//分浏览器创建XMLHttp对象 xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") } //第二步：设置和服务器端交互的相应参数，向路徑:8080/JsLearning3/getAjax准备发送数据 var url=getRootPath()+"getAjax"; xmlHttp.open("POST",url,true); //第三步：注册回调方法 xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { var obj=document.getElementById(id); obj.innerHTML = xmlHttp.responseText; } else { alert("AJAX服务器返回错误！"); } } } //第四步：设置发送请求的内容和发送报送。然后发送请求 var params ="userName="+document.getElementsByName("userName")[0].value+"&userPass="+document.getElementsByName("userPass")[0].value+"&time="+ Math.random(); // 增加time随机参数，防止读取缓存 xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8"); // 向请求添加 HTTP 头，POST如果有数据一定加加！！！！ xmlHttp.send(params); } </script> </head> <body> <h3>用户注册</h3> 名称<input type="text" name="userName" id="" onblur="sendAjax('txtHintName')"/>你输入的用户名是：<span id="txtHintName"></span><br> 密码<input type="password" name="userPass" onblur="sendAjax('txtHintPass')"/> 你输入的密码是：<span id="txtHintPass"></span><br> </body> </html>
5、Controler控制器package com.lin.controller; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import org.apache.log4j.Logger; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class firstController { private static Logger logger = Logger.getLogger(firstController.class); @RequestMapping({"/first","/"}) public String getFirst(){ return "first"; } @RequestMapping({"/getAjax/**"}) public String getAjax(HttpServletRequest request, HttpServletResponse response) throws IOException{ String userName=(String)request.getParameter("userName"); String userPass=(String)request.getParameter("userPass"); System.out.println(userName); System.out.println(userPass); List<String> list=new ArrayList<String>(); list.add(userName); list.add(userPass); JSONArray json = JSONArray.fromObject(list); response.setCharacterEncoding("UTF-8"); response.flushBuffer(); response.getWriter().write(json.toString()); return null; } } 这里用到了将提交过来的数据转到Json中去保存，处理各种请求，并设置Ajax的返回参数。

这里设置成了名称或密码输入栏只要一失去焦点事件，立马向服务端发送一个请求。

全设置好了，就可以运行了。

看到效果了没，传过来的是Json数组，第一个是用户名，第二个是密码。