最简单的ajax例子

最简单的ajax例子自从JesseJamesGarrett创造了AJAX这个名词,到现在已经过去十八个月了,AJAX几乎让Web开发彻底改头换面。在这一年半的时间里,发生了很多事情,包括Web2.0的热炒,许多创建或使用富互联网技术公司的诞生或复苏,还有真正动态化的在线软件层出不穷。很明显,AJAX这个名词受到开发业界的广欢迎,已经真正的走入到我们生活中,Web应用程序也达到前所未有的发展。  如此火爆的

大家好,又见面了,我是你们的朋友全栈君。自从Jesse James Garrett创造了AJAX这个名词,到现在已经过去十八个月了,AJAX几乎让Web开发彻底改头换面。在这一年半的时间里,发生了很多事情,包括Web 2.0的热炒,许多创建或使用富互联网技术公司的诞生或复苏,还有真正动态化的在线软件层出不穷。很明显,AJAX这个名词受到开发业界的广欢迎,已经真正的走入到我们生活中,Web应用程序也达到前所未有的发展。

   如此火爆的技术难道我们还不去体验下吗?

   首先推荐大家两本中文版ajax书(相信不少人都有了),Ajax.基础教程和AJAX In Action, 因为文件比较大电子邮件无法发送。有需要的朋友可以加我QQ 373437(请注明javaeye) 我可以发给大家,我基本每天在线的。

   下面就开始我们第一次ajax 之旅吧

   下面介绍的是一个最简单的ajax完整例子, 为了让完全没有接触过ajax的朋友看懂,我写了非常详细的注释 请不要嫌我罗嗦:)

  simple.jsp 文件代码

<!–age contentType=”text/html; charset=GBK–>

<script type=”text/javascript”>

//定义一个变量,用来指向XMLHttpRequest对象
var xmlHttp;

//异步请求时调用的方法
function startRequest()
{

  //该方法用来产生一个XMLHttpRequest对象
  createXMLHttpRequest();
 
  /**将XMLHttpRequest的属性onreadystatechange存储了回调函数的指针
     如果XMLHttpRequest的readyState改变时就会调用回调函数,和C#里的委托是类似的
     这里将指针指向了handlestatechange方法**/
  xmlHttp.onreadystatechange=handlestatechange;
 
  /*打开对服务器的调用第一个参数用来指定是get还是post方法访问,第二个参数是要访问的路径*/
  xmlHttp.open(“GET”,”simple.xml”);
 
  //向服务器发送请求
  xmlHttp.send(null);
}

//改方法用来针对不同的浏览器产生一个XMLHttpRequest对象
function createXMLHttpRequest()
{

  //判断如果浏览器是IE
  if(window.ActiveXObject)
  {

    xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
  }
  //非IE的浏览器
  else if(windox.XMLHttpRequest)
  {

    xmlHttp = new XMLHttpRequest();
  }
}

//XMLHttpRequest的readyState改变时调用改方法
function handlestatechange()
{

  //readyState有5个值,4表示请求完成,其他是0=未初始化,1=正在加载,2=以加载,3=交互中
  if(xmlHttp.readyState==4)
  {

    //status 表示服务器请求状态 下面列出了一些基本状态
    if(xmlHttp.status==200)
    {alert(“请求成功”);
      alert(“server:++++++++++”+ xmlHttp.responseText);
    }
    if(xmlHttp.status==202)
    {alert(“请求被接收,但处理未完成”);
      alert(“server:++++++++++”+ xmlHttp.responseText);
    }
    if(xmlHttp.status==400)
    {alert(“错误的请求”);
      alert(“server:++++++++++”+ xmlHttp.responseText);
    }
    if(xmlHttp.status==404)
    {alert(“请求资源未找到”);
      alert(“server:++++++++++”+ xmlHttp.responseText);
    }
    if(xmlHttp.status==500)
    {alert(“内部服务器错误 代码问题”);
      alert(“server:++++++++++”+ xmlHttp.responseText);
    }

  }
}
</script>

<!–点击该按钮时调用异步请求–>
<input type=”button” οnclick=”startRequest();” value=”ajax”/ > 

<!– 下面是一些和ajax无关的静态代码 –>

 

<!– 下面是一些和ajax无关的静态代码 –>

 

注意看提交后页面是不是全部刷新

