AJAX(三）详解原生POST请求
Posted ldq678
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX(三）详解原生POST请求相关的知识，希望对你有一定的参考价值。
post请求与get请求的代码差别很少。还是直接来个例子吧，下面的例子功能是，当id为“userName”的文本框失去焦点（onblur）时，使用AJAX发出post请求，验证用户名是否已经存在。
一、服务端代码。
public class CheckNameHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; if (context.Request.HttpMethod.ToUpper() == "POST") { string uName = context.Request.Form["uName"]; if (uName == "admin") { context.Response.Write("true"); } else { context.Response.Write("false"); } } } }
没啥好解释的，服务端通过Form方式，获取post过来的数据，如果是“admin”就认为用户名已存在，否则就认为用户名不存在.
二、客户端代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> window.onload = function () { var ipt = document.getElementById("userName"); ipt.onblur = function () { ////1.声明异步对象 var xhr = false; //2.根据浏览器类型，创建异步对象 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //3.从文本框中获取用户名 var uName = this.value; //4.打开异步对象，并设置参数 xhr.open("post", "CheckNameHandler.ashx", true); //5.设置setRequestHeader，post请求必须设置 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //6.设置回调函数 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { var result = xhr.responseText; var span = document.getElementById("ckMsg"); if (result == "true") { span.innerHTML = "用户名已存在"; } else { span.innerHTML = "用户名不存在"; } } } //7.发送异步请求 xhr.send("uName=" + uName); } } </script> </head> <body> <input type="text" name="userName" id="userName" value="" /><span id="ckMsg"></span> </body> </html>
代码也很简单，给文本框注册一个js时间onblur，当失去焦点时就通过AJAX发出post请求，验证文本框中输入的用户名是否已经存在。代码主体跟get方式几乎没有太大差别，需要说明的有以下几点：
1.使用post请求方式，xhr.open（）的第一个参数需要改为“post”。
2.使用get请求时，可以不设置请求报文头；但是如果使用post请求方式，就必须设置。代码为：
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
不管是请求报文头还是响应报文头，绝大部分的属性都是以键值对的形式来标注的。这个也不例外，这里的key和value都是死的，需要记一下。
这里需要设置的key是“Content-Type”，没啥好说的，那个value太长了，不过不需要完全背下来，山人自有妙计。
我们只需要打开vs，随便找一个能写HTML代码的文件，比如.html文件，比如.aspx文件，接下来在<body>标签中写一个<form>标签，然后给这个标签添加属性“enctype”，
此时VS的只能提示就会为我们显示出如下图：
没错，就是第一个选项，选中它，然后复制过来就搞定，简单！
3.post传参方式与get不同，它需要在send函数中传递参数，参数的组织格式和get也是相同的，都是连接成字符串：“key1=val1&key2=val2.....”。
只不过get传参是在url后边拼接，post传参是把参数放到send（）方法内部。
三、get与post差别
从表面上看，不管是什么请求方式，都不再依赖表单<form>了，包括post请求，所以从纯粹写代码的角度上来说，使用AJAX技术发出请求，get与post的差别已经模糊。
但是，差别还是有的，最好不要乱来。
1.get传参是通过url传参的，而url长度在某些浏览器中是受限的。而post传参理论上是不受限的，所以post适合大量数据传递。
2.GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。
3.在客户端使用get请求时,服务器端使用Request.QueryString来获取参数,而客户端使用post请求时,服务器端使用Request.Form来获取参数。
4.请老老实实遵循，如果做查询操作，就使用get请求；如果是增删改操作，就使用post请求。
以上是关于AJAX(三）详解原生POST请求的主要内容，如果未能解决你的问题，请参考以下文章