自动生成摘要（一）：xmlHttp提交和接收数据

 

自动生成摘要（一）：xmlHttp提交和接收数据

在这个系列的文章里，将要探讨一下，在新闻（文章）发布系统里面，用户发布新闻时，自动生成摘要的相关功能。首先，要研究的是xmlHttp提交和接收数据，然后再逐步丰富程序的功能。

任务目标：
1、A页面将表单中的数据（textarea）通过xmlHttp提交到另外一个程序B页面，并且由B接收，生成摘要再返回A。
2、将A页面中的在线html编辑器（Ifram）中的数据，提交到B页面，B接收，B过滤掉数据中的HTML标签（标记），生成摘要，将数据返回A。

这篇文章（仅指系列文章中的一），主要有以下几个部分：
一、A页面和B页面的主要内容。
二、A页面xmlHttp提交数据。
三、B页面接收和处理数据。
四、A页面处理xmlHttp返回结果。
五、在调试过程当中出现的错误和处理。

一、A页面和B页面的主要内容。
1、A页面的主要内容：
1.1　多行文本框(textarea)n_content，用来存放新闻的内容。因为现在是最简单的功能调试，所以本文章里是把这里面的数据提交到B页面。
1.2　浮动框架(ifram)、编辑器Editor1，用来编辑新闻的内容。当form提交的时候，Ifram自动把内容放入n_content。可以使用Editor1.getHTML()来取得里面的内容。（这个在后面的文章将会用到。）
1.3　多行文本框(textarea) n_summary，用来存放新闻的摘要。
1.4　ID为SummaryResult的span，用来提示一些信息。
1.5　按钮send，用来触发事件，提交数据。这是个botton，并不是将整个表单的内容提交到数据库，而只把新闻的内容提交到B页面。
1.6　一段JavaScipt代码，用来完成相关的功能。
1.7　A页面源代码

<! 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 >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=GB2312"   />
< title > TEST </ title >
< script  language ="JavaScript"  type ="text/javascript" > ...
<!--


var xmlHttp = false;
try ...{
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) ...{
  try ...{
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) ...{
    xmlHttp = false;
  }
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') ...{
  xmlHttp = new XMLHttpRequest();
}



function ajaxChk()
...{

    var n_content = document.getElementById("n_content").value;
    var xmlDoc  = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.loadXML('<?xml version="1.0"?><root/>');
    var content = xmlDoc.createElement("content");
    content.text = n_content
    xmlDoc.documentElement.appendChild(content);

    alert(n_content);
    var url = "Mk_summary.asp"
    xmlHttp.open("POST", url, true);
    xmlHttp.onreadystatechange = updatePage;
    xmlHttp.send(xmlDoc);  

}


function updatePage()...{
    if(xmlHttp.readyState < 4 )...{
        SummaryResult.innerHTML = "正在生成.....";
    }
    if( xmlHttp.readyState == 4 )...{
        if(xmlHttp.status == 200 )...{
            try
            ...{
            var response = xmlHttp.responseText;
            }catch(exception)...{
                if (exception.description.indexOf("-1072896748")>0) 
                ...{ 
                    var response = "";
                }    
            }
            SummaryResult.innerHTML=response;            
        
        }else...{
            alert("对不起，出现错误：无法从服务器取得验证消费结果。");
        
        }
            
    }

}
 -->
</ script >


</ head >

< body >


< form  id ="form1"  name ="form1"  method ="post"  action ="" >
   < p >
     < textarea  name ="n_content"  cols ="40"  rows ="6"  id ="n_content" ></ textarea >
   </ p >
   < iframe  id ="eWebEditor1"  src ="editor/ewebeditor.htm?id=content1&amp;style=user"  frameborder ="0"  scrolling ="No"  width ="550"  height ="350" ></ iframe >
   < p >< br  />
   </ p >
   < p >
     < textarea  name ="n_summary"  cols ="50"  rows ="6"  id ="n_summary" ></ textarea >
     < span  id ="SummaryResult" ></ span >
     </ p >
   < p >
     < input  type ="button"  name ="send"  value ="生成摘要"  onclick ="JavaScript:ajaxChk();"   />
    （自动获取） < br  />
   </ p >
</ form >
</ body >
</ html >

2、B页面源代码

 

<% @LANGUAGE = " VBSCRIPT "  CODEPAGE = " 65001 " %>
<% '  Response.CodePage=65001%>
<% 
Response.ContentType="text/xml"
Response.Charset="UTF-8"
Dim xmlDom
dim content
dim fff,ggg
Set xmlDom = Server.CreateObject("Microsoft.XMLDOM")
xmlDom.async = True
xmlDom.load(Request)


If xmlDom.parseError.errorCode<>0 Then
    Response.Write("未知的错误！")
Else
    If xmlDom.readyState=4 Then
        Set content = xmlDom.documentElement.selectNodes("/root/content")
        For Each em In content
            Response.Write(content(i).text)
        Next
        
        Set fff = xmlDom.getElementsByTagName("content")
        Response.Write(fff.item(0).text)
        
        set ggg = xmlDom.documentElement.selectSingleNode("content")
        Response.Write(ggg.text)
         ' Response . Write(ggg . InnerText)
         ' Response.Write(xmlDom.xml)
        
        
        Response.Write("数据接收成功！")
    
    End If

End If
 %>

二、A页面提交数据
1、使用xmlHttp，这部分使用网络上标准的用法，所以只列出代码。

 

var  xmlHttp  =   false ;
try   ... {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}   catch  (e)  ... {
  try ...{
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) ...{
    xmlHttp = false;
  }
}
if  ( ! xmlHttp  &&   typeof  XMLHttpRequest  !=   ' undefined ' )  ... {
  xmlHttp = new XMLHttpRequest();
}

 

