ajax实例---post方式
来源：互联网 发布：安卓防蓝光软件哪个好 编辑：程序博客网 时间：2024/05/29 11:55
<%@ page language="java" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <script charset="gb2312" type="text/javascript" src="./test.js"></script> </head> <body> <form action="" enctype="application/x-www-form-urlencoded"> <input type="button" name="ok" id="ok" value="测试服务器连接"> </form> </body></html>
/** * 使用Ajax和服务器进行通信 * *创建XmlHttpRequest对象 * *打开和服务器的链接 * *发送请求 * *处理服务器的返回信息 * * */// <input type="button" name="ok" id="ok" value="测试服务器连接"> window.onload=function(){ document.getElementById("ok").onclick=function(){//1 创建XmlHttpRequest对象 var xmlRequest = ajaxFunction(); //2 处理服务器的返回信息(接受服务器端时时返回的信息) //它不是属于第四步吗，为什么要放在第二步上，因为在open和send之前它就能够获取那些信息的改变。 /* * onreadystatechange .相当于..onclick=function(){} * * onreadystatechange :服务器端状态该变的事件 * 每次 readyState 属性的改变(0,1,2,3,4)都会触发 readystatechange事件 * 如果把 onreadystatechange 事件处理函数赋给一个函数，那么每次 readyState 值的改变都会引发该函数的执行 * 0 代表未初始化。 还没有调用 open 方法1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用2 代表已加载完毕。send 已被调用。请求已经开始3 代表交互中。服务器正在发送响应4 代表完成。响应发送完毕注意：onreadystatechange、readyState、status、responseText 、responseXML、statusText都是xmlRequest的属性。 */ xmlRequest.onreadystatechange=function(){ //alert(xmlRequest.readyState);//这个能够捕获到服务器的每一次变化 。会弹出 1 2 3 4// alert(xmlRequest.status);//xmlRequest.readyState==4指响应发送完毕 if(xmlRequest.readyState==4){//200 一切正常(ok) 304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 ) if(xmlRequest.status==200||xmlRequest.status==304){ //alert("服务器处理完毕"); var text = xmlRequest.responseText; alert(text); } } } /* * 3 打开和服务器的连接 * open(method, url, asynch) * * method:请求方法 get post * * url:路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。 * * asynch：表示请求是否要异步传输，默认值为true(异步)。指定true * * 在路径单独后面加上时间戳，保证每次请求的路径不一样,此时,浏览器会认为是一次新的请求 * 因为你如果不加时间这个东西，当浏览器第二次之后访问时间，它会发现路径没有发生变化，从而不再访问新的，而是直接使用缓存 。 * * 同时这种&a=9的传参方式也是当有多个参数时间，第一个参数用？之后的参数用&.表示连接。 */ xmlRequest.open("post","../testServlet01?timeStamp="+new Date().getTime()+"&a=89",true); /* * 设置请求头 * * 如果用 POST 请求向服务器发送数据， * 需要将 “Content-type” 的首部设置为 "application/x-www-form-urlencoded" * 它会告知服务器正在发送数据，并且数据已经符合URL编码了。 * 表示该请求已经进行了URL编码 。 * * 该方法必须放在open方法的后面 * */ xmlRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); /* * 4 发送请求 * * 若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可 * * 即使传值,服务器也获取不到 "b=9$c=23" */ xmlRequest.send("b=9&c=987"); } } /** * 该函数创建XmlHttpRequest对象 */ function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e){ try{// Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } return xmlHttp; }package cn.ajax;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 TestServlet01 extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");response.setContentType("text/html");PrintWriter out = response.getWriter();String date = request.getParameter("timeStamp");System.out.println(date);System.out.println("request.getMethod(): "+request.getMethod());}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");PrintWriter out = response.getWriter();System.out.println("doPost ");System.out.println("request.getMethod() "+request.getMethod());// xmlRequest.open("get","../testServlet01?a=9",true);System.out.println("request.getParameter(a) "+request.getParameter("a"));System.out.println("request.getParameter(b) "+request.getParameter("b"));System.out.println("request.getParameter(c) "+request.getParameter("c"));out.println("我是服务器，向客户端发送数据 ");}}
