不知不觉进公司一个月了,前阵子有点小偷懒,一边学东西一边跟着做点简单的东西。说好的发发东西,结果好久没更新了。上篇说了来个AJAX,一直没兑现这章就开一波!
首先说一下AJAX,老生常谈了啊,异步JavaScript和XML。首先我说说我对于这个的理解,可能是很谬误的东西,大致是那个意思就行,因为我之前没有看过相关的材料,只是用的时候网上荡了个小实例,然后在项目中用了几个地方,然后浅浅粗粗的谈一下我都用它干嘛来了。
第一点:我们为啥要用AJAX,用了有啥好处啊?
(1)向后台传值,并接收后台返回值。
有些朋友会说可以用Lable、TextBox这些可以储存值得控件进行传值啊!干嘛非要用AJAX!刚开始的时候我也觉得是这样,但是WebForm中存在着大量的让人蛋疼的问题,比如同样的控件存值,又不想暴露在页面上,那么必然要隐藏掉控件,但是如果你把控件隐藏掉了,那么控件在页面刷新初始化控件的时候,因为它不在ViewState集合中,所以产生了控件不被生成的问题,那么前台读取的时候会出现控件为null的问题,后台则则出现取值为""的问题。但是有的时候又可以用,这个问题我还没时间深究等下次出新篇的时候提一下。还有就是这些控件存值都存在值得内容大小存在限制的问题,当内容过多时我们需要借助AJAX来解决。
到这里有些人会说,隐藏的控件解决不了不可以用隐藏域来解决么!不得不说隐藏域真是个很操蛋的东西,一个页面可能有多个变量需要存值,那么就要定义多个隐藏域,想法是好的,然而测试了一下,当在引起页面刷新的事件中做隐藏域的赋值时,隐藏域的值会丢失,断点调试明明给值了,方法执行完毕后,当前赋值的值丢失。那么就只能在UpdatePanel中或者非服务器控件的事件中做这个操作。
(2)我们需要进行数据库操作时,是不能写在前台的,那样会暴露数据,所以我们要把这些操作放入后台,这就需要去调用后台方法,如果只是操作数据库不需要返回值就可以用简单的调用后台的方法即可,但如果我们进行完操作的时候需要返回大量的数据交给前台处理,这时候就是ajax比较擅长的操作了。
写了很多,也挺干巴巴的,没啥意思,来点代码简单对ajax的流程进行下说明吧:显示前台向后台发出请求,说大哥你看看我把材料交给你你帮我加工下呗(加工完记得还我哦),或者直接帮我转交到仓库(数据库)吧。
1 function CheckNode() { 2 //获取触发事件的元素 3 var obj = window.event.srcElement; 4 //该判断控件是不是html的checkbox控件 5 if (obj.tagName == "INPUT" && obj.type == "checkbox" && obj.checked == true) { 6 //创建XMLHttpRequest对象 7 var xmlHttp = false; //创建一个新变量并赋值false,使用false作为判断条件说明还没有创建XMLHTTPRequest对象 8 xmlHttp = CreateXMLHttp(); 9 if (!xmlHttp) { 10 alert("创建XmlHttpRequest对象失败!"); 11 return; 12 } 13 //配置XMLHttpRequest对象 14 xmlHttp.open("get", "Get.aspx?id=" + id); 15 16 //设置回调函数 17 xmlHttp.onreadystatechange = function () { 18 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 19 var str = xmlHttp.responseText; //使用字符串接收回传内容 20 var strArr = new Array(); 21 strArr = str.split("_"); //处理回传内容,分割成数组 22 23 //使用接收的内容赋值给控件document.getElementById('<%=lbl_baseprice.ClientID%>').innerText = strArr[0]; 24 document.getElementById('<%=lbl_minprice.ClientID%>').innerText = strArr[1]; 25 document.getElementById('<%=lbl_salaprice.ClientID%>').innerText = strArr[2]; 26 } 27 } 28 //发送请求 29 xmlHttp.send(null); 30 } 31 }
如上,我们的发送命令其实是在接收命令之后定义的,其实这就是我们说的
xmlHttp.onreadystatechange = function () 异步所在,我们开了个异步的等待线程,等待接收返回值,等到满足这个状态
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)我们就进行接收。
然后就是后台:弟弟,帮你加工好了,发你了啊
1 protected void Page_Load(object sender, EventArgs e) 2 { 3 Response.Clear(); //清除上次返回值 4 5 //使用Request.QueryString获取前台发来的请求参数 6 string id = Request.QueryString["id"]; 7 string price = Request.QueryString["price"]; 8 if (price !="") 9 { 10 sql = string.Format("update T_org_d_item set price = {0} where org_d_item_id = {1}", price,id); 11 if (GetAffectedRecord(_connectionString, sql) != -1) 12 { 13 Response.Write("价格设定成功!"); //弄好了发你了 14 } 15 else 16 { 17 Response.Write("价格设定失败!"); //不好意思啊弟弟,我给搞砸了 18 } 19 } 20 else 21 { 22 sql = "SELECT base_price,min_saleprice,saleprice FROM T_d_item_baseprice WHERE d_item_bprice_id = " + id; 23 DataTable dt = GetDataTable(_connectionString, sql); 24 Response.Write(dt.Rows[0]["base_price"].ToString() + "_"); 25 Response.Write(dt.Rows[0]["min_saleprice"].ToString() + "_"); 26 Response.Write(dt.Rows[0]["saleprice"].ToString()); 27 } 28 Response.End(); //都给你发过去,返回值传递结束 29 }
上面就是AJAX了,上面的示例和很多朋友写的示例一样,后台都写在了pageload中,但是和我一样新人朋友别误会哦,使用自定义方法也可以去做的,不过这时候你要通过前台那个请求的方法调用后台告诉后台我点了3号小姐的钟,让她来给俺敲背,嘿嘿。这样就可以让指定的方法执行去接收并返回你想要的结果。