Ajax发送GET和POST请求案例
使用ajax实现菜单联动
通常情况下，GET请求用于从服务器上获取数据，POST请求用于向服务器发送数据。
需求：选择第一个下拉框的值，根据第一个下拉框的值显示第二个下拉框的值
- 首先使用GET方式。
客户端HTML页面显示第一个下拉选择框，给当前下拉选择框选择某个选项后，通过XMLHttpRequest向服务器发送请求，请求动态显示第二个下拉选择框。下面是对应的HTML页面的代码。
程序清单：Ajax02request/get/first.html
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="silvan" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>发送GET请求</title>
<!-- 给select标签添加样式 -->
<style type="text/css">
select {
width: 160px;
font-size: 11pt;
}
</style>
</head>
<body>
<select name="first" id="first" onchange="change(this.value);">
<option value="0">---请选择---</option>
<option value="1" >中国</option>
<option value="2">美国</option>
<option value="3">日本</option>
</select>
<select name="second" id="second"></select>
<script type="text/javascript">
// 定义了XMLHttpRequest对象
var xmlrequest;
// 完成XMLHttpRequest对象的初始化
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
// DOM 2浏览器
xmlrequest = new XMLHttpRequest();
}else if (window.ActiveXObject){
// IE浏览器
try{
xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
}
}
}
}
// 事件处理函数，当下拉列表选择改变时，触发该事件
function change(id){
// 初始化XMLHttpRequest对象
createXMLHttpRequest();
// 设置请求响应的URL
var uri = "second.jsp?id=" + id;
// 设置处理响应的回调函数
xmlrequest.onreadystatechange = processResponse;
// 打开与服务器响应地址的连接
xmlrequest.open("GET", uri, true);
// 发送请求
xmlrequest.send(null);
}
// 定义处理响应的回调函数
function processResponse(){
//响应完成且响应正常
if (xmlrequest.readyState == 4){
if (xmlrequest.status == 200){
// 将服务器响应以$符号分隔成字符串数组
var cityList = xmlrequest.responseText.split("$");
// 获取用于显示菜单的下拉列表
var displaySelect = document.getElementById("second");
// 将目标下拉列表清空
displaySelect.innerHTML = null;
// 以字符串数组的每个元素创建option，
// 并将这些选项添加到下拉列表中
for (var i = 0 ; i < cityList.length ; i++){
// 创建一个<option.../>元素
var op = document.createElement("option");
op.innerHTML = cityList[i];
// 将新的选项添加到列表框的最后
displaySelect.appendChild(op);
}
}else{
//页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
// 指定页面加载完成后指定change(id)函数
document.body.onload = change(document.getElementById("first").value);
</script>
</body>
</html>
采用GET请求将父菜单的ID作为参数发送，根据ID显示第二个下拉框的值。服务器响应页面的代码如下。
程序清单：Ajax02request/get/second.jsp
<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<%
String idStr = (String)request.getParameter("id");
int id = idStr == null ? 1 : Integer.parseInt(idStr);
switch(id){
case 1:
out.println("上海$广州$北京");
break;
case 2:
out.println("华盛顿$纽约$加州");
break;
case 3:
out.println("东京$大板$福冈");
break;
}
%>
上面jsp页面作为服务器响应非常简单：先读取请求参数，当请求id为1时，返回三个中国城市；当请求id为2时，返回三个美国城市；当请求id为3时，返回三个日本城市。
在浏览器中浏览该页面，并改变左边下拉列表的选中项，将看到下图效果：
2. 使用POST方式
POST请求的适应性更广，可使用更大的请求参数。而且POST请求的请求参数在页面跳转时，不能在链接地址中直接看到，保密性更好。因此在使用Ajax发送请求时，尽量采用POST方式而不是GET方式发送请求。发送POST请求通常需要如下三个步骤：
- 使用open方法打开连接时，指定使用POST方式发送请求。
- 设置正确的请求头，POST请求通常应设置Content-Type请求头。
- 发送请求，把请求参数转为查询字符串，将该字符串作为send（）方法的参数。
对于上面的应用，使用POST方式实现，只需要改一个请求的发送方法，如下所示：
// 事件处理函数，当下拉列表选择改变时，触发该事件
function change(id) {
// 初始化XMLHttpRequest对象
createXMLHttpRequest();
// 设置请求响应的URL
var uri = "second.jsp";
// 设置处理响应的回调函数
xmlrequest.onreadystatechange = processResponse;
// 设置以POST方式发送请求，并打开连接
xmlrequest.open("POST", uri, true);
// 设置POST请求的请求头,表示数据被编码为名称/值对
xmlrequest.setRequestHeader("Content-Type"
, "application/x-www-form-urlencoded");
// 发送请求
xmlrequest.send("id="+id);
}
其余的部分则无须改变，应用的执行效果与采用GET方式发送请求的效果完全一样。事实上，即使采用POST方式发送请求，一样可以将请求参数附加在请求的URL之后。如果send方法没有请求参数，应传入null，因为有些浏览器规定了send方法必须传入参数。代码如下：
// 事件处理函数，当下拉列表选择改变时，触发该事件
function change(id) {
// 初始化XMLHttpRequest对象
createXMLHttpRequest();
// 设置请求响应的URL
var uri = "second.jsp?id="+id;
// 设置处理响应的回调函数
xmlrequest.onreadystatechange = processResponse;
// 设置以POST方式发送请求，并打开连接
xmlrequest.open("POST", uri, true);
// 设置POST请求的请求头
xmlrequest.setRequestHeader("Content-Type"
, "application/x-www-form-urlencoded");
// 发送请求
xmlrequest.send(null);
}
Ajax发送GET和POST请求案例的更多相关文章
- 【转】AJAX发送 PUT和DELETE请求注意事项
jax使用restful服务发送put 和 delete 请求时直接传参会出现问题 一,采用POST + _method:delete/put + filter 的方法ajax发送put 和 de ...
- AJAX发送 PUT和DELETE请求参数传递注意点，了解一下
ajax发送put 和 delete 请求时,需要传递参数,如果参数在url地址栏上,则可以正常使用, 如果在 data:中需要传递参数,(浏览器会使用表单提交的方式进行提交) 则需要注意此时应作如下 ...
- 通过 Ajax 发送 PUT、DELETE 请求的两种实现方式
一.普通请求方法发送 PUT 请求 1. 如果不用 ajax 发送 PUT,我们可以通过设置一个隐藏域设置 _method 的值,如下: <form action="/emps&quo ...
- Ajax发送GET、POST请求和响应XML数据案例
1.新建工程 新建一个java web工程,新建一个Servlet文件 AServlet.java,用于返回get和post请求. public class AServlet extends Http ...
- 原生Ajax发送get、post请求每一步
说明 发送Ajax的请求的核心对象是XMLHttpRequest,因此我们需要了解该对象的相关属性和方法 方法(图一) 属性(图二) 第一步:创建 XMLHttpRequest对象,下面都简写为 xh ...
- ajax发送GET和POST请求
1.ajax-get请求demo <script> document.getElementById("buttonname").onclik=function(){ / ...
- Ajax发送XML请求案例
Ajax发送XML请求需求: 根据输入的国家,输出这些国家下面的城市. 如果请求参数较多,而且请求参数的结构关系复杂,则可以考虑发送XML请求.XML请求的实质还是POST请求,只是在发送请求的客户端 ...
- Ajax详解及其案例分析------如何获得Ajax对象，使用Ajax对象发送GET和POST请求，校验用户名，POST和GET请求时的乱码处理，实现级联的下拉列表
本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...
- Ajax发送简单请求案例
所谓简单请求,是指不包含任何参数的请求.这种请求通常用于自动刷新的应用,例如证券交易所的实时信息发送.这种请求通常用于公告性质的响应,公告性质的响应无需客户端的任何请求参数,而是由服务器根据业务数据自 ...
随机推荐
- 数据结构之---C语言实现共享栈
所谓共享栈是两个栈在一个顺序的存储空间中.两个栈的栈底各自是存储空间的首尾地址. 如图我们能够将两个栈构造成一个: 如图: 从这里也就能够分析出来,栈1为空时,就是top1等于-1时.而当top2等于 ...
- <LeetCode OJ> 326. Power of Three
326. Power of Three Question Total Accepted: 1159 Total Submissions: 3275 Difficulty: Easy 推断给定整数是否是 ...
- 写一个类似淘宝的ios app需要用到哪些技术？
写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...
- .NET前后台-JS获取/设置iframe内对象元素并进行数据处理
转载请注明出处:果冻栋吖 这个主要是修改H3BPM一个批量审批的功能时候做的.先看下图: H3自带了批量审批的功能,也就是按钮1,有审批意见3,但是如果3里边不填写内容点击1之后,效果就是表单里边没有 ...
- 2015 多校赛 第二场 1004 hdu(5303)
Problem Description There are n apple trees planted along a cyclic road, which is L metres long. You ...
- 2015 多校赛 第一场 1007 (hdu 5294)
总算今天静下心来学算法.. Description Innocent Wu follows Dumb Zhang into a ancient tomb. Innocent Wu’s at the e ...
- 文件操作:Directory,File,FielStream、StreamRead和StreamWriter的使用
Directory文件类,File,FielStream.StreamRead和StreamWriter的使用 (转载) 创建一个新文件 Directory.CreateDirectory(@&quo ...
- P1732 活蹦乱跳的香穗子
题目描述 香穗子在田野上调蘑菇!她跳啊跳,发现自己很无聊,于是她想了一个有趣的事情,每个格子最多只能经过1次,且每个格子都有其价值 跳的规则是这样的,香穗子可以向上下左右四个方向跳到相邻的格子,并且她 ...
- Activity创建时布局文件的实现原理
setContenView(R.id.activity)实现原理 1.底层框架根据布局ID找到布局文件. 2.底层框架解析此布局文件(pull解析). 3.底层框架通过反射构建布局文件中的元素对象(E ...
- SQL 字段类型详解
bit 整型 bit数据类型是整型,其值只能是0.1或空值.这种数据类型用于存储只有两种可能值的数据,如Yes 或No.True 或False .On 或Off. 注意:很省空间的一种数据 ...