随笔-55  评论-208  文章-0  trackbacks-0
今天开始试用ajax最为项目的辅助,本来开始很顺利,测试的内容也比较简单
先在一个jsp中加入ajax的引擎
//ajax 引擎
    <script language="javascript">
    var http_request 
= false;
    var currentPos 
= null;
    function send_request(url) 
{//初始化、指定处理函数、发送请求的函数
        http_request = false;
        
//开始初始化XMLHttpRequest对象
        if(window.XMLHttpRequest) //Mozilla 浏览器
            http_request = new XMLHttpRequest();
            
if (http_request.overrideMimeType) {//设置MiME类别
                http_request.overrideMimeType('text/xml');
            }

        }

        
else if (window.ActiveXObject) // IE浏览器
            try {
                http_request 
= new ActiveXObject("Msxml2.XMLHTTP");
            }
 catch (e) {
                
try {
                    http_request 
= new ActiveXObject("Microsoft.XMLHTTP");
                }
 catch (e) {}
            }

        }

        
if (!http_request) // 异常,创建对象实例失败
            window.alert("不能创建XMLHttpRequest对象实例.");
            
return false;
        }

        
        http_request.onreadystatechange 
= processRequest;
        
// 确定发送请求的方式和URL以及是否同步执行下段代码
        
        http_request.open(
"POST", url, true);
        http_request.setRequestHeader(
"Content-Type","application/x-www-form-urlencoded");
            
        http_request.send(
null);
    }

    
// 处理返回信息的函数
    function processRequest() {
        
if (http_request.readyState == 4// 判断对象状态
             
            
if (http_request.status == 200// 信息已经成功返回,开始处理信息
                
                                
                document.getElementById(currentPos).innerHTML 
= http_request.responseText;
            }
 else //页面不正常
                alert("http_request.status exception code:"+http_request.status);
            }

        }

    }
</script>

然后在jsp中做个测试的select,和用于显示ajax的回传数据的区域
<table width="200" border="0" cellspacing="0" cellpadding="0">
    
<tr>
        
<td height="20"><select name="ajaxtest" size="1" onchange="showRoles('test1');">
        
<option selected="selected" value="test1" >test1</option>
        
<option value="test2" >test2</option>
        
<option value="test3" >test3</option>
        
<option value="test4" >test4</option>
        
</select></td>
    
</tr>
    
<tr style="display:none">
        
<td height="20" id="test1">&nbsp;</td>
    
</tr>
 </table>
再写一个js用了作为事件的触发
<script language="javascript">
        
    
//显示部门下的岗位
    function showRoles(obj) {
        document.getElementById(obj).parentNode.style.display 
= "";
        document.getElementById(obj).innerHTML 
= "loading"
        currentPos 
= obj;
        
        send_request(
"http://localhost/oa-web/app/test/sample2_2.jsp?playPos="+obj);
    }
</script>
 再另外写一个资源jsp,用于读取资源回来

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<% 
String playPos 
= request.getParameter("playPos");
if("test1".equals(playPos)) out.print("&nbsp;&nbsp;总经理皮总<br>&nbsp;&nbsp;副总经理老皮");
else if("test2".equals(playPos)) out.println("&nbsp;&nbsp;总工程师<br>&nbsp;&nbsp;软件工程师");
else if("test3".equals(playPos)) out.println("&nbsp;&nbsp;总工程师张青与<br>&nbsp;&nbsp;软件工程师味蕾");
else if("test4".equals(playPos)) out.println("&nbsp;&nbsp;总工程师张迟斌<br>&nbsp;&nbsp;软件工程师章鱼");
%>
两个jsp的编码都是utf-8的,但是在测试时发现回传回来的responseText都是乱码
去google上找,原来http_request 这个对象在request和response都是以gb2312进行的,需要更改编码
但是可恶的是javascript没有提供更改http_request 编码的方法于是在网上找了一个vbscript的函数
<SCRIPT LANGUAGE="vbScript"> 
 Function URLEncoding(vstrIn) 
 strReturn 
= "" 
 For i 
= 1 To Len(vstrIn)
 ThisChr 
= Mid(vStrIn,i,1)
 If Abs(Asc(ThisChr)) 
< &HFF Then
 strReturn 
= strReturn & ThisChr 
 Else 
 innerCode 
= Asc(ThisChr)
 If innerCode 
< 0 Then 
 innerCode 
= innerCode + &H10000
 End If 
 Hight8 
= (innerCode And &HFF00)\ &HFF 
 Low8 
= innerCode And &HFF 
 strReturn 
= strReturn & "%" & Hex(Hight8) & "%" & Hex(Low8)
 End If
 Next 
 URLEncoding 
= strReturn
 End Function 
</SCRIPT> 
然后对回传回来的http_request 进行一下编码更改
    // 处理返回信息的函数
    function processRequest() {
        
if (http_request.readyState == 4// 判断对象状态
             
            
if (http_request.status == 200// 信息已经成功返回,开始处理信息
                
                URLEncoding(http_request.responseBody);
                
                document.getElementById(currentPos).innerHTML 
= http_request.responseText;
            }
 else //页面不正常
                alert("http_request.status exception code:"+http_request.status);
            }

        }

    }
最终终于可以正常显示中文了
这两天和编码的纠缠有一个深刻的体会:做中国人难啊,要是计算机是中国人发明的多好:)
注:这种方法只在IE上试验过,别的浏览器还没有试
posted on 2006-04-13 20:14 rocket 阅读(1476) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: