Ajax/JS消息等问题总结

 

让新人做一个demo，发现有太多的问题，将这些问题总结一下（主要是页面、Ajax处理）：

1. JS事件的模式：

   问题：对于JS消息是如何处理的不清楚。

   说明：这个demo需要页面中的控件和BHO进行交互，有BHO处理页面中控件发出来的消息。新人一直以为控件的消息处理，要写在控件定义的地方：如<input type="button" onClick="">，好像只有这种写法是在处理消息。

   在http://www.iteye.com/topic/299320中有相关的说明；而且控件的消息是层层上传的（虽然IE和firefox在最后一层处理不同：如页面中的控件消息，在IE的浏览器中BHO可以接收到，而firefox接收不到）。

   在原始事件模型中，浏览器把事件分派给发生事件的文档元素。如果该那个对象具有适合的事件处理程序，就运行这个程序。除此之外，不用执行其他的操作。但是，在标准事件模型中，情况则要复杂很多。当事件发生在目标元素时，目标的事件处理程序会被触发。此外，目标的每个祖先节点也有机会处理那个事件。事件传播分三个阶段完成。一：在捕捉(capturing)阶段，事件从Document对象沿着文档向下传播给目标节点。在这期间，目标对象的任何祖先节点都可以捕捉的事件并处理它。二：目标节点本身，这和原始时间模型相似，最后一个阶段是起泡阶段：在这个阶段，事件将从目标元素向上传播回Document对象的文档层次。

2. 写控件事件响应的3种方式：

  问题：在页面中写事件响应，只会一种模式：

  说明：有3种模式：

        1. <input .... onClick=“” >

        2. document.getElementById("btn").onclick = function(){alert("mzwu.com");} -- 直接在这里定义函数体

        3.document.getElementById("btn").onclick = e; -- e是一个已经定义的JS函数；以上的2个问题，在这里已经有所说明

 

3.Ajax进行Post的方法：
   问题：只知道用Ajax发出一个URL请求，不知道post、get区别；

   说明：Ajax在Open一个链接时，如果把所有的参数都写在URL后面，这个是标准的get方式，如果传递的参数很多很长，可以传递的URL长度是有限制的（具体的限制由浏览器设定），而且项目中需要传递的数据是非常多的（局域网使用没有关系），因此只能通过post的方式进行传递参数。Ajax的post方式，是在send的时候作为send函数的参数进行发送的。而且需要设置一下Content-Type：

1xmlhttp.open("post",url,true);
2//以下两行解决中文参数问题
3xmlhttp.setrequestheader("cache-control","no-cache"); 
4xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
5//传递参数
6xmlhttp.send("name="+name);
   

 

4.Ajax返回值的处理：或者说Ajax有哪些属性：

   问题：如上

   说明：Ajax的response有3个属性可以接收到数据：

    responseStream：原始接收到的数据，是流数据，没有进行过转码，如果程序中接收数据乱码，可以从这里获取数据自己进行转码；

    responseTEXT：转码后的数据；

    responseXML：转换成Dom；

    在这里有属性的详细讲解：链接1，链接2，这2个链接中的内容加起来看比较齐全了

 

5.Ajax编码：
   Ajax是UTF-8编码的，传递参数的时候，前后台要进行匹配，否则容易乱码。

   返回数据处理：这里有说明如何设置response头进行处理返回数据。

   提交数据，需要使用escape进行编码；

 

6.Ajax发送请求，发现加号“+”都变成了空格：

   这个问题自己还是上网寻找解决方案才解决的。在这里找到解决方法：

   采用Ajax传递数据时，通常会将数据整理为data="var1=abc&var2=def"。而当数据中存在加号(+)或是连接符(&)时，服务器端接收数据时会有部分数据丢失现象。分析一下Ajax传递数据的格式与Javascript的语法不难发现：

1. “+”号：JavaScript解析为字符串连接符，所以服务器端接收数据时”+”会丢失。

2. “&”：JavaScript解析为变量连接符，所以服务器端接收数据时&符号以后的数据都会丢失。

解决办法也相当简单，只需要为+与&符号编码即可：function vchar(str) {

function vchar(str) {
str = str.replace(/\+/g, “%2B”);
str = str.replace(/\&/g, “%26″);
return str;
}

 

  所以最后往后台发送的Ajax post参数这样拼接的// 先escape编码，再用vchar替换加号和&号

var para = "docId=" + docId + "&docContent=" + vchar(escape(doccontent))

 

 7. 从responseXML中，获取不到数据：

    问题：数据返回responseXML中，通过responseXML.getElementsByTagName返回的list都是空的，没有数据，而看responseText中，内容是完好的xml数据。

   说明：在返回数据的后台，设置contentType为text/xml，问题解决

 

8.xml数据中，什么是CDATA不懂：
   这个是最基本的了，通过符号<![CDATA[    ]]>，可以包容xml特定的符号

 

9.IE和firefox之间的差别：

   对于IE和firefox中，差别很多了，看了一下几篇说明，有了一些了解：链接1, 链接2，以及以下几篇：1，2，3，4，5

 

10.还有一些基本的Http返回错误：

· 信息的 1xx 

· 成功的 2xx 

· 重定向 3xx 

· 客户端错误 4xx 

· 服务器错误 5xx

 

11. JS对JSon的处理：{ ’header’ : ’How to Handle the Ajax Response’, 来源：

’description’ : ’An in-depth explanation of how to handle the Ajax response.’, 
’sourceUrl’ : ’http://www.krishadlock.com/clients/informit/AjaxResponse/AjaxResponse.zip’} 


if(ajax.checkReadyState(’body’, ’loading...’, ’loading...’, ’loading...’) == "OK") 
{ 
　eval("var response = ("+ajax.request.responseText+")"); 
　document.getElementById(’body’).innerHTML = "<b>" + response.header + "</b><br/>" 
+ response.description + "<br/><br/>" 
+ "<a href=’" + response.sourceUrl + "’>Download the source files</a>"; 
}

　　JSON数据首先由JavaScript来分析（使用简单的eval()过程）。一旦数据被分析好了并建立了响应信息对象，我们就可以简单地通过名字来获取它们的响应信息值。 

 

或者通过response的JSOn对象直接