封装AJax实现JSON前台与后台交互

实践技术点：1、AJax自定义封装

　　　　　　2、后台序列化与反序列化JSON

　　　　　　3、客户端解析JSON字符串，处理DOM

实现代码如下：

　1、JS脚本代码：

　　　　　　　　　　　　　　  1 /***

 NOTE:AJAX处理JS
 TIME:2015-5-18 11:02:51
 AUTHOR:宋梦澜

 ***/

 var AJax = function (handleUrl) {
     this.Url = handleUrl ? handleUrl : "";
     this.xmlHttpRequest = null;

     this.CallFunc = null; //回调函数
     this.DataContent = null; //数据内容
 };

 AJax.prototype.CheckUrl = function () {
     var bo = false;
     //if (this.Url.indexOf('.') > 0)
     if (this.Url.lastIndexOf('.') > 0) {
         bo = true;
     }
     else {
         bo = false;
     }
     return bo;
 };

 AJax.prototype.Init = function () {
     //判断浏览器是否支持异步对象
     if (window.XMLHttpRequest) {
         this.xmlHttpRequest = new XMLHttpRequest();
     }
     else if (window.ActiveXObject) {
         try {
             this.xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
             this.xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
             if (console && console.log) {
                 console.log("无法创建异步请求对象！");
             }
         }
     }
 };

 function ProcessResponse(callFunc, obj) {
     if (obj.readyState == 4 && obj.status == 200) {
         var resultData = null;
         var resultType = obj.getResponseHeader("Content-Type");
         //        switch (resultType) {
         //            case "image/Png" || "image/jpeg":
         //                resultData = obj.responseBody;
         //                break;
         //            case "text/xml; charset=gb2312" || "text/xml; charset=utf-8" || "text/xml;charset=gb2312" || "text/xml;charset=utf-8":
         //                resultData = obj.responseXML;
         //                break;
         //            case "text/html; charset=gb2312" || "text/html; charset=utf-8" || "text/html;charset=gb2312" || "text/html;charset=utf-8":
         //                resultData = obj.responseText;
         //                break;
         //            default:
         //                resultData = obj.responseStream;
         //}

         if (resultType == "image/Png" || resultType == "image/jpeg") {
             resultData = obj.responseBody;
         }
         else if (resultType == "text/xml; charset=gb2312" || resultType == "text/xml; charset=utf-8" || resultType == "text/xml;charset=gb2312" || resultType == "text/xml;charset=utf-8") {
             resultData = obj.responseXML;
         }
         else if (resultType == "text/html; charset=gb2312" || resultType == "text/html; charset=utf-8" || resultType == "text/html;charset=gb2312" || resultType == "text/html;charset=utf-8") {
             resultData = obj.responseText;
         }
         else {
             resultData = obj.responseStream;
         }

         if (resultData) {
             //执行回调函数
             callFunc(resultData);
         }
         else {
             alert("接收服务器数据异常！");
         }
         //设置资源失效
         delete resultData;
         delete resultType;
         //释放资源
         //CollectGarbage();
         //AJax.Dispose();
         setTimeout(CollectGarbage, 3);
     }
 }

 AJax.prototype.Handle = function (callFunc, obj) {
     this.xmlHttpRequest.onreadystatechange = function () { ProcessResponse(callFunc, obj); };
 };

 //在IE最小化时，IE会主动调用一次GC，
 AJax.prototype.Dispose = function () {
     if (this.xmlHttpRequest) {
         this.xmlHttpRequest = null;
         //delete this.xmlHttpRequest;
         //释放资源（由于资源还在上下文中，立即调用GC并不会释放资源，故延时call GC）
         //CollectGarbage();
         setTimeout(CollectGarbage, 3);
     }
 };

 AJax.prototype.SendRequest = function () {
     if (this.CheckUrl()) {
         this.Init();
         if (this.CallFunc) {
             if (this.xmlHttpRequest) {
                 this.xmlHttpRequest.open("POST", this.Url, true);
                 this.xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
                 //this.xmlHttpRequest.onreadystatechange = ProcessResponse;
                 this.Handle(this.CallFunc, this.xmlHttpRequest);
                 this.xmlHttpRequest.send(this.DataContent);
             }
             else {
                 this.xmlHttpRequest.abort();
                 this.Dispose();
                 alert("异步请求对象创建失败！");
             }
         }
         else {
             this.Dispose();
             alert("请设置回调函数！");
         }
     }
     else {
         alert("非法地址！");
     }
 };

2、后台处理页面代码：

 protected void Page_Load(object sender, EventArgs e)
         {
             DataAction();
         }

         private void ResponseWrite(string contentType, string chartSet, string contentEncoding, Object obj)
         {
             //Response.ContentType = "text/html";
             //Response.Charset = "gb2312";
             //Response.ContentEncoding = Encoding.GetEncoding("GB2312");
             //Response.Write(ModelAdd());
             //Response.Flush();
             //Response.End();

             Response.ContentType = contentType;
             Response.Charset = chartSet;
             Response.ContentEncoding = Encoding.GetEncoding(contentEncoding);
             Response.Write(obj);
             Response.Flush();
             //Response.End();
             HttpContext.Current.ApplicationInstance.CompleteRequest();
         }

         private void DataAction()
         {
             string actionFlag = Request.QueryString["flag"];
             switch (actionFlag)
             {
                 case "add":
                     ModelAdd();
                     break;
                 case "img":
                     ImgUpdate();
                     break;

                 default:
                     break;
             }

         }

         #region ADDMODEL

         private void ModelAdd()
         {
             string strJson = "";
             MODEL_Meidicine model = DataAdd();
             MemoryStream ms = new MemoryStream();
             DataContractJsonSerializer json = new DataContractJsonSerializer(typeof(MODEL_Meidicine));
             json.WriteObject(ms, model);
             strJson = Encoding.UTF8.GetString(ms.ToArray());
             ms.Flush();
             ms.Close();

             ResponseWrite("text/html", "gb2312", "GB2312", strJson);
         }

         private MODEL_Meidicine DataAdd()
         {
             MODEL_Meidicine model = new MODEL_Meidicine();
             model.Id = (new Random()).Next();
             model.Namec = "胰岛素注射剂";
             model.Newid = Guid.NewGuid().ToString();
             model.Medicinemodel = "粉针剂";
             model.Outlookc = "0.6/mg";
             model.Memo2 = "";
             model.Jkycj = "江苏正大天晴药业股份有限公司";
             return model;
         }

         #endregion

         #region IMGUPDATE

         private void ImgUpdate()
         {
             string imgUrl = "";
             Random rad = new Random();
             imgUrl = "Images/" + rad.Next() + ".JPG";
             ResponseWrite("text/html", "utf-8", "UTF-8", imgUrl);
         }

         #endregion

4、JSON实体类代码：

 [DataContract]
     public class MODEL_Meidicine
     {
         private string _newid;

         [IgnoreDataMember]
         public string Newid
         {
             get { return _newid; }
             set { _newid = value; }
         }

         private int _id;
         [DataMember(Name = "ID")]
         public int Id
         {
             get { return _id; }
             set { _id = value; }
         }

         private string _namec;
         [DataMember(Name = "NAMEC")]
         public string Namec
         {
             get { return _namec; }
             set { _namec = value; }
         }

         private string _medicinemodel;
         [DataMember(Name = "MEDICINEMODEL")]
         public string Medicinemodel
         {
             get { return _medicinemodel; }
             set { _medicinemodel = value; }
         }

         private string _outlookc;
         [DataMember(Name = "OUTLOOKC")]
         public string Outlookc
         {
             get { return _outlookc; }
             set { _outlookc = value; }
         }

         private string _memo2;
         [DataMember(Name = "MEMO2")]
         public string Memo2
         {
             get { return _memo2; }
             set { _memo2 = value; }
         }

         private string _jkycj;
         [DataMember(Name = "JKYCJ")]
         public string Jkycj
         {
             get { return _jkycj; }
             set { _jkycj = value; }
         }

     }

3、前台显示及调用代码：

调用脚本“

 <script src="Scripts/AJax.js" type="text/javascript" language="javascript"></script>
     <script type="text/javascript" language="javascript">
         //var temp = msg();
         //        var temps = new msg();
         //        alert(temps.kk);
         //AJax.SendRequest();

         function Update() {
             var aJax = new AJax();
             aJax.Url = "AJaxHandle.aspx?flag=add";
             aJax.DataContent = "txt=" + escape("你好") + "&key=sf46bs9vftr";
             aJax.CallFunc = function (result) { UIAction(result); };
             aJax.SendRequest();
         }

         function UIAction(res) {
             var obj = eval('(' + res + ')');
             var tbl = document.getElementById("tblResult");
             var row = tbl.insertRow(tbl.rows.length);
             row.insertCell(0).innerText = obj.ID;
             row.insertCell(1).innerText = obj.NAMEC;
             row.insertCell(2).innerText = obj.MEDICINEMODEL;
             row.insertCell(3).innerText = obj.OUTLOOKC;
             row.insertCell(4).innerText = obj.MEMO2;
             row.insertCell(5).innerText = obj.JKYCJ;
         }

         function updateImg() {
             var aJax = new AJax();
             aJax.Url = "AJaxHandle.aspx?flag=img";
             aJax.DataContent = "txt=" + escape("你好") + "&key=sf46bs9vftr";
             aJax.CallFunc = function (result) { document.getElementById("imgObj").src = result; };
             aJax.SendRequest();
         }

     </script>

html代码：

 <div>
         <table id="tblResult" style="border-width: 12px; border-color: Black;">
             <thead>
                 <th style="width: auto;">
                     ID
                 </th>
                 <th style="width: auto;">
                     NAMEC
                 </th>
                 <th style="width: auto;">
                     MEDICINEMODEL
                 </th>
                 <th style="width: auto;">
                     OUTLOOKC
                 </th>
                 <th style="width: auto;">
                     MEMO2
                 </th>
                 <th style="width: auto;">
                     JKYCJ
                 </th>
             </thead>
             <tbody>
                 <td>
                     0
                 </td>
                 <td>
                 </td>
                 <td>
                 </td>
                 <td>
                 </td>
                 <td>
                 </td>
                 <td>
                 </td>
             </tbody>
         </table>
         <div style="text-align: center;">
             <img id="imgObj" src="" alt="随机更新" />
         </div>
         <div style="text-align: center;">
             <input id="" type="button" onclick="Update();" value="更新" />
             <input id="" type="button" onclick="updateImg();" value="更新图片" />
         </div>
     </div>