学习使用AJAX之前必须了解的知识

学习使用AJAX之前,有几样的东西是必须的:

1、HTML

2、DHTML,就是动态HTML,这里可能会常用到document.getElementById([id])方法,或者是使用 window.id.value=[value]等等,如果不熟悉,不及,看看下面的例子,如果还不能够理解,再把网上搜搜, 这方面的解释多得不能够再多了。

3、Javascript。这个就是非常的重要的,因为好多东西都需要通过这个去操作。

4、DOM。这个不是必须的,就算我们不知道这个东西,照样可以用JAVASCRIT做很多的东西了。

5、数据库操作及SQL知识。现在应用程序好多都是与数据库打交道,常见的用户名信息等等,都是放在数 据库中的。

下面进行正题吧,这个实例非常的简单,采用JSP实现用户输入的用户是否存在于数据库中,并且给以相应 的提示,所谓“麻雀虽小,五脏俱全”,其它的发挥就是在这个方向上发挥开发。

总共有三个文件,有两个JSP面,一个用于前台显示,一个用于确定用户是否存在;另外一个JAVA页面,用 于做数据库连接。

注:请注意其中注释,那是非常的有助于你理解

前台显示:index.jsp

<html>
<head>
<title></title>
<script language="javascript" >
var httpRequest;
/**
下面这个函数可以返回一个适合任何浏览器 的httpRequest,步子如下:
1.试着创建一个XMLHttpRequest()示例,该示例可适合于除了微软以外的所 有浏览器
2.增加错误判断,如果当前浏览器是微软的,那么就创建适用于微软的浏览器
3.但微软的浏 览器又有两个版本之分,不过据说微软已经在7.0中增加对XMLHttpRequest()的支持
4.但这样也需要对原 来的浏览器支持,否则你写出来的程序那些用老版本浏览器的用户就是看不
到效果的。
*/
function createRequest()
{
  try{
    request=new XMLHttpRequest();
  }catch(trymicrosoft)
  {
    try{
      request=new ActiveXObject ("Msxml2.XMLHTTP");
    }catch(othermicrosoft)
    {
      try{
         request=new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (failed)
      {
        request=false;
      }
    }
   }
  if(!request)
  {
    alert("err Happend!");
    return null;
   }    
  return request;
}
/**
这个函数就是用户的动作所有触发的函数,如下面的 onblur()时,就会调用该函数
经过的步骤如下:
1.从HTML页面得到你需要的数据,可以采有 document.getElementById("")方法。
2.建立需要的URL,该URL就和在FORM里面的method为get时并采用 submit提交在地址栏
里面到的一样
3.打开与服务器的连接,这里面有三个必要的参数,虽然文档规定 只有两个,但是我个
人觉得最好用三个,
第一个可以是GET,POST或者是POST,但常用的就是前面的两 个,并且最好都用大写,因
为有些浏览器如FireFox可能会报错,
第二个就是打报的URL,这肯定你是 必须的。
第三个就是下面的看到的true,这里可以是false。true表示同步处理,你提交后可以做
其 它的事情,这就是AJAX里面的A,即asynchronous;如是false,那就得等到服务器的返
回才能够做其它的 事情。
4.等到服务器完成,并且确定返回执行了正确执行的提示,我们就可以做下面我们想做的
事情 。这些后面的事情就必须通过Javascript去完成了,因为XMLHttpRequest的唯一用途
就是发送请求及接收 服务器的响应结果。
5.上面都完成了后,就可以采用send()方法向服务器发送你需要发送的信息了,它的 参数
可以是任何类型,发送的数据格式必须为这样的格式:
name=value&anothername=othervalue&so=on,如果你想传送数据,你必须更改MIME类型:
httpRequest.setRequestHeader('Content-type','application/x-www-form-urnlencoded');
否则服 务器将会丢弃发送的数据。
*/
function getBackInfo()
{
  var username=document.getElementById("username").value;
  var url='checkUser.jsp? username='+username;
  request.open("GET",url,"true");
  //下面相当于是一个隐性的循环 ,在函数中规定只有都接收完毕数据后才做处理
  //onreadystatechange有5个值:
  // 0:未初 始化
  // 1:初始化
  // 2:发送数据
  // 3:接收数据中
  // 4:数据接收完毕
  //另外还要注意就是在注册回调函数onreadystatechange时,后面的函数不能够带参数
  //如下 disResult是一个函数,不能够带参。
  reqeust.onreadystatechange=disResult;//隐性的循环
   request.send(null);
}
function disResult()
{
/**
1.一定要确定readystate==4的完 成状态才做下面的事,否则会在建立连接即readystate==1的
时候就开始,然后会在readystate==2, readystate==3,readystate==4的时候都会执行,不信
你可以alert("")一个提示信息试试。
2.服务 器通知完成了,并且还要保证是正确完成的,得到的是我们需要的结果才能够继续,这里
常用响应码有:
200:成功执行
401:未授权
403:禁止
404:没有找到文件
*/
  if (request.readystate==4)
  {
    if(request.status==200)
    {
       //一切都OK了,那就该用Javascript去执行你想要的动作了。
      document.getElementById ("disCheckResult").value=request.responseText;
      alert('done');
    }
     else
    {
      alert('Something Wrong has Happend!');
    }
   }
}
</script>
</head>
<body>
 <form>
   <table>
    <tr>
      <td>
        <input type=text id="username" onblur="getBackInfo();">
      </td>
       <td>
        <dd id="disCheckResult">这里用于在执行后显示结果的地方 </dd>
      </td>
    </tr>
  </table>
  </form>
</body>
</html>

时间: 2024-12-23 12:16:23

学习使用AJAX之前必须了解的知识的相关文章

嘿嘿。今天学习了AJAX的几个方法

原文:嘿嘿.今天学习了AJAX的几个方法                    今天学习了AJAX的几个方法,其实我很早在公司实习的时间就认识了它,但是对它一无所知,也并没有去学习它,今天学习它让我感到很兴奋因为重新了解了它,嘿嘿,下面就来总结一下今天学习的吧.           一.在javascript中写AJAX <script> window.onload = function () { document.getElementById("txtName").onb

JavaScript学习历程和心得小结_基础知识

一.前言 在过去,JavaScript只是被用来做一些简单的网页效果,比如表单验证.浮动广告等,所以那时候JavaScript并没有受到重视.自从AJAX开始流行后,人们发现利用JavaScript可以给用户带来更好的体验,甚至利用这一优点开发了大型网页游戏,于是这门小语言被重视了起来.现在,很多公司会招专门的JavaScript工程师,通常JavaScript是WEB前端开发的必备技能.简单介绍了JavaScriptr的好处,并不代表大家就会去学习甚至把它学好,兴趣是很关键的,我认为兴趣是最好

学习Java中需要注意那些重点知识?

问题描述 我是长沙清华it的一名学员,今年才开始接触Java方面的知识,我想问一下,学习Java需要怎么样去学,才学的更好.谢谢各位大师人物· 解决方案 解决方案二:语法完了...面向对象掌握好...集合IO...一直下去多看多敲...不要眼高手低就好解决方案三:重点结合hibernate理解面向对象的思想,结合struts理解MVC既web开发,结合spring理解ioc解决方案四:其实学习这门语言还是收获到很多的启示的学习永远没有旁观者别人会的,我们也会.谢谢大家的建议和意见.解决方案五:推

Mootools1:Mootools1.2学习笔记のAjax

最近在学习和利用mootools,关于mootools的Ajax异步请求方法,记录一下,方便以后查看:方法一:<html><input id="loadJson" type="button" value="loadJson"/></html><script>$('loadJson').addEvent('click', function(e){e.stop();var request = new R

学习SEO技术不能钻牛角尖 学好基础知识才是关键

现在很多站长在学习SEO技术时,总会走入一个误区,那就是贪多,想要了解到搜索引擎的各种知识,认为,只有搞懂搞清楚搜索引擎算法原理后,才能够很好的学些SEO优化,其实这种想法主要来自于我们传统的教育方式,那就是填鸭式教育,理论知识讲的不遗余力,可是一旦走入社会,发现所谓的理论知识完全不能够指导自己的工作,从而让很多学生,毕业就意味着失业,所以学些SEO优化技术,就不能够再走那些老路了!其实搞好基础实践才是关键之处,下面笔者就来分享一下我的学习SEO优化之路! 一:搞好基础知识,基本了解SEO优化是

extjs 学习笔记(一) 一些基础知识_extjs

我在项目中已经频繁使用了jquery,这次主要是学习使用extjs,但现有的教程基本都是针对2.0的,而且后台用到的语言也很少是.net平台下的C#,所以我打算针对3.0版,后台使用C#,记录下自己的学习过程,希望能和志同道合的朋友一起探讨,共同进步. extjs的官方网站是http://www.extjs.com,目前最高版本是3.0.2,但是只有3.0.0的才没有任何下载限制,可以点击这里下载3.0版的.下载来的压缩包里边包含压缩后的extjs库,调试时用到的库,具有可读性的源代码,文档和例

《认知设计:提升学习体验的艺术》——技能 vs 知识

技能 vs 知识技能与知识在本质上是有区别的.确认学习者的差距是在技能层面还是知识层面,你只需问一个问题: 不通过任何训练就能成为专家吗?如果答案是肯定的,那么学习者的差距与技能就毫不相关:但如果这答案是否定的,那么你就知道要解决的应该是技能问题,学习者需要通过不断的练习以达到熟练的程度.这里有一个小游戏,可以帮助你判断属于技能还是非技能:动作 属于技能吗? 说真的,我不觉得保存一份Word文档.填写时间表或制作奶酪通心粉是技能(虽然你也许能够说服我最后一个是),但我相信上述的其他内容都需要通过

《CCNP SWITCH 300-115学习指南》——第1章 基础知识回顾

第1章 基础知识回顾CCNP SWITCH 300-115学习指南在正式进入CCNP SWITCH这门针对园区网交换技术的课程之前,我们首先快速地回顾一遍CCNA中的相关知识点并简要地介绍其中部分技术,以便于本书内容的理解.由于这里提到的所有技术都是独立存在的,如生成树或虚拟LAN(VLAN),因此本章将这些基础知识汇总到一起进行复习,并且在后续章节中将不再重复类似的基础讲解. 如果读者十分了解交换术语,并对交换技术有着基本的认识,建议跳过此章,直接从第2章开始阅读. 本章涵盖如下CCNA基础交

Atlas学习手记(Ajax.net)

UpdatePanel是Atlas中一个很重要的控件,功能强大且容易使用,可以使我们只做很小的改动就可以向已有的ASP.NET站点添加Ajax.采用Dflying的建议,我也是由UpdatePanel进入Atlas的世界.本文将通过可视化和代码两种方式来实现向已有的ASP.NET应用程序中添加UpdatePanel. 主要内容 1.UpdatePanel概述 2.使用可视化方式 3.使用代码方式   一.UpdatePanel概述 UpdatePanel是Atlas中一个很重要的控件,功能强大且