下面例子是介绍使用Ajax的post 方法,ajax的post方法使用比较多。
这个例子的作用是:输入一个用户名,检查下用户名是否可以用。
<一>:建个ajax的工具类
(1):建个ajaxUtils.js
(2):里面代码如下
var Ajax = { createXHR : function() {// 创建XHR对象 if (window.XMLHttpRequest) {// 针对除IE浏览器以外的 var xhr = new XMLHttpRequest(); return xhr; } else if (window.ActiveXObject) {// 针对IE浏览器的 var xhr = new ActiveXObject("Microsoft.XMLHTTP"); return xhr; } }, sendRequest : function(method, url, data, callback) {// callback代表函数名 var xhr = this.createXHR(); xhr.open(method, url, true); if ("GET" == method.toUpperCase()) { xhr.send(null); } else if ("POST" == method.toUpperCase()) { xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(data); } xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // callback(xhr);可以这样 callback({ text : xhr.responseText, xml : xhr.responseXML });// 也可以这样。这样最好,面向对象 } } } };
<二>:建jsp,在jsp中引入ajaxUtils.js工具类,jsp代码中如下<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="${pageContext.request.contextPath }/jsp/ajax/ajaxUtils.js""> </script> <script type="text/javascript"> function checkUserName(){ var username = document.getElementById("name").value; var password = document.getElementById("pwd").value; var url = "${pageContext.request.contextPath }/servlet/AjaxPostServlet"; // 使用Ajax工具类,4个入参 // 第一个入参:字符串"get" // 第二个入参:请求的url // 第三个入参:请求的参数 // 第四个入参:回调函数,函数名随便起,这里我起了callback Ajax.sendRequest("post",url,"username="+username+"&password"+password, callback); } // 经过Servlet处理后返回的信息 function callback(data){ // 后台返回的是字符串,就用data.text,如果返回的是xml对象,则就用data.xml var value = data.text; //这个value要么是Servlet里out.print()里的内容 alert(value); } </script> <title>学习ajax的Post方法</title> </head> <body> <center> <form action="" method="post"> username:<input type="text" size="25" value="" id="name" name="username"/><input type="button" value="检查是否被占用" οnclick="checkUserName();"/> <br /> <br /><br /> password:<input type="password" size="25" value="" id="pwd" name="password" /> <br /><br /> </form> </center> </body> </html>
<3>:配置WEB-INF下面的web.xml<servlet> <servlet-name>ajaxPostServlet</servlet-name> <servlet-class>com.web.AjaxPostServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ajaxPostServlet</servlet-name> <url-pattern>/servlet/AjaxPostServlet</url-pattern> </servlet-mapping>
<4>:建Servlet,如AjaxPostServlet,代码如下package com.web; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AjaxPostServlet extends HttpServlet{ @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); response.setHeader("Cache-Control", "no-cache"); PrintWriter out = response.getWriter(); String username = request.getParameter("username"); String password =request.getParameter("password"); if("zhangsan".equals(username)){ //此处是out.print不是out.println out.print("不可用");//out.print()里的内容将会输出到jsp页面中callback函数里 }else{ out.print("可以使用"); } out.flush(); out.close(); } }