解析Ajax响应结果的两种简单方法.

解析Ajax响应结果的两种简单方法.

用过Ajax方面技术的都知道,部分的框架都会要求在客户端有个响应的function或者客户端的回调,这个方法在整个异步操作中就是用来解析服务器的响应.通常服务器给客户端的response以字符串格式传递,比如json或xml,而比较灵活的xml是最常见的.这也是因为在服务器端将结果转换成xml比较方便.那么解析这些xml成我们自己要的界面元素,就是必不可少.而这中解析,常见的就是用DOM对象,通过xpath,然后加个循环,最后拼凑出一个table或者select.这个过程是比较麻烦.像Ajax.net框架就做得比较智能,能像服务器那样调用对象,但是要形成一个table表格还是要一个个获取,应为客户端没有像dDatagrid那样可以方便的绑定数据源.这里介绍2种解析的方法,基本上就是自动展现.也许有人已经猜到,还是看看代码吧.

1.用服务器控件的RenderControl方法输出html,服务器控件最终在生成的还是html代码,利用这个把datagrid转换成table那就很简单了.而RenderControl方法就是把控件转成html的字符串.

RenderControl
 1[AjaxMethod()]
 2        public string GetSuppliers()
 3        {
 4            using (SqlConnection con = new SqlConnection("Data Source=.;Initial Catalog=Northwind;Integrated Security=True"))
 5            {
 6                SqlCommand command = new SqlCommand("select * from suppliers1", con);
 7                SqlDataAdapter adapter = new SqlDataAdapter(command);
 8                DataSet ds = new DataSet();
 9                adapter.Fill(ds);
10
11                DataGrid gd = new DataGrid();
12                gd.DataSource = ds.Tables[0];
13                gd.DataBind();
14
15                // 利用控件的RenderControl方法输出html
16                StringWriter sw = new StringWriter();
17                HtmlTextWriter hw = new HtmlTextWriter(sw);
18                gd.RenderControl(hw);
19
20                return sw.ToString();
21            }
22        }

获取相应大的结果只需要一句话document.getElementById("divResult").innerHTML = response.value;

2.用 xslt解析xml,这种方法还有点技术含量,具体原理大伙都会,主要看看在js种如何去转换xml.
IE中

IEXSLT
 1function TransXml(xmlSource, xsltSource)
 2    {
 3        try
 4        { 
 5            var doc = new ActiveXObject("MSXML2.DOMDocument.3.0");
 6            var docXslt = new ActiveXObject("MSXML2.FreeThreadedDOMDocument.3.0"); 
 7            doc.async = false; 
                //xmlSource 是传进来的xml字符串
 8            doc.loadXML(xmlSource); 
 9           
10            docXslt.async = false;
11            docXslt.load(xsltSource);
12
13            var oTemplate = new ActiveXObject("MSXML2.XSLTemplate");
14            oTemplate.stylesheet = docXslt;
15            
16            var oProcessor = oTemplate.createProcessor();
17            oProcessor.input = doc;
18           
19            oProcessor.addParameter("currentTime", new Date().toLocaleString());
20            oProcessor.transform();
21            sResult = oProcessor.output;  
22            // 这里是保存解析的结果 divResult1是个div
23            divResult1.innerHTML = sResult; 
24        }
25        catch (e)
26        {
27            alert(e.message);
28        } 
29         
30    }

Firefox

FFXSLT
 1function TransXml(xmlSource, xsltSource)
 2    {
 3        try
 4        { 
 5            var docXslt = document.implementation.createDocument("", "", null);
 6            
 7            var oParser = new DOMParser();
 8            doc = oParser.parseFromString(xmlSource, "text/xml"); 
 9            doc.async = false;  
10           
11            docXslt.async = false;
12            docXslt.load(xsltSource);
13
14            var oProcessor = new XSLTProcessor();            
15            oProcessor.importStylesheet(docXslt);
16            
17            oProcessor.setParameter(null, "currentTime", new Date().toLocaleString()); 
18            sResult = oProcessor.transformToDocument(doc);
19                
20            var sXml = new XMLSerializer().serializeToString(sResult, "text/xml"); 
21            document.getElementById("divResult").innerHTML = sXml;
22        }
23        catch (e)
24        {
25            alert(e.message);
26        } 
27         
28    }