XMLHttpRequest发送POST请求

1.前言

POST请求的适用性更广,可使用更大的请求参数,而且POST请求的请求参数通常不能直接看到。因此在使用Ajax发送请求时,尽量采用POST方式而不是GET方式发送请求。发送POST请求通常需要如下的三个步骤:

1)        使用open方法打开连接时,指定使用POST方式发送请求。

2)        设置正确的请求头,POST请求通常应设置Content-Type请求头

3)        发送请求,把请求参数转换为查询字符串,将字符串作为send()方法请求参数。

2.例子

1)        此处的代码与get的代码是差不多的,读者如果想要实现,自己可以修改。首先,我僮在first.html中修改为:

 // 事件处理函数,当下拉列表选择改变时,触发该事件
	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);
	}

2)        当然,使用GET的方法也是可以的,只要修改下面的形式就行了。

// 事件处理函数,当下拉列表选择改变时,触发该事件
	function change(id)
	{
		// 初始化XMLHttpRequest对象
		createXMLHttpRequest();
		// 设置请求响应的URL
		var uri = "second.jsp?id=" + id;
		// 设置处理响应的回调函数
		xmlrequest.onreadystatechange = processResponse;
		// 打开与服务器响应地址的连接
		xmlrequest.open("POST", uri, true);
// 设置POST请求的请求头
		xmlrequest.setRequestHeader("Content-Type"
			, "application/x-www-form-urlencoded");

		// 发送请求
		xmlrequest.send(null);
	}

运行的结果是跟GET的是一样的,读者可以先看GET的使用再阅读这一篇文章。

3.乱码问题

如果我们传入的是一个值为String的,那么就有可能会出现乱码问题,这下我们应该怎样处理呢?在second.jsp的页面添加下面的代码片段就可行了。

 <%
// 处理POST请求
if (request.getMethod().equalsIgnoreCase("POST"))
{
	request.setCharacterEncoding("UTF-8");
	System.out.println(request.getParameter("value"));
}
// 处理GET请求
else if (request.getMethod().equalsIgnoreCase("GET"))
{
	String tmp = request.getParameter("value");
	String a = new String(tmp.getBytes("ISO-8859-1") , "UTF-8");
	System.out.println(a);
}
%>

时间: 2024-10-08 17:44:38

XMLHttpRequest发送POST请求的相关文章

使用xmlHttprequest 发送异步请求(Ajax核心对象)

1.创建XMlHtttpRequest对象 因为浏览器不同载入xmlHttpRequst的方式也不一样 IE中:var  xmlhttp=new ActiveXObject("MSXML2.XMLHTTP"); 其他浏览器:var  xmlhttp=new  XMLHttpRequest(); 2.对onreadystatechange事件追加方法 当xmlhttp.readystate 状态改变时会自动触发这个事件 readystate可能出现的五种状态: 0:未初始化:XMLHtt

XMLHttpRequest发送XML请求

1.前言 对于请求参数为大师key-value对的情形,笔者更加倾向于使用简单的POST请求.但对于某些极端的表形,如请求参数特别多,而且请求参数的结构关系复杂,则可以考虑发送XML请求.XML请求的实质还是POST请求,只是在发送请求的客户产端页面将请求参数封装成XML字符串的形式,服务器则负责解析XML字符串.当然,服务器获取到XML字符串后,可借助dom4j或JDOM等工具来解析. 2.例子 这个例子还是跟前面所讲的一样,通过左边的点击国家,然后点击"发送",右边 就可以看到国家

XMLHttpRequest发送JSON请求

1.前言 现在Ajax技术已逐步使用JSON响应来获取传统的XML响应.当服务器响应数据量较大,而且响应数据有复杂的结构关系时,使用JSON响应是很好的选择. 2.例子 下面的例子示范一个用户根据种类查看图书的示例,该服务器响应是N本图书信息,它们具有数据量较大,而且具有复杂的结构关系的特征,为此考虑使用JSON响应进行处理. (源码) 1)        下面是提供服务器相应的Servlet代码. @WebServlet(urlPatterns={"/chooseBook"}) pu

Webpack运行后,XMLHttpRequest发送带参请求,后台$_POST没有数据

环境: 打包工具: Webpack: 整合软件包: WAMP: 编辑器:VsCode: Webpack虚拟出的端口号是8080,本地Apache的端口号是80 问题重现: JS代码,使用FormData对象作为传输数据的格式: function postData() { var formData = new FormData(); formData.append("data", JSON.stringify({name:'xxx', age:20})); function xhrReq

Ajax发送post请求

//创建Ajax对象(兼容处理) function createXHR() { var xhr = null; if(window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } return xhr; } //发送post请求 function request(){ xhr.open('P

解决浏览器跨域限制发送ajax请求

一.什么是浏览器跨域限制?本质是什么? 所谓浏览器跨域限制,其实是为了数据安全的考虑由Netscape提出来限制浏览器跨域访问数据的策略,这是一中约定,正式叫法为浏览器同源策略,目前已经在大多数浏览器中支持. 本质上,所谓浏览器同源策略即:不允许浏览器访问跨域的Cookie,ajax请求跨域接口等.也就是说,凡是访问与自己不在相同域的数据或接口时,浏览器都是不允许的. 最常见的例子:对于前后端完全分离的Web项目,前端页面通过rest接口访问数据时,会出现如下问题: 不允许发送POST请求:在发

原生js和jquery发送ajax请求及封装

原生js                                   // ajax get 五部曲function ajax_get(url,data){ // 异步对象 var ajax=new XMLHttpRequest(); // 设置url和请求方式 // url方法 如果有数据要把数据拼接到url中?name=jack&age=20 if(data){ url+=?; url+=data; }else{}; ajax.open('get',url); // 发送请求 aja

JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)

一.使用Ajax发送get请求 发送异步请求的步骤 - 获取Ajax对象:获取 XMLHttpRequest对象实例 - 创建请求:调用XMLHTTPRequest对象的open方法 - 设置回调函数:为Ajax对象的 onreadystatechange事件设定响应函数 - 发送请求:调用Ajax对象的send方法 - 获取Ajax对象     - 创建请求 - 注意: - true:表示发送异步请求(当Ajax对象发送请求时,用户仍然可以对当前页面做其它的操作) - false:表示发送同步

AJAX的来龙去脉(由来)-如果被封装出来的--ajax发送异步请求(四步操作)

<黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打包ajax生成小工具.avi;  有介绍: 个人理解:就是封装了 XMLHttpRequest 的请求方法:演变而成我们常用的 ajax: =====原始的请求方式: ajax发送异步请求(四步操作) 1. 第一步(得到XMLHttpRequest) * ajax其实只需要学习一个对象:XMLHttpRequ