GET方式实例演示：
index.jsp:
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <head> <title>Ajax技术</title> <script type="text/javascript"> var xmlhttp; //1 创建一个ajax对象 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } function checkGet(obj) { //进行数据格式检验-这里省略了。 var name = obj.value;//获取用户填入的用户名 var url = "<c:url value='/OneServlet?name=" + name + "' />"; //2 设置通讯方式和地址 xmlhttp.open("GET", url, true);//异步--多线程 //3 设置访问成功后的 js对象(回调函数) xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) {//服务器的响应消息接收完毕 if (xmlhttp.status == 200) {//服务器正常响应 var txt = xmlhttp.responseText;//后台的响应信息 alert("返回的信息是:" + txt); succ(txt); } else { alert("服务器响应出错信息,错误代码:" + xhr.status); } } }; //4发送---Get方式，没有参数(请求体) ---数据在请求地址中 xmlhttp.send(); //如果这里设置xmlhttp.open("GET", url, false);//同步 //alert("OKOK");//同步时，必须等到ajax回来之后才会执行到send之后。异步时不用等 } function succ(obj) { document.getElementById("divGet").innerHTML = obj; //divGet.innerHTML=obj; } </script> <form action=""> <h3>GET方式的ajax演示</h3> Name-GET方式提交<input type="text" name="name" onblur="checkGet(this);" /> <div id="divGet"></div> <h3>POST方式的ajax演示</h3> Name-POST方式提交<input type="text" name="name" onblur="checkPost(this);" /> <div id="divPost"></div> <br /> <br /> <input type="submit" value="注册"> </form>
OneServlet:
private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String name = request.getParameter("name"); // try { //用来演示设置xmlhttp.open("GET", url, false);//同步时，效果更明显而使用的 // Thread.sleep(3000); // } catch (InterruptedException e) { // e.printStackTrace(); // } out.println(name+"通过GET方式来访\t\n时间是:"+sdf.format(new Date()) ); }
web.xml:
写Servlet-不要忘记配置web.xml
<servlet> <servlet-name>OneServlet</servlet-name> <servlet-class>cn.hncu.servlet.OneServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>OneServlet</servlet-name> <url-pattern>/OneServlet</url-pattern> </servlet-mapping>
演示结果：
POST方式实例演示：
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <head> <title>Ajax技术</title> <script type="text/javascript"> var xmlhttp; //1 创建一个ajax对象 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } function checkPost(obj){ var name=obj.value;//获取用户输入的用户名 var url = "<c:url value='/OneServlet'/>"; xmlhttp.open("POST", url, true); xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4){//服务器的响应消息接收完毕 if(xmlhttp.status==200){//服务器正常响应 var txt = xmlhttp.responseText;//后台的响应信息 alert("返回的信息是:"+txt); succPost(txt); }else{ alert("服务器响应出错信息,错误代码:"+xhr.status); } } }; //注意要设置请求头！！！ xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlhttp.send("name="+name); } function succPost(obj){ divPost.innerHTML=obj; } </script> </head> <body> <form action=""> <h3>POST方式的ajax演示</h3> Name-POST方式提交<input type="text" name="name" onblur="checkPost(this);" /> <div id="divPost"></div> <br /> <br /> <input type="submit" value="注册"> </form> </body>
OneServlet:
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String name = request.getParameter("name"); //int i=100/0;//故意让后台响应500的错误信息 out.println(name+"通过POST方式来访\t\n时间是:"+sdf.format(new Date()) ); }
封装AJAX：
是不是感觉上面这样写有点麻烦，其实我们完全可以先配置好ajax函数，在用的时候传入参数就可以了。
我们只要new Ajak(),然后调用里面的get、post函数，进行传值就可以了。
post方式需要多传入一个data参数，get方式就可以不用，因为参数在url中传的。
ajax.js
function Ajax(){ var xmlhttp; //1 创建一个ajax对象 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //url为请求的链接或文件。 //succ是status返回为200后运行的函数。 //failure是status返回不为200后运行的函数。 this.get=function(url,succ,failure){ //2 设置通讯方式和地址 xmlhttp.open("GET",url,true);//异步--多线程 //3 设置访问成功后的 js对象(回调函数) xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4){//服务器的响应消息接收完毕 if(xmlhttp.status==200){//服务器正常响应 var txt = xmlhttp.responseText;//后台的响应信息 succ(txt); }else{ if(failure){ failure(xmlhttp.status); } } } }; //4发送---Get方式，没有参数(请求体) ---数据在请求地址中 xmlhttp.send(); }; this.post= function(url,data,succ, failure){ //2 设置通讯方式和地址 xmlhttp.open("POST",url,true);//异步--多线程 //3 设置访问成功后的 js对象(回调函数) xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4){//服务器的响应消息接收完毕 if(xmlhttp.status==200){//服务器正常响应 var txt = xmlhttp.responseText;//后台的响应信息 succ(txt); }else{ if(failure){ failure(xmlhttp.status); } } } }; //4设置请求头 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //5发送---Post方式，有参数(请求体) <---数据 ※ xmlhttp.send(data); }; }
演示的JSP
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Ajax技术</title> <script type="text/javascript" src="<c:url value='js/ajax.js'/>"></script> <script type="text/javascript"> function checkGet(obj) { //进行数据格式检验-这里省略了。 var name = obj.value;//获取用户填入的用户名 var url = "<c:url value='/OneServlet?name=" + name + "' />"; var ajax = new Ajax(); ajax.get(url, succ, failure); } function succ(obj) { document.getElementById("divGet").innerHTML = obj; } function checkPost(obj) { var name = obj.value;//获取用户输入的用户名 var url = "<c:url value='/OneServlet'/>"; var ajax = new Ajax(); ajax.post(url,"name="+name, succPost, failure); } function succPost(obj) { divPost.innerHTML = obj; } function failure(obj) { alert("服务器响应的错误信息代码:" + obj); } </script> </head> <body> <form action=""> <h3>GET方式的ajax演示</h3> Name-GET方式提交<input type="text" name="name" onblur="checkGet(this);" /> <div id="divGet"></div> <h3>POST方式的ajax演示</h3> Name-POST方式提交<input type="text" name="name" onblur="checkPost(this);" /> <div id="divPost"></div> <br /> <br /> <input type="submit" value="注册"> </form> </body> </html>
servlet还是和刚才的是一个！
演示结果:
返回结果为200-正确的页面:
返回结果为500-错误的页面:
让servlet出一个异常就可以模仿出来了。
例如:int a=12/0;
