当前位置:编程学习 > JSP >>

我问一下,如何在JSP页面中实现点击某一超链接,然后在制定的div分区里面显示出来,用ajax实现

ajax的分区加载功能,尽量把javascript函数写详细一点吧,非常感谢
追问:能ajax写出来不?那个jquery我完全不花呀,没有学过
答案:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
<html>   
  <head>   
    <title>最原始的ajax写法</title>   
        
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
    <meta http-equiv="description" content="this is my page">   
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
        
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->   
    <script type="text/javascript">   
        
     //这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互    
     var xmlHttpRequest;    
   
     //用户名校验的方法    
     function verify() {    
         var success = createXMLHTTPRequest();    
         if (!success) {    
             return;    
         }    
         var userName = document.getElementById("userName").value;//获取用户名字    
         //2.注册回调函数    
         //注册回调函数时,之需要函数名,不要加括号    
         //我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的    
        xmlHttpRequest.onreadystatechange = callback;    
   
         //3。设置连接信息    
         //第一个参数表示http的请求方式,支持所有http的请求方式,主要使用get和post    
         //第二个参数表示请求的url地址,get方式请求的参数也在url中    
         //第三个参数表示采用异步还是同步方式交互,true表示异步    
         //记住在url后面加上时间戳    
         //xmlHttpRequest.open("GET", "OriginalityAjaxAction?username=" + userName, true);    
   
         //POST方式请求的代码    
         xmlHttpRequest.open("POST", "OriginalityAjaxAction", true);    
         //POST方式需要自己设置http的请求头    
         xmlHttpRequest.setRequestHeader("Content-Type",    
                 "application/x-www-form-urlencoded");    
         //POST方式发送数据    
         xmlHttpRequest.send("username=" + userName);    
   
         //4.发送数据,开始和服务器端进行交互    
         //同步方式下,send这句话会在服务器段数据回来后才执行完    
         //异步方式下,send这句话会立即完成执行    
         //xmlHttpRequest.send(null);    
   
     }    
   
     //回调函数    
     function callback() {    
         //alert(xmlHttpRequest.readyState);    
         //5。接收响应数据    
         //判断对象的状态是交互完成    
         if (xmlHttpRequest.readyState == 4) {    
             //判断http的交互是否成功    
             if (xmlHttpRequest.status == 200) {    
                 //获取服务器器端返回的数据    
                 //获取服务器段输出的纯文本数据    
                 var responseText = xmlHttpRequest.responseText;    
                 //将数据显示在页面上    
                 //通过dom的方式找到div标签所对应的元素节点    
                 var divNode = document.getElementById("result");    
                 //设置元素节点中的html内容    
                divNode.innerHTML = responseText;    
             } else {    
                 alert("出错了!!!");    
             }    
         }    
     }    
   
     //创建XMLHTTPRequest对象来进行AJAX的异步数据交互    
     function createXMLHTTPRequest() {    
         //1.创建XMLHttpRequest对象    
         //这是XMLHttpReuquest对象无部使用中最复杂的一步    
         //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码    
   
         if (window.XMLHttpRequest) {    
             //针对FireFox,Mozillar,Opera,Safari,IE7,IE8    
            xmlHttpRequest = new XMLHttpRequest();    
             //针对某些特定版本的mozillar浏览器的BUG进行修正    
             if (xmlHttpRequest.overrideMimeType) {    
                 xmlHttpRequest.overrideMimeType("text/xml");    
             }    
         } else if (window.ActiveXObject) {    
             //针对IE6,IE5.5,IE5    
             //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中    
             //排在前面的版本较新    
             var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];    
             for ( var i = 0; i < activexName.length; i++) {    
                 try {    
                     //取出一个控件名进行创建,如果创建成功就终止循环    
                     //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建    
                    xmlHttpRequest = new ActiveXObject(activexName[i]);    
                     break;    
                 } catch (e) {    
                 }    
             }    
         }    
         //确认XMLHTtpRequest对象是否创建成功    
         if (!xmlHttpRequest) {    
             alert("XMLHttpRequest对象创建失败!!");    
             return false;    
         } else {    
             //0 - 本地响应成功    
             //alert(xmlhttp.readyState);    
             return true;    
         }    
     }    
</script>   
  </head>   
      
  <body>   
         请输入要验证的用户名字(输入admin试试):<br/>   
        <input type="text" id="username"/><input type="button" value="校验" onclick="verify()"/>   
        <div id="result"></div>   
  </body>   
</html>
其他:你可以用jquery来写。
function aa(){
        $.ajax({
            type: "post",
            dataType: "json",
            url: "",                        //这里填执行的地址
            data: "",                     //这里填要传的参数
            success: function (data) {                   //data是返回的对象
                  $("#result").html(data);                 //给div设置一个id=result
            }
        });
    } 

我是从“上海全鼎软件学院”毕业的————————

上一个:jquery 中用jsp 读取 modelmap
下一个:有人知道有JSP技术做的的自助建站系统吗?好像都是php和asp的,想看看效果

CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,