封装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(1000);
            model.Namec = "胰岛素注射剂";
            model.Newid = Guid.NewGuid().ToString();
            model.Medicinemodel = "粉针剂";
            model.Outlookc = "0.6/mg";
            model.Memo2 = "3";
            model.Jkycj = "江苏正大天晴药业股份有限公司";
            return model;
        }


        #endregion

        #region IMGUPDATE

        private void ImgUpdate()
        {
            string imgUrl = "";
            Random rad = new Random();
            imgUrl = "Images/" + rad.Next(10) + ".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- 12px; border-color: Black;">
            <thead>
                <th style=" auto;">
                    ID
                </th>
                <th style=" auto;">
                    NAMEC
                </th>
                <th style=" auto;">
                    MEDICINEMODEL
                </th>
                <th style=" auto;">
                    OUTLOOKC
                </th>
                <th style=" auto;">
                    MEMO2
                </th>
                <th style=" 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>