ajax实例--get提交方式_android ajax 提交-优快云博客

本文详细介绍了如何利用Ajax技术与服务器进行异步通信，包括创建XmlHttpRequest对象、打开连接、发送请求及处理服务器返回信息的过程，旨在帮助开发者理解和实现服务器交互的高效方式。

<%@ 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("服务器处理完毕");
				  }
			 }
			 
		 }
		 
		 /*
		   * 3 打开和服务器的连接
		   *     open(method, url, asynch)
		   *       * method:请求方法  get post
		   *       * url:路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
		   *       * asynch：表示请求是否要异步传输，默认值为true(异步)。指定true
		   *       * 在路径单独后面加上时间戳，保证每次请求的路径不一样,此时,浏览器会认为是一次新的请求
		   *       因为你如果不加时间这个东西，当浏览器第二次之后访问时间，它会发现路径没有发生变化，从而不再访问新的，而是直接使用缓存 。
		   */
		 xmlRequest.open("get","../testServlet01?timeStamp="+new Date().getTime(),true);
		 
		 /*
		  * 4 发送请求
		  *    * 若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可
		  *    * 即使传值,服务器也获取不到  "b=9$c=23"
		  */
		  xmlRequest.send(null);
	 }
	 
 }
 
 
 
 
 
 
 
 
 
 
 /**
  * 该函数创建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("我是服务器，向客户端发送数据 ");
	
	}

}