封装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-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>