Asp.Net】教你一步一步学习Ajax（二）使用POST方法

上一篇学习了如何在Ajax中使用GET方法来进行直的传递，下面我们来学习另一种传值方法：POST。

关于GET和POST两种方法的区别有一下几种：

1.使用GET方法安全性很低，传递的值是通过地址来传递的，当然在Ajax中也不会出现地址。值得注意的是，浏览器地址是不支持中文的，如果传递的值是中文的话会出现乱码，需要进行转码后才能正常传值，而POST无需考虑这些问题。

2.GET方法只能用于一些小数据量的传值，不能大于2KB；而POST方法的话理论上是没有最大值限制的，这需要看服务器的情况了。

使用POST也有两种方式来传递值，一种是通过头文件来传递，一种是直接用send来发送。

一。通过头文件来进行传值：

View Code

 1  var xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");
 2         function getData() //通过头文件来传值
 3         {
 4             xmlhttprequest.open("POST", "Handler1.ashx", true);
 5             xmlhttprequest.onreadystatechange = setValue;
 6             xmlhttprequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=gb2312");
 7             xmlhttprequest.setRequestHeader("User", document.getElementById("select").value);
 8             xmlhttprequest.send(null);
 9         }
10         function setValue() {
11             if (xmlhttprequest.ReadyState == 4 && xmlhttprequest.Status == 200) {
12                 document.getElementById("TextArea1").value = xmlhttprequest.responseText;//获取传过来的文本数据不是乱码
13                 document.getElementById("TextArea2").value += xmlhttprequest.getResponseHeader("Detail");//获取传过来的头文件，为中文时是乱码
14             }
15         }

后台传数据也分为两种，一个是通过头文件；一种就是普通的通过xmlhttprequest通信来传递。

1.通过头文件传递：context.Response.AddHeader("Detail", ds.Tables[0].Rows[0][0].ToString());也就是相当于添加Detail属性，给该属性赋值。

获取值也就是跟获取属性值类似的：string Result=xmlhttprequest.getResponseHeader("Detail");

2.普通通信传递： context.Response.Write(ds.Tables[0].Rows[0][0].ToString());直接写入就行了，当然，在写入的时候可以根据需求写成json格式或者XML格式。

获取值为：string Result=xmlhttprequest.responseText;

二。通过send来传递值：

View Code

 1 function getDataBysend()//通过send来传值
 2          {
 3             XmlhttpRequest.onreadystatechange = setDataBysend;
 4             XmlhttpRequest.open("POST", "Handler2.ashx", true);
 5             XmlhttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
 6             XmlhttpRequest.send("User=Test1&&index=2");
 7         }
 8         function setDataBysend() {
 9             if (XmlhttpRequest.readystate == 4 && XmlhttpRequest.status == 200) {
10                 document.getElementById("Data").value = XmlhttpRequest.responseText;
11             }
12         }

使用send时，多个参数值之间用&&来隔开，在后台获取参数值为：

string User = context.Request.Params["User"];
int index=Convert.ToInt32(context.Request.Params["index"]);

后台发送数据与头文件一样，在此不再重复。

文章写得不好敬请见谅！

本人在使用Ajax时经常遇到问题，比如未能获取到数据，界面操作无效果等。通过检查代码很难发现是哪出了问题，再者javascript代码不能进行断点调试。然而我使用的浏览器为第三方的，后来我使用了IE，因为IE浏览器有报错的功能。如果界面出现有错误，在浏览器左下角有和警告图标，双击即可知道是哪出了问题，慢慢观察就可以解决问题了。由于以上javascript代码是不能智能出现的，所以我怀疑大小写可能会有问题，于是一个个尝试，至少在我的环境下是能够成功的，不知道大小写是不是真的可以不区分。在我看来，javascript因为是脚本语言，应该是没关系的吧。若读者知道的话，请告诉我一声。

点此进入下载源码。