GET与POST方式发送请求参数
getAndPostExample.html清单:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sending Request Data Using GET and POST</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;
}
//GET方式发送异步请求
function doRequestUsingGET() {
createXMLHttpRequest();
//请求一个Servlet
var queryString = "GetAndPostExample?";
//以防读取缓存页面,所以每次发送时多带一个时间参数
queryString = queryString + createQueryString()
+ "&timeStamp=" + new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", queryString, true);
xmlHttp.send(null);
}
//POST方式发送请求
function doRequestUsingPOST() {
createXMLHttpRequest();
//以防读取缓存页面,所以每次发送时多带一个时间参数
var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
var queryString = createQueryString();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
//POST方式时还要设置以下HTTP头信息
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//POST方式时参数用send方法发送出去
xmlHttp.send(queryString);
}
//回调用方法
function handleStateChange() {
//状态为4时表示请求已完成
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>
<h1>Enter your first name, middle name, and birthday:</h1>
<table>
<tbody>
<tr>
<td>First name:</td>
<td><input type="text" id="firstName"/>
</tr>
<tr>
<td>Middle name:</td>
<td><input type="text" id="middleName"/>
</tr>
<tr>
<td>Birthday:</td>
<td><input type="text" id="birthday"/>
</tr>
</tbody>
</table>
<form action="#">
<input type="button" value="Send parameters using GET" onclick="doRequestUsingGET();"/>
<br/><br/>
<input type="button" value="Send parameters using POST" onclick="doRequestUsingPOST();"/>
</form>
<br/>
<h2>Server Response:</h2>
<!-- 存放结果区 -->
<div id="serverResponse"></div>
</body>
</html>
GetAndPostExample.java清单:
package ajaxbook.chap3;
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class GetAndPostExample extends HttpServlet {
protected void processRequest(HttpServletRequest request,
HttpServletResponse response, String method)
throws ServletException, IOException {
//设置响应头类型text/xml
response.setContentType("text/xml");
//获取用户输入参数
String firstName = request.getParameter("firstName");
String middleName = request.getParameter("middleName");
String birthday = request.getParameter("birthday");
//创建返回文本
String responseText = "Hello " + firstName + " " + middleName
+ ". Your birthday is " + birthday + "."
+ " [Method: " + method + "]";
//向浏览器写回响应信息
PrintWriter out = response.getWriter();
out.println(responseText);
//关闭流
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//处理GET请求
processRequest(request, response, "GET");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//处理POST请求
processRequest(request, response, "POST");
}
}
运行结果:
- 大小: 7.6 KB
分享到:
相关推荐
整理的ajax笔记 2005中使用Ajax方法: 1.添加引用:Ajax.Pro.2.DLL. 2.在Web.Config: <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/> 3.使用的时候在Pageload...
// 2.post: 将数据放在send的参数内,但是提前要设置发送数据的格式,如下: // ajax对象.setRequestHeader(Content-type,application/x-www-form-urlencoded); 2、AJAX状态码: 0:创建ajax对象成功 1:配置请求...
关于原生Ajax知识:包含原生ajax的get/post传参方式、返回数据等
本文实例讲述了jQuery学习笔记之Ajax用法。分享给大家供大家参考,具体如下: 一、Ajax请求 1、jQuery.ajax(options) 通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见 .get,.post 等。 ....
ExtJS 4 DirectStore post参数的变化以及应对方法 ExtJS 4 实例之数据包 ExtJS 4中动态加载的路径设置 Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读...
图文并茂的详细讲述了ajax的post以及get使用方式
java面试笔记,自己整理,对 谈谈对MVC的理解?为什么使用MVC?66.什么是Ajax?58.get和post请求的区别?有自己的理想 ,欢迎下载学习交流。。。
请求数据 我们可以使用 GET、POST 两种方式向后端请求数据,这里以 PHP 为例,假设有测试页面 age.php,用于返回年龄信息,内容为: if(isset($_REQUEST['name']) && $_REQUEST['name'] ==...首先用 GET 方式请求数据:
{1.2}数字表达方式}{17}{section.1.2} {1.3}补码}{19}{section.1.3} {1.3.1}总结}{23}{subsection.1.3.1} {1.4}数据类型}{23}{section.1.4} {1.4.1}整数与浮点数}{23}{subsection.1.4.1} {1.4.1.1}浮点数原理}...
笔记应用方向在今天的项目中,您将使用Ajax进行GET,POST,PUT / PATCH和DELETE请求,从而在此过程中创建一页应用程序。 您的应用程序是一个记笔记的应用程序。 它应该显示所有便笺的列表,并使您能够创建新便笺,...
1、提交用户请求 (UA : User Agent) 2、作为HTML 以及 脚本执行的 解释器 3、以图形化的方式显示web页面 2、主要浏览器产品 1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、...
简易Postman(Api接口测试,模拟HEAD/GET/POST方式) 网页滚动截屏(将当前整个网页转为图片并保存) Markdown转换(支持Markdown与HTML的互转) 页面取色工具(滑动鼠标随意取色) Js正则表达式(正则测试、...
AJAX WP_EDITOR 此代码可用于在事件发生后在后端和前端生成新的wp_editor()。 Eveything似乎运行完美。 所见即所得,快速标记等。 安装及使用 在WordPress安装中安装插件。 创建一个新页面,然后单击生成编辑器...
│ Java面试题16.http get post请求的区别.mp4 │ Java面试题17.说说你对Servlet的理解.mp4 │ Java面试题18.Servlet的生命周期.mp4 │ Java面试题19.forward和redirect的区别.mp4 │ Java面试题20.jsp和Servlet的...
在今天的项目中,您将使用Ajax进行GET,POST,PUT和DELETE请求,并在此过程中创建一页应用程序。 您的应用程序是一个记笔记的应用程序。 它应该显示所有便笺的列表,并使您能够创建新便笺,编辑旧便笺和删除便笺。 ...