`
一场雨
  • 浏览: 48760 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

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

    博客分类：
  • ajax
AjaxQQXMLMicrosoftCache 
阅读更多
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>


分享到：
| jsp:forward参数传递
评论
3 楼 一场雨 2008-04-29  
不是很了解这上面  post 和  get的区别
2 楼 hzl091 2008-04-29  
主要是QQ的天气预报
1 楼 hzl091 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>

这是我写的一个例子
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery,ajax的几个小例子

    这可以通过监听第一个下拉框的change事件，然后发送Ajax请求获取新的选项数据，最后更新第二个下拉框。自动补全功能常用于输入框，当用户输入时，后台会返回匹配的建议列表。这通常结合keyup事件和$.ajax()实现，...

    一个非常简单的ajax例子

    第一个可能是用来设置和发送Ajax请求的，而第二个可能用于处理服务器返回的数据。通常，发送Ajax请求的过程包括以下几步： 1. **初始化XMLHttpRequest对象**：`var xhr = new XMLHttpRequest();` 2. **配置请求**...

    C# 写的一个 Ajax的例子

    【标题】"C# 写的一个 Ajax的例子"揭示了这个项目是使用C#编程语言实现的一个基于Ajax技术的示例。Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术，提高了用户...

    ajax tab页 滑动门小例子

    例如，初次加载时，第一个Tab应该显示其内容，其他Tab的内容应被隐藏。 通过以上步骤，你可以创建一个具有Ajax加载和滑动门效果的Tab页。这个小例子可以帮助你理解如何结合Ajax、JavaScript库和前端设计技巧来提升...

    很实用的ajax例子

    这个"很实用的Ajax例子"应该包含了一些基础到进阶的Ajax应用示例，非常适合初学者学习和理解Ajax的工作原理。 Ajax的核心是通过JavaScript与服务器进行异步通信，它允许网页在后台与服务器交换数据并局部更新页面，...

    最简单的Ajax例子

    在最简单的Ajax例子中，通常会涉及以下几个关键组成部分： 1. **创建XMLHttpRequest对象**：这是Ajax的核心，它负责与服务器进行通信。在JavaScript中，几乎所有的浏览器都内置了XMLHttpRequest对象。如果需要跨域...

    简单Ajax实例AjaxSample

    在Ajax的核心概念中，有以下几个关键组成部分： 1. **XMLHttpRequest对象**：这是Ajax的基础，它允许JavaScript在后台与服务器进行通信。在“AjaxSample”中，创建XMLHttpRequest对象是第一步，用于发送请求和接收...

    学ajax自己动手写的四个实例

    第一个实例可能是"发送GET请求"。在这个例子中，用户可能会触发一个按钮点击事件，JavaScript将利用XMLHttpRequest创建一个HTTP GET请求到服务器，获取数据。服务器处理请求后，返回的数据会被XMLHttpRequest的...

    ajax实现无刷新的小例子

    当用户在浏览器中访问第一个 JSP 页面并点击按钮时，会触发 Ajax 请求，Web 容器会处理这个请求，并将结果返回给客户端，然后 JavaScript 会更新 DOM，将服务器返回的数据展示在页面上。 这个简单的示例展示了如何...

    ajax异步提交源代码

    第一个示例是“普通的异步提交给servlet”。在这个例子中，开发者通常会编写JavaScript函数，利用XMLHttpRequest对象与后台Servlet进行交互。JavaScript函数会捕获用户触发的事件（如按钮点击），然后发送请求到...

    纯Ajax的例子，便于理解

    Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它的核心在于JavaScript的XMLHttpRequest对象，它允许浏览器在后台与服务器进行数据交换，从而实现页面的...

    jquery+ajax的视频讲解

    除了`$.ajax()`，jQuery还提供了其他几个便捷的AJAX方法，如`$.get()`、`$.post()`、`$.getJSON()`等。这些方法简化了常见的AJAX请求场景，例如： - `$.get(url, data, success, dataType)`: 发起GET请求，获取...

    AJAX开发简略PPT和相关AJAX开发例子代码下载.

    2. **创建XMLHttpRequest对象**：在JavaScript中，创建XMLHttpRequest对象是AJAX的第一步。所有现代浏览器都内置了这个对象，可以通过`new XMLHttpRequest()`来实例化。 3. **HTTP请求**：XMLHttpRequest对象提供了...

    ASP jQuery AJAX无刷新评论留言实例(好几个)

    ASP.NET是一种广泛使用的Web开发框架，它允许开发者创建动态、交互性强的网页应用程序。在这个实例中，我们将探讨如何使用jQuery和AJAX技术在ASP.NET环境中实现无刷新的评论留言功能。 **jQuery** 是一个轻量级的...

    级联下拉列表例子（ajax和jquery）&prototype1;.7&jquery;_jar

    在级联下拉列表中，AJAX用于在后台获取新数据，这些数据通常是基于用户在第一个下拉列表中的选择。 jQuery是一个轻量级的JavaScript库，简化了JavaScript的DOM操作、事件处理、动画以及Ajax交互。它使得编写...

    AjaxJquery入门

    1. **ajaxStart()**: 当第一个Ajax请求开始时触发。 2. **ajaxSend()**: 在每个Ajax请求发送前触发。 3. **ajaxSuccess()**: 请求成功后触发。 4. **ajaxError()**: 请求出错时触发。 5. **ajaxComplete()**: 不论...

    手写AJAX代码，实现Goog的搜效果

    AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这个技术在现代Web开发中扮演着至关重要的角色，它允许网页与服务器进行异步通信，提升了用户体验。通过...

    征服ASPNET2Ajax典型应用

    在"征服ASPNET2Ajax典型应用"中，你可能遇到以下几种典型应用场景： 1. 登录验证：使用Ajax进行登录验证，可以在用户输入用户名和密码后立即检查其有效性，无需提交整个表单。这通常通过一个Button控件和一个...

    AJAX教程实例,ASP+AJAX+ACCESS数据库应用教程(附源码).pdf

    AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下更新部分网页内容的技术，大大提升了用户体验。在这个实例中，我们将看到如何结合ASP（Active Server Pages）和ACCESS数据库实现AJAX...

    很不错得ajax课件

    在选择框中展示相关的下拉列表，可以根据用户在第一个选择框中所做的选择来动态加载第二个选择框中的选项。这种按需获取数据的方式提高了用户体验，并减少了不必要的数据传输。 #### 例子3：读取外部数据 通过AJAX...

Magicbox
Global site tag (gtag.js) - Google Analytics