在目前的Web2.0热潮中,Ajax已成为人们谈论最多的技术术语!其实,AJAX(Asynchronous JavaScript and XML)是多种技术的综合,它使用XHTML和CSS标准化呈现,使用DOM实现动态显示和交互,使用XML和XSTL进行数据交换与处理,使用XMLHttpRequest对象进行异步数据读取,使用Javascript绑定和处理所有数据。更重要的是它打破了使用页面重载的惯例技术组合,可以说AJAX已成为Web开发的重要武器!

simple.xml代码
可以随便写点东西,这里就不帖了

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/158773.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月13日 下午10:46
下一篇 2022年7月13日 下午10:46


相关推荐

  • less与sass的区别

    less与sass的区别less 与 sass 的区别 sassSass 语法属于缩排语法 比 css 比多出好些功能 如变量 嵌套 运算 混入 Mixin 继承 颜色处理 函数等 更容易阅读 Sass 的缩排语法 对于写惯 css 前端的 web 开发者来说很不直观 也不能将 css 代码加入到 Sass 里面 因此 Sass 语法进行了改良 SCSS 是 CSS 语法的扩展 这意味着每一个有效的 CSS 也是一个有效的 SCSS 语句 与原来的语法兼容 只是用 取代了原来的缩进 lessLess 也是一种动态样式语言 对 CSS 赋予了动态语言的特性 如变

    2026年3月18日
    2
  • ora-01006:绑定变量不存在_ora-00001: 违反唯一约束条件

    ora-01006:绑定变量不存在_ora-00001: 违反唯一约束条件java.sql.SQLException:ORA-01008:并非所有变量都已绑定此异常为sql异常,我遇到的时候看java代码如下publicvoidsavegdzcysxx(Gdzcxxgdzcxx){  Stringsql=”insertintogdzcxx(id,zcmc,ggxh)values(SEQ_GDZC_ID.nextVAL,?,?)”;  Mys

    2025年9月27日
    4
  • 虚拟现实开发完整教程视频_新手入门虚拟现实技术

    虚拟现实开发完整教程视频_新手入门虚拟现实技术基于unity的HTCvive开发综合教程:http://www.52vr.com/hardware/vive/

    2025年11月9日
    5
  • 从零开始学习Java设计模式 | 软件设计原则篇:里氏代换原则

    从零开始学习Java设计模式 | 软件设计原则篇:里氏代换原则在本讲中 我来为大家介绍一下软件设计原则里面的第 2 个原则 即里氏代换原则 概述首先 大家应该知道 里氏代换原则是面向对象设计的基本原则之一 那什么是里氏代换原则呢 里氏代换原则是指任何基类可以出现的地方 子类一定可以出现 这句话不好理解 但大家可以通俗理解成子类可以扩展父类的功能 但不能改变父类原有的功能 现在 这句话就好理解很多了 指的就是在 Java 里面通常都会有父子类的关系 一般而言 我们都会将子类中的功能抽取到父类中 以提高代码的复用性 而在子类中 我们只需要去定义子类特有的功能即可 换句话说

    2026年3月19日
    2
  • C工作总结(一):Fleck的WebSocket使用

    C工作总结(一):Fleck的WebSocket使用一 引子 Foreword nbsp nbsp nbsp 最近公司里面要做窗体和网页交互的功能 网上找了一下资料 这里做一个简单的扩充和整理 部分内容可能是摘自其他博客 这里会注明出处和原文地址供大家和自己日后查阅 二 基础知识 Foundation 1 WebSocket 介绍 nbsp nbsp nbsp nbsp nbsp nbsp nbsp WebSocket 协议是基于 TCP 的一种新的网络协议 它实现了浏览器与服务器全双工 full duplex 通信 允许

    2026年3月19日
    2
  • pycharm的调试功能_安卓调试模式怎么打开

    pycharm的调试功能_安卓调试模式怎么打开Debug调试,是对于学习编程人员来说是一项重要的技能。只有当你学会debug了以后,才可以正确的知道程序的走向流程是如何的,DEBUG是排除程序故障的意思。debug则是通过工具来对代码进行调试,进而一步步找出程序中出现bug的位置,也就是程序中具体错误代码的位置。Pycharm中的debug模式首先,还是用示例说话,我们先写一段简短的代码,来帮助我们完成今天要讲的内容。初学者可能没见过for循环中的下划线‘_’,在Python中是占位符的意思,因…

    2022年8月28日
    7

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号