2、使用xmlHttp向B文件（我这里用的文件名是Mk_summary.asp）传送数据。
传送数据的方式有两种，分别是GET和POST，其中GET就是通过URL中的&abc=123这种方式传送数据，其最大限制为1024字节。所以这里必须采用POST方式传送。因为传送的是xml对象，所以这里又涉及xml的生成和解析等问题。所以在这一部分的任务就有三个：取得表单的内容，然后装入xml，使用xmlHttp发送。

下面是代码，在相应的注释里说明了功能。

 

function  ajaxChk()
... {
 var n_content = document.getElementById("n_content").value;
 //取得了表单n_content的内容。也可以用document.form1.n_content.value
 var xmlDoc  = new ActiveXObject("Microsoft.XMLDOM");
 //创建xml对象，注意这里是xml和xmlHttp是不一样的，xmlHttp是用来传送数据和消息的，xml是用来存放数据的。
 xmlDoc.loadXML('<?xml version="1.0"?><root/>');
 //刚才创建的xml对象是空的，不能使用；现在向里面装入一个最简单的xml文档，就可以使用了。
 var content = xmlDoc.createElement("content");
 content.text = n_content
 //上面这两行是创建一个Element，然后把内容放入这个Element。
 xmlDoc.documentElement.appendChild(content);
 //将前面创建的Element加入到xml里面。


 var url = "Mk_summary.asp"
 xmlHttp.open("POST", url, true);
 xmlHttp.onreadystatechange = updatePage;
 xmlHttp.send(xmlDoc);  
 //发送数据
}

三、B页面接收和处理数据。
1、设置好B页面的编码：
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
Response.ContentType="text/xml"
Response.Charset="UTF-8"

可以参考下面这篇文章。
http://blog.youkuaiyun.com/xpnew/archive/2007/02/04/1502053.aspx

2、创建XMLDOM对象以获取数据。
Set xmlDom = Server.CreateObject("Microsoft.XMLDOM")
xmlDom.async = True
xmlDom.load(Request)

3、取得数据，并且处理数据。
因为这里只是程序的框架和雏形，所以处理得很简单。

 

If  xmlDom.parseError.errorCode <> 0   Then
' 如果出现错误，那么就返回一个提示。
 Response.Write( " 未知的错误！ " )
Else
  If  xmlDom.readyState = 4   Then
   ' 当接收完毕开始处理
   Set  content  =  xmlDom.documentElement.selectNodes( " /root/content " )
   ' 第一种方式通过path获得一个数组，仅管在本例当中只有一个。
   For   Each  em In content
   Response.Write(content(i).text)
   Next
  
   Set  fff  =  xmlDom.getElementsByTagName( " content " )
   ' 第二种方式，通过标签名称获取。
  Response.Write(fff.item( 0 ).text)

   set  ggg  =  xmlDom.documentElement.selectSingleNode( " content " )
   ' 第三种方式，获取单个Node
  Response.Write(ggg.text)
 


   ' Response.Write(xmlDom.xml)
   ' 这一行被我注释掉了，也可以把所获得的xml全部返回给A页面。
  Response.Write( " 数据接收成功！ " )
 
  End   If

End   If

四、A页面处理xmlHttp返回结果。

 

function  updatePage() ... {
 if(xmlHttp.readyState < 4 )...{
  SummaryResult.innerHTML = "正在生成.....";
 }
 if( xmlHttp.readyState == 4 )...{
  if(xmlHttp.status == 200 )...{
   try
   ...{'这里尝试捕捉一个错误，编码方面的错误。
    var response = xmlHttp.responseText;
   }catch(exception){
    if (exception.description.indexOf("-1072896748")>0) 
    { 
     var response = "";
    } 
   }
   SummaryResult.innerHTML=response;   
  
  }else{
   alert("对不起，出现错误：无法从服务器取得验证消费结果。");
  
  }
 }
}

 

在调试过程当中出现的错误和处理。
1、最痛恨的录入错误！
接收文件B上定义的接收对象是xmlDom，到了后来打成了xmlDoc，其实Dom Doc都是常用的名称。所以检查数遍都没发现，偏偏还偷懒，没有开Option Explicit，瞎忙活了半个下午和半个上午，多半天时间痛苦煎熬中，活该！
2、处理xml的过程中，第一种方法，返回的content是个数组，如果这样使用Response.Write(content.text)就会出错。
第二种方法，也差不多。第三种方法，如果忽略了documentElement也是不行的。唉，因为好久没有搞xml这个地方，好多东西都忘记了，这回就算是复习一下吧。
3、编码的问题。B文件必须是utf-8编码，A文件最好也是utf-8编码。
4、在B文件中Response.BinaryWrite输出，这个输出，如果A文件采用var response = xmlHttp.responseText肯定会出错。

说明：
1、我作东西喜欢，先在几个简单的页面上把核心的功能测试通过之后再合并的完整的项目当中去。并且要先调试一部分最简单的，然后再逐步丰富程序的功能。
2、这篇文章也可以说是工作总结，所以其中涉及到的一些内容可能正是你感兴趣的，但是我却没有展开说，只能抱歉。
3、这里涉及到的一个问题，编码解码我在以前的博文中讨论过，这里不详细说明。
4、这里涉及到的一个问题，过滤HTML标签，是我以前搞过的关于正则表达式方面的问题，因为时间很长，所以现在不能详细介绍，只给列出相关代码。哪天再碰到正则式方面的问题，我再讨论。
5、这是公司正在进行中的若干项目中的一个，如果公司的工作任务变化，现在的这个项目暂停，有可能我无法将这个系列文章连续整理出来。
6、因为这只是前期的准备工作，所以A、B文件的页面结构、源代码什么的很不规范，只求速度。