prototype ajax 应用
1.客户端
2.服务器端
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="/js/prototype.js"></script>
<script>
//--两次编码最为保险
function show1(div){
var data = Math.round(Math.random() * 10000);
var url='ajax.jsp?div='+div+'&ch_id=我是&帅哥！&date='+data;
var url=encodeURI(url);//一次编码处理
var myAjax = new Ajax.Updater('div1',url,{
method : 'get',
evalScripts : true
});
}
function show2(div){
var data = Math.round(Math.random() * 10000);
var url='ajax.jsp?div='+div+'&ch_id='+encodeURIComponent(encodeURIComponent('我是&帅哥！'))+'&date='+data;
// var url=encodeURI(encodeURI(url));
var myAjax = new Ajax.Updater('div2',url,{
method : 'get',
evalScripts : true
});
}
function show3(div){
var data = Math.round(Math.random() * 10000);
var url='ajax.jsp?div='+div+'&ch_id=我是帅哥！&date='+data;
var url=encodeURI(encodeURI(url));
var custAjax=new Ajax.Request(url,{
method:'post',
onSuccess:function(response){document.getElementById("div3").innerHTML=response.responseText;},
onFailure: function(){document.getElementById("div3").innerHTML="读取信息失败!";}
});
}
function show4(div){
var pars='div='+div+'&ch_id='+encodeURIComponent(encodeURIComponent('我是&帅哥！'))+'&date='+new Date().getTime();
var myAjax =new Ajax.Request("ajax.jsp",{
method:"get",
parameters:pars,
onComplete:function(response){//请求成功或失败时均调用
document.getElementById("div4").innerHTML=response.responseText
}
});//回调函数
}
function show5(div){
var myAjax =new Ajax.Request("ajax.jsp",{
method:"get",
parameters: {'div':div,'ch_id':encodeURI('我是&帅哥！')},//在Firefox中乱码
onComplete:function(response){document.getElementById("div5").innerHTML=response.responseText}
});//回调函数
}
</script>
</head>
<body>
<center>
<input type="submit" value="形式1" onclick="show1(1)"/>
<div id="div1"></div>
<hr width="100%" size="1" noshade style="border:1px dashed #cccccc;"/>
<input type="submit" value="形式2" onclick="show2(2)"/>
<div id="div2"></div>
<hr width="100%" size="1" noshade style="border:1px dashed #cccccc;"/>
<input type="submit" value="形式3" onclick="show3(3)"/>
<div id="div3"></div>
<hr width="100%" size="1" noshade style="border:1px dashed #cccccc;"/>
<input type="submit" value="形式4" onclick="show4(4)"/>
<div id="div4"></div>
<hr width="100%" size="1" noshade style="border:1px dashed #cccccc;"/>
<input type="submit" value="形式5" onclick="show5(5)"/>
<div id="div5"></div>
<hr width="100%" size="1" noshade style="border:1px dashed #cccccc;"/>
</center>
</body>
</html>
2.服务器端
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'ajax.jsp' starting page</title>
</head>
<body>
<%
response.setCharacterEncoding("UTF-8");
String ch_id="";
String div=request.getParameter("div");
if(div.equals("1")){
if(request.getParameter("ch_id")!=null){
ch_id=request.getParameter("ch_id");
//ch_id = java.net.URLDecoder.decode(ch_id,"UTF-8");//两次编码处理
ch_id =new String((ch_id.getBytes("ISO-8859-1")),"UTF-8");//一次编码处理
}
out.print(ch_id);
}
if(div.equals("2")){
if(request.getParameter("ch_id")!=null){
ch_id=request.getParameter("ch_id");
ch_id = java.net.URLDecoder.decode(ch_id,"UTF-8");
}
out.print(ch_id);
}
if(div.equals("3")){
if(request.getParameter("ch_id")!=null){
ch_id=request.getParameter("ch_id");
ch_id = java.net.URLDecoder.decode(ch_id,"UTF-8");
}
out.print(ch_id);
}
if(div.equals("4")){
if(request.getParameter("ch_id")!=null){
ch_id=request.getParameter("ch_id");
ch_id = java.net.URLDecoder.decode(ch_id,"UTF-8");
}
out.print(ch_id);
}
if(div.equals("5")){
if(request.getParameter("ch_id")!=null){
ch_id=request.getParameter("ch_id");
//ch_id = java.net.URLDecoder.decode(ch_id,"UTF-8");
ch_id =new String((ch_id.getBytes("ISO-8859-1")),"UTF-8");//这种也可以
}
out.print(ch_id);
}
%>
</body>
</html>