JS处理服务端Response回来的数组
最近在做一个项目时，需要在服务器端response回来一个结果数组，然后在客户端的浏览器通过JS处理。
GetResult.ashx.cs：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ResponseDemo
{
/// <summary>
/// GetResult 的摘要说明
/// </summary>
public class GetResult : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string[] result = new string[] { };
bool ok = true;
//do something
//.....
if (ok)
{
result = new string[] { "success", "true", "url", "http://localhost:80/" };
}
else
{
result = new string[] { "error","false"};
}
context.Response.Write(result);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
客户端是通过XmlHttpRequest来进行通信的。通信后，需要处理得到的结果信息。
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = show;
xhr.open("GET", "GetResult.ashx", true);
xhr.send(null);
function show() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var response= "";
try {
response = eval("(" + xhr.responseText + ")");
} catch (e) {
alert("error");
}
document.write("xhr.responseText: "+ xhr.responseText + "<br/>eval response: "+ response);
}
}
}
</script>
</body>
</html>
很明显，上面这样是会catch到错误信息的，输出的也是：
xhr.responseText: System.String[]
eval response:
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码，在其中再加对括号，是为了把里面需要处理的字符串当作一个整体，避免与上下文造成解析错误。
看到一些朋友说，可以把需要response的信息转换成字符串，并用特殊符号分隔，用JS处理时再Split。这无疑也是一个办法，但总觉得不是很方便。
然后，弄了个折中的办法：在Server端，先把数组解析了。
//context.Response.Write(result);
string resultString = "[";
for (int i = 0; i < result.Length; i++)
{
resultString += "'" + result[i].ToString() + "',";
}
resultString = resultString.TrimEnd(',') + "]";
context.Response.Write(resultString);
JS端的代码不用改变，就可以成功取得response回来的数组了。
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var response= "";
try {
response = eval("(" + xhr.responseText + ")");
} catch (e) {
alert("error");
}
document.write("xhr.responseText: "+ xhr.responseText + "<br/>eval response: "+ response);
}
}
输出结果：
xhr.responseText: ['success','true','url','http://localhost:80/']
eval response: success,true,url,http://localhost:80/
上面中，也可以通过response[i]访问。
这样简单的使用，之前没掌握技巧，也花费不少时间。Mark it。