论坛首页 → Web前端技术论坛 →

第一个ajax例子【ajax有哪几种啊，了解的指导哈】

浏览 4844 次
锁定老帖子 主题：第一个ajax例子【ajax有哪几种啊，了解的指导哈】
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • 一场雨
  • 等级: 初级会员
  • 性别:
  • 文章: 10
  • 积分: 20
  • 来自: 深圳
   发表时间：2008-04-29  
Ajax小例：登陆时验证用户是否存在，使用AJAX验证，无刷新
          如果登陆成功则跳转到一个分页列表页面，使用AJAX实现分页效果
         

Action内的代码：

//返回该登陆页面，并予以错误提示信息
response.setContentType("application/xml"); //application/xml代表的是XML形式返回
response.setHeader("Cache-Control", "no-cache"); //设置不缓存

//组织返回数据
String xml="<?xml version=\"1.0\" encoding=\"gb2312\"?>";
xml+="<message>";
xml+="<info>";
xml+="<teacher><name>name01</name><age>20</age></teacher>";
xml+="<teacher><name>name02</name><age>20</age></teacher>";
xml+="<teacher><name>name03</name><age>20</age></teacher>";
xml+="</info>";
xml+="<returnmessage>";
xml+="<returnCode>9999</returnCode>";
xml+="</returnmessage>";
xml+="</message>";

PrintWriter pw=null;
try {
//获取页面写入器
pw=response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
pw.write(xml);
pw.flush();
pw.close();
return null;



JSP里解析获取数据：

<body>
   <html:form action="/login.do?method=login" method="post">
     <html:text property="username"></html:text>
     <html:checkbox property="check" onclick="usernameCheck()">是否已经存在</html:checkbox>
     <html:text property="password"></html:text>
     <html:submit></html:submit>
     <html:reset></html:reset>
     <span id="checklogin"/>
   </html:form><br><br><br></body>
<script>
    var req; //定义全局变量
    function usernameCheck()
    {    
      var username=document.getElementById("username").value;
      var password=document.getElementById("password").value;
      var url="login.do?method=login&username="+username+"&password="+password;
     
      if(window.XMLHttpRequest)
      {
         req=new XMLHttpRequest();
      }
      else if(window.ActiveXObject)
      {
        req=new ActiveXObject("Microsoft.XMLHttp");
      }     
      if(req){
        req.open("get",url,true);
        req.onreadyStatechange=callback; //调用回调函数
        req.send(null);
      }
      return false;
    }
   
    function callback()
    {
       if(req.readyState==4)  //加载完毕
       {
          if(req.status==200)
          {
            parseMessage(); //解析数据
          }
          else
       {
         alert(req.status);
         alert('Not able to litrieve description');
       }
       }
       else
       {
         //正在加载
         document.getElementById("checklogin").innerHTML="正在加载........";
       }  
    }
   
    function parseMessage()
    {
  this.itemList = new Array();
      var xmlDoc=req.responseXML.documentElement; //接收XML格式的数据
      var messages=xmlDoc.getElementsByTagName("info");
      var mlength=messages.length; 
      alert(mlength);  
      if(mlength>0)
      {
           var teacher=messages[0].getElementsByTagName("teacher");
           for( var j=0;j<teacher.length;j++)
           {
             var name=teacher[j].getElementsByTagName("name")[0].firstChild.nodeValue;
             var age=teacher[j].getElementsByTagName("age")[0].firstChild.nodeValue;
             alert('No:0'+' name:'+name+'\nage:'+age);
             this.itemList.push(new Array(name,age));
           }
      }
         
      var returnmessage=xmlDoc.getElementsByTagName("returnmessage");
      var returnCode=returnmessage[0].getElementsByTagName("returnCode")[0].firstChild.nodeValue;
          
      alert(this.itemList.length);
      document.getElementById("checklogin").innerHTML=returnCode;
    }
  
  </script>


返回顶楼
         
  • hzl091
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 30
  • 来自: 北京
   发表时间：2008-04-29  
<html>
<head>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<link rel="stylesheet" href="http://weather.qq.com/7v/css/wz1.css" type="text/css">
</head>
<script>
var req = false;

var ajax = function(){
this.method   = 'GET';
this.url      = '';
this.postData = null;
this.callBack = null;

this.create = function(){
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
}
else if(window.ActiveXObject){
req = new ActiveXObject('Microsoft.XMLHttp');
}
}

this.sendReq = function(){
if(req){
req.open(this.method,this.url,true);
req.onreadystatechange = this.callBack;
if(this.method.toLowerCase() == 'post'){
req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
}
req.send(this.postData);
}
else{
alert('ajax对象创建失败!!');
}
}
}


function callBack(){
var d = document.getElementById('d1');
if(req.readyState == 4){
if(req.status == 200){
if(d){
d.innerHTML = '';
d.innerHTML = req.responseText;
}

}
}
else if(req.readyState < 4){
if(d){
d.innerHTML = '';
d.innerHTML = '正在加载数据，请稍等...';
}
}
}

var a = new ajax();

function page_load(){
var city = [];
city[city.length] = {city_name:'北京',url:'http://weather.news.qq.com/inc/07_dc125.htm'}
city[city.length] = {city_name:'长沙',url:'http://weather.news.qq.com/inc/07_dc218.htm'}
city[city.length] = {city_name:'武汉',url:'http://weather.news.qq.com/inc/07_dc211.htm'}
city[city.length] = {city_name:'哈尔滨',url:'http://weather.news.qq.com/inc/07_dc17.htm'}
city[city.length] = {city_name:'长春',url:'http://weather.news.qq.com/inc/07_dc103.htm'}
city[city.length] = {city_name:'广州',url:'http://weather.news.qq.com/inc/07_dc292.htm'}
city[city.length] = {city_name:'香港',url:'http://weather.news.qq.com/inc/07_dc1.htm'}

var se_city = document.getElementById('se');
if(se_city){
for(var i = 0 ; i < city.length ; i++){
se_city.options.add(new Option(city[i].city_name,city[i].url));
}
}


}


function se_change()
{
var se_city = document.getElementById('se');
var url = '';
if(se_city && se_city.options[se_city.selectedIndex].text != '请选择'){
    url = se_city.options[se_city.selectedIndex].value+'?id='+Math.random();

a.method = 'GET';
a.url = url;
a.callBack = callBack;
a.create();
a.sendReq();
}
}



</script>

<body onload = 'page_load();'>
</body>
<div id = 'div_city'>
请选择城市:
<select id = 'se' onchange = 'se_change();'>
<option>请选择</option>
</select>
</div>
<div id = 'd1'>

</div>
</html>

这是我写的一个例子
返回顶楼
          回帖地址
0 请登录后投票
  • hzl091
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 30
  • 来自: 北京
   发表时间：2008-04-29  
主要是QQ的天气预报
返回顶楼
          回帖地址
0 请登录后投票
  • 一场雨
  • 等级: 初级会员
  • 性别:
  • 文章: 10
  • 积分: 20
  • 来自: 深圳
   发表时间：2008-04-29  
不是很了解这上面  post 和  get的区别
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics