ajax 简单 例子，共三步。
例子涉及到本地的数据库，故不能在你本地正常运行，但思路是对的
第一步：（通用） 把下面的代码写入一个ajax.js文件中，send_request()方法有5个参数，
1，提交的方法；
2，url，也可以通过它传递参数；
3，只是参数；
4，返回类型，text或xml；
5，回调函数的方法名称。
var http_request = false;
//send
function send_request(method,url,content,responseType,callback){
http_request = false;
if(window.XMLHttpRequest){
http_request = new XMLHttpRequest();
if(http_request.overrideMimeType){
http_request.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
try{
http_request = new ActiveXObject("Msxm12.XMLHTTP");
}catch (e){
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
}
}
}
if(!http_request){
window.alert("E XMLHttpReqeust");
return false;
}
if(responseType.toLowerCase() == "text"){
//http_request.onreadystatechange = processTextResponse;
http_request.onreadystatechange = callback;
}else if(resposeType.toLowerCase() == "xml"){
//http_request.onreadystatechange == processTextResponse;
http_request.onreadystatechange = callback;
}else{
window.alert("E1");
return false;
}
if(method.toLowerCase() == "get"){
http_request.open("GET",url,true);
}else if(method.toLowerCase() == "post"){
http_request.open("POST",url,true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}else{
window.alert("E2");
}
http_request.send(content);
}
//Text
function processTextResponse(){
if(http_request.readyState == 4){
if(http_request.status == 200){
document.form1.rs.value = http_request.responseText;
}else{
alert("E3");
}
}
}
//XMl
function processXMLRequest(){
if(http_request.readyState == 4){
if(http_request.status == 200){
document.form1.rs.value = http_request.responseText;
}else{
alert("E4");
}
}
}
第二步：把此脚本放入页面（通用）
<script language="javascript">
//取组下的3个clip
function update(type,id) {
var f = document.p;
if("clip" == type){
one.innerHTML = " 正在处理请求的内容 <img src='/images/icon/loading.gif'></img>";
send_request("GET","/common2/query.jsp?groupbyclip_id="+id,null,"text",processTextResponse_one);
}
var f = document.p;
if("cpid" == type){
one.innerHTML = " 正在处理请求的内容 <img src='/images/icon/loading.gif'></img>";
send_request("GET","/common2/query.jsp?cp_id="+id,null,"text",processTextResponse_one);
}
}
</script>
第三步：创建jsp处理页面，接受参数，处理，out.print()输出就可以了，回调函数会接收到打印出的内容（根据业务需求作相应的修改<%
//根据省id获取城市列表
if(request.getParameter("province_id") != null &&request.getParameter("province_id") != "-1"){
ArrayList provinceList = new ArrayList();
try{
provinceList = Factory.db_city.queryByProvinceId(Integer.parseInt(request.getParameter("province_id")));
}catch(Exception e){
out.print("根据省查找city出错");
}
if(provinceList != null){
out.println("<select name='city' id='city' onchange=\"update('city')\">");
out.println("<option value='-1'>请选择城市</option>");
for(int i=0;i<provinceList.size();i++){
CityBean cityBean = (CityBean)provinceList.get(i);
out.println("<option value="+cityBean.getCity_id()+">"+cityBean.getCity()+"</option>");
}
out.print("</select>");
}
}
//根据city_id查询区县
if(request.getParameter("city_id") != null &&request.getParameter("city_id") != "-1"){
ArrayList districtList = new ArrayList();
try{
districtList = Factory.db_district.queryByCityId(Integer.parseInt(request.getParameter("city_id")));
}catch(Exception e){
out.print("根据省查找district出错");
}
if(districtList != null){
out.println("<select name='district' id='district'>");
out.println("<option value='-1'>请选择区县</option>");
for(int i=0;i<districtList.size();i++){
DistrictBean districtBean = (DistrictBean)districtList.get(i);
out.println("<option value="+districtBean.getDistrict_id()+">"+districtBean.getDistrict()+"</option>");
}
out.print("</select>");
}
}
%>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。