`
zhangyou1010
  • 浏览: 303495 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ajax post和get两种提交方式

AjaxServletXMLStrutsWeb 
阅读更多
最近看ajax基础教程，学者敲书上的代码。在这里记录一下，方便以后用时可以查阅。

GetAndPostExample.html的源码如下： 
<!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">
<title>Insert title here</title>

	<script type="text/javascript">
		var xmlHttp ;
		function createXMLHttpRequest(){
			if(window.ActiveXObject){
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} else if(window.XMLHttpRequest){
				xmlHttp = new XMLHttpRequest();
			}
		}
		
		function createQueryString(){
			var firstName = document.getElementById("firstName").value;
			var middleName = document.getElementById("middleName").value;
			var birthday = document.getElementById("birthday").value;
			
			var queryString = "firstName="+firstName+"&middleName="+middleName
			+"&birthday="+birthday;
			
			return queryString;
		}
		
		function doRequestUsingGET(){
			createXMLHttpRequest();
			var queryString  = "GetAndPostExample?";
			queryString = queryString + createQueryString()+
			"&timestamp="+ new Date().getTime();
			xmlHttp.onreadystatechange = handleStateChange;
			xmlHttp.open("GET",queryString,true);
			xmlHttp.send(null);
		}
		
		function doRequestUsingPOST(){
			createXMLHttpRequest();
			var url = "GetAndPostExample?timestampe=" + new Date().getTime();
			xmlHttp.open("POST",url,true);
			xmlHttp.onreadystatechange = handleStateChange;
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
			
			var queryString  = createQueryString();
			xmlHttp.send(queryString);
		}
		
		function handleStateChange(){
		
			if(xmlHttp.readyState == 4){
				if(xmlHttp.status == 200) {
					parseResults();
				}
			}
		}
		
		function parseResults(){
		
			var responseDiv = document.getElementById("serverResponse");
			if (responseDiv.hasChildNodes()){
				responseDiv.removeChild(responseDiv.childNodes[0]);
			}
			
			var responseText = document.createTextNode(xmlHttp.responseText);
			responseDiv.appendChild(responseText);
		}
	</script>
</head>
<body>
	<table>
		<tbody>
			<tr>
				<td>firstName</td>
				<td><input type="text" id="firstName"/></td>
			</tr>
			
			<tr>
				<td>middleName</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 Parameter use GET" onclick="doRequestUsingGET();"/>
		<br/><br/>
		
		<input type="button" value="Send Parameter use POST" onclick="doRequestUsingPOST();"/>
		
	</form>
	
	<br/><br/>
	<h2>server response:</h2>
		<div id="serverResponse">
		</div>
</body>
</html>


上面的请求将调用服务器端得GetAndPostExample这个servlet。
GetAndPostExample.java代码如下： 
package ajaxbook.chap3;

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 GetAndPostExample extends HttpServlet{
	
	
	protected void processRequest(HttpServletRequest req,
			HttpServletResponse res,String method) throws IOException{
		res.setContentType("text/xml");
		
		String firstName = req.getParameter("firstName");
		String middleName = req.getParameter("middleName");
		String birthday = req.getParameter("birthday");
		
		StringBuilder sBuilder =  new StringBuilder();
		sBuilder.append("Hello ").append(firstName).append(" ").append(middleName);
		sBuilder.append(". Your birthday is ").
		append(birthday).append(". Your request method is ").append(method).append(" .");
		
		PrintWriter pw = res.getWriter();
		pw.write(sBuilder.toString());
		
		pw.close();		
	}

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		System.out.println("the get method");
		processRequest(req,res,"GET");
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
		System.out.println("the post method");
		processRequest(req,res,"POST");
	}
	
}


开始时遇到一点小问题，客户端请求不到该servlet。后面还是想起来了，要在web.xml文件中配置servlet和请求路径。看来是用struts用多了，都忘了最基本的了。
web.xml中要配置请求的servlet. 
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	
	
	<servlet>
		<servlet-name>GetAndPostExample</servlet-name>
		<servlet-class>ajaxbook.chap3.GetAndPostExample</servlet-class>
	</servlet>
	
	<servlet-mapping>
		<servlet-name>GetAndPostExample</servlet-name>
		<url-pattern>/GetAndPostExample</url-pattern>
	</servlet-mapping>
	
	
</web-app>
分享到：
| Ajax head方式读取头部响应
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax POST 与GET提交的区别

    在探讨AJAX中GET和POST的区别之前，我们先来了解一下这两种请求方式的基本概念。 **GET**请求通常用于获取资源信息，它将参数拼接到URL后面，并通过URL传输数据。这种方式适合于那些不会更改服务器状态的操作，例如...

    Ajax中get和post区别

    在上面的实例代码中，我们使用了Get和Post请求来演示两种请求方法的区别。在客户端代码中，我们使用XMLHttpRequest对象创建了一个Get请求和一个Post请求，并将参数传递给服务器端。在服务器端代码中，我们使用...

    Ajax中get与post请求详解

    Ajax 中 get 与 post 请求的详细解释 Ajax 技术中 get 与 post 两种请求方式是...在 Ajax 中，get 和 post 两种请求方式都有其特点和缺陷，开发者应该根据实际情况选择合适的请求方式，以确保数据的安全性和可靠性。

    ajax以GET和POST方式调用WCF

    对于GET和POST两种HTTP方法，它们的主要区别在于： 1. **GET方式**：在URL中附加参数，数据可见且有限制（一般不超过2KB），适合获取少量数据。 2. **POST方式**：数据放在请求体中，对数据量无限制，适合传递大量...

    php+Ajax（GET&POST）完美实例

    在IT领域，PHP和Ajax是两种非常重要的技术，它们经常被结合起来用于构建动态、交互性强的Web应用。本文将深入探讨如何使用PHP和Ajax解决GET和POST请求中的中文乱码问题，并结合MySQL数据库实现数据的交互。 首先，...

    Ajax Get、Post请求

    在Ajax中，主要使用的请求方式有两种：GET和POST。 **GET请求** GET是HTTP协议中最常见的请求方法之一，主要用于获取服务器上的资源。在Ajax中，使用GET请求时，请求的数据会被附加到URL后面，以问号分隔，形成一个...

    Ajax中POST和GET的区别

    在Web开发中，尤其是在使用Ajax进行前后端交互的过程中，GET和POST是最常见的两种HTTP请求方式。这两种方式虽然都是用来发送请求给服务器，但在具体实现机制、适用场景以及安全性等方面存在较大差异。本文将详细介绍...

    j2ee21：ajax01：get提交、post提交(完成用户名搜索)，两者的区别(中文乱码问题、缓存问题)

    首先，GET和POST是HTTP协议中的两种主要请求方法，它们在AJAX中用于向服务器发送数据。 1. GET提交：GET方法常用于获取资源。在AJAX中，GET请求将参数附加到URL后面，通过这种方式发送数据。由于URL长度有限制，GET...

    Ajax 对象 包含post和get两种异步传输方式

    文档中提到了Ajax对象中包含的两种主要的HTTP请求方式：GET和POST。 GET请求的主要特点包括：简单、快速和有限的数据传输能力。它通常用于从服务器获取数据，请求的数据会被附加在URL的后面，形成一个查询字符串。...

    php实现ajax、post、get无刷新提交并跳转及验证用户

    在IT行业中，PHP和AJAX是两种非常重要的技术，它们被广泛用于构建动态和交互性强的Web应用程序。本文将深入探讨如何使用PHP和AJAX实现无刷新的数据提交、页面跳转以及用户验证功能。 首先，PHP（Hypertext ...

    Jquery中ajax提交表单几种方法(get、post两种方法)

    在jQuery中，Ajax提交表单是...`$.get()`和`$.post()`是对这两种方法的简单封装，`$.ajax()`则提供了更多自定义选项。在处理表单数据时，`$.serialize()`是一个便捷的工具，可以方便地将表单数据转换为适合发送的格式。

    jQuery+get/post+Ajax+Json

    1. jQuery的$.get和$.post方法：这两种方法是jQuery提供的Ajax（异步JavaScript和XML）接口，用于与服务器进行非刷新的数据交换。$.get用于发送GET请求，而$.post用于发送POST请求。它们都接受四个参数：URL、数据、...

    使用jQuery的ajax的post与get发送数据到指定url

    首先，让我们了解`GET`和`POST`这两种HTTP请求方法的基本概念。`GET`是最常见的请求方式，用于从服务器获取数据，通常显示在浏览器的地址栏中，适合获取少量无敏感信息的数据。而`POST`方法则是向服务器发送数据，如...

    用AJAX的Get和Post调用Servlet的简单示例.doc

    GET和POST是两种不同的HTTP请求方法，主要区别在于： - **GET**通常用于获取资源，请求参数包含在URL中，对数据大小有限制，安全性较低。 - **POST**用于向服务器发送数据，数据放在请求体中，没有大小限制，更安全...

    ajax的两种提交方式(get/post)和两种版本

    AJAX两种主要的提交方式是GET和POST，它们有不同的特点和应用场景。 GET请求通常用于向服务器查询某些信息，它将参数附加到URL之后，数据会以明文的形式展示在地址栏中，因此它不适用于传输敏感信息。由于URL长度有...

    详细解读Jquery各Ajax函数：$.get(),$.post(),$.ajax(),$.getJSON()

    而Jquery库提供了一系列封装好的Ajax函数，如$.get(), $.post(), $.ajax(), 和$.getJSON()，这些函数简化了前端开发者与后端数据交互的过程。 ### 1. $.get() `$.get()`函数是最简单的一种异步请求方式，它发送一...

    【Ajax】分别以post,get演示

    首先，让我们详细了解一下GET和POST两种请求方式的区别： 1. GET请求：这是最基础的HTTP方法，通常用于获取服务器上的数据。GET请求将参数附加在URL后面，以问号分隔，每个参数之间用&连接。这种方式的限制在于URL...

    html页面模式get/post请求

    首先，GET和POST是HTTP协议中的两种主要请求方法。GET通常用于获取资源，它将数据附加到URL上，以查询字符串的形式传递。而POST则常用于向服务器发送数据，如表单提交，数据被包含在请求正文中，这对于传输大量或...

    框架之AJAX，ajax，页面部分刷新，实现动态提交数据到服务器；动态从服务区获取数据 get，post两种传递数据方法，Jso

    当用户触发一个AJAX请求时，JavaScript代码创建一个XMLHttpRequest实例，然后通过这个实例向服务器发送GET或POST请求。服务器接收到请求后处理数据，再将结果返回给客户端，最后JavaScript解析并更新DOM（文档对象...

Magicbox
Global site tag (gtag.js) - Google Analytics