AJAX技术（4）

最新推荐文章于 2015-03-24 20:46:00 发布

NonShan

最新推荐文章于 2015-03-24 20:46:00 发布

阅读量425

点赞数

分类专栏： java学习文章标签： ajax

本文链接：https://blog.csdn.net/NonShan/article/details/40651291

版权

java学习专栏收录该内容

17 篇文章 1 订阅

订阅专栏

之前的AJAX技术都是处理服务器响应。

1、可以利用inHTML属性创建动态内容。

2、将响应解析为XML。

3、使用W3C DOM动态编辑页面。

现在利用AJAX技术发送请求参数。

方法一：使用基本的GET和POST方法。

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX应用实例四</title>
<script type="text/javascript">
	var xhr ;
	function createXMLHttpRequest()
	{
		if(window.ActiveXObject)
			{	
			//ie浏览器
				xhr = new ActiveXObject("Microsoft.XMLHttp");
			}
		else if(window.XMLHttpRequest)
			{
			//非ie浏览器
				xhr = new XMLHttpRequest();
			}
	}
	
	//得到用户输入的姓名和生日，将要传送给服务器的数据利用这个函数封装起来
	function createRequestString()
	{
		var firstname = document.getElementById("firstname").value;
		var middlename = document.getElementById("middlename").value;
		var birthday = document.getElementById("birthday").value;
		var requestString = "firstname="+firstname+" &middlename="+middlename+"&birthday="+birthday;
		return requestString;
	}
	
	//get方法
	function doRequstUsingGET()
	{
		createXMLHttpRequest();
		xhr.onreadystatechange = handleResponse;
		//将数据从这里传过去
		xhr.open("GET","getAndPostDemo?"+createRequestString()+"×tamp ="+new Date().getTime(),"true");
		xhr.send(null);
	}
	function doRequestUsingPOST()
	{		
		createXMLHttpRequest();
		xhr.onreadystatechange = handleResponse;
		xhr.open("POST", "getAndPostDemo?timestamp = "+new Date().getTime(), true);
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;")
		xhr.send(createRequestString());
	}
	function handleResponse()
	{	
		if(xhr.readyState==4)
			{
				if(xhr.status == 200)
					{
						var responseDiv = document.getElementById("serverResponse");
						//清楚之前responseDiv中可能有的内容
						if(responseDiv.hasChildNodes())
							{
								responseDiv.removeChild(responseDiv.childNodes[0]);
							}
						var responseText = document.createTextNode(xhr.responseText);
						responseDiv.appendChild(responseText);
					}
			}
	}
</script>
</head>
<body>
<h1>Enter your first name , middle name ,and birthday</h1>
<table>
	<tbody>
	<tr>
		<td>First name:</td>
		<td><input type = 'text' id = 'firstname'/></td>
	</tr>
	<tr>
		<td>Middle name:</td>
		<td><input type = 'text' id = 'middlename'/></td>
	</tr>
	<tr>
		<td>birthday</td>
		<td><input type = 'text' id = 'birthday'></td>
	</tr>
	</tbody>
</table>
<form action = '#'>
	<input type = 'button' value = 'Send parameters using GET' onclick = "doRequstUsingGET();"/>
	<br/>
	<br/>
	<input type = 'button' value = 'Send parameters using POST' onclick = "doRequestUsingPOST();" />
	<br/>
	<h2> Server Response:</h2>
	<div id = "serverResponse" ></div>
</form>
</body>
</html>

2、GetAndPostServlet.java

package servlet;

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 GetAndPostServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String firstName = request.getParameter("firstname");
		String middleName = request.getParameter("middlename");
		String birthday = request.getParameter("birthday");
		System.out.println(birthday);
		response.setContentType("text/xml");
		PrintWriter out = response.getWriter();
		String responseText = "Hello:"+firstName+""+middleName+", your Birthday is "+birthday;
		out.println(responseText);
		out.flush();
		out.close();
	}

	//和get方法的代码基本相同
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		String firstName = request.getParameter("firstname");
		String middleName = request.getParameter("middlename");
		String birthday = request.getParameter("birthday");
		response.setContentType("text/xml");
		PrintWriter out = response.getWriter();
		String responseText = "Hello:"+firstName+""+middleName+", your Birthday is "+birthday;
		out.println(responseText);
		out.flush();
		out.close();
	}

}

虽然这个例子很简单。但是还是遇见了很多错误。比如说在向服务器传参数的时候，值一直传不过去。原因是因为取值的时候空格的问题。