最近在做一个项目时,需要在服务器端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。