一简单的Ajax例子[通俗易懂]

一简单的Ajax例子[通俗易懂]—ajax.html http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/1999/xhtml”lang=”en”dir=”ltr”>DevelopingWebApplicationwithAjax-Example//此函数将在电击”ViewXMLdata”链接

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

—ajax.html

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” dir=”ltr”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″/>
<title>Developing Web Application with Ajax – Example</title>

<script type=”text/javascript”>
<!–
//此函数将在电击”View XML data”链接的时候执行
function ajaxRead(file){

 //xmlObj,负责客户端和服务器中转
 var xmlObj=null;
 
 /*
   测试不同对象的可用性
  
   不同的浏览器执行XMLHttpRequest对象的时候不同,所以定义”xmlObj”作为XMLHttpRequest对象的时候,必须区别对待
   如果没有XMLHttpRequest可用,函数以return结束来取消错误报告
 */
 if(window.XMLHttpRequest){

  xmlObj=new XMLHttpRequest();
 }else if(window.ActiveXObject){

  xmlObj=new ActiveXObject(“Microsoft.XMLHTTP”);
 }else{

  return;
 }
 /*
   每当XMLHttpRequest状态改变时,onreadystatechange事件就触发
   此事件共有5个状态,从0到4
  
   [0]uninitialized未初始化(在XMLHttpRequest开始前)
   [1]loading(一旦初始化)
   [2]loaded(一旦XMLHttpRequest从服务器获得响应)
   [3]interactive(当对象连接到服务器)
   [4]complete(完成)
 */
 /*
   readyState()方法用来获得当前XMLHttpRequest的状态
  
   状态5[编号4]是用来确认数据是否可用的,如果”是”,则执行updateObj方法
   此方法有2个参数:ID,填充的数据
 */
 /*
  xmlObj.responseXML属性是一个DOM对象,对于XML文件来说,它有点像网页中的”document”对象
  通过getElementsByTagName可以获得XML文件中的任何节点
  
  xmlObj.responseXML.getElementsByTagName(‘data’)[0]是获得第1个名称为”data”的节点
  它返回XML节点,无数据的—得到节点里的数据必须通过访问此节点的属性
  
  firstChild.data
  (firstChild获得<data>节点之间的文本节点,而”data”属性则是文本节点的实际文本)
 */
 /*
   xmlObj.open(‘GET’,file,true);
   xmlObj.send(”);
   这是ajaxRead函数中的最后一块
  
   xmlObj的open方法打开一个通往服务器的连接(通过一个特殊的协议,这里指定为”GET”—也可以使用”POST”或其他)
   请求一个文件(在这里,file变量—data.xml,是当作参数发送给了ajaxRead函数)
   并且JavaScript可以操控这个请求是否为同步(false)或者异步(true,默认)
  
   这是异步JavaScript和XML,将可以使用默认的异步方法—当使用同步之后,这个程序将不能运行
  
   xmlObj.send(”);
   简单的发送了一个空字符串给服务器
   如果没有这一行,xmlObj的readystate的值将不能为4,使得页面将不能更新
   这个发送方法可以被用于其它东西,但是此程序仅仅从服务器得到数据,并没有发送数据给服务器,所以就到此为止
 */
 xmlObj.onreadystatechange=function(){

  if(xmlObj.readyState==4){

   updateObj(‘xmlObj’,xmlObj.responseXML.getElementsByTagName(‘data’)[0].firstChild.data);
  }
 }
 xmlObj.open(‘GET’,file,true);
 xmlObj.send(”);
}

/*
  此函数更新在当前页有新值的其他任何元素
  第1个参数,”obj”,是当前页中一个元素的id—这是被更新的对象
  第2个参数,”data”,指明了将要替换”obj”对象的一个新的字符串
  正常地,它是一个检查并且确认当前页有含有id值为”obj”的元素的很好的方法
 
*/
function updateObj(obj,data){

  //document.getElementById(obj).firstChild.data = data;
  document.getElementById(obj).innerHTML=data;
}
//–>
</script>
</head>

<body>
 <h1>Developing Web Application with Ajax</h1>
 <p id=”xmlObj”>
  <a href=”data.xml” title=”View the XML data.” οnclick=”ajaxRead(‘data.xml’);this.style.display=’none’;return false”>View XML data.</a>
 </p>
</body>
</html>

 

—data.xml

 

<?xml version=”1.0″ encoding=”utf-8″?>
<root>
    <data>
  This is some sample data… It is stored in an XML file and retrieved by JavaScript.
   </data>
</root>

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

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

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


相关推荐

  • Springboot Mybatis使用pageHelper实现分页查询[通俗易懂]

    Springboot Mybatis使用pageHelper实现分页查询[通俗易懂]以下介绍实战中数据库框架使用的是mybatis,对整合mybatis此处不做介绍。使用pageHelper实现分页查询其实非常简单,共两步:一、导入依赖;二、添加配置;三、应用;那么开始,第一步:pom.xml添加依赖:<!–分页插件pagehelper–><dependency><groupId>com…

    2022年6月2日
    44
  • Ubuntu 18.04安装fcitx输入法

    Ubuntu 18.04安装fcitx输入法1 卸载 IBUSsudoapt getpurgeibus 打开 ubuntu 软件中心 搜索 fcitx 把 3 个带企鹅图标的软件都安装上 3 根据你的需要安装输入法码表 我用的是五笔拼音 sudoapt getinstallfc table wbpy 其它输入法的名称如下 拼音 fcitx pinyin fcitx sunpinyin fcitx g

    2026年3月19日
    2
  • java logbook_SpringBoot使用Logbook记录HTTP请求响应日志

    java logbook_SpringBoot使用Logbook记录HTTP请求响应日志SpringBoot的httptrace端口能够记录每次访问的请求和响应信息,但是不能记录body,这样在出问题时就不方便排查,而且httptrace不方便在原有的基础上进行扩展,所以只能寻求其他方式进行记录。Logbook是一个可扩展的Java库,可以为不同的客户端和服务端技术提供完整的请求和响应日志记录。它能够满足一些特殊的需求:允许web应用记录程序接收或发送的所有HTTP通信易于保留和进…

    2025年8月13日
    6
  • 数据挖掘概念与技术_第三版_课后习题「建议收藏」

    数据挖掘概念与技术_第三版_课后习题「建议收藏」写在前面该文为数据挖掘概念与技术第三版课后习题的答案,部分参考了第二版的英文答案,由于个人水平有限,如若存在纰漏,请在评论区批评指正。另外,由于本次编辑格式较乱,可在资源下载区下载PDF版本以便参考。第一章引论什么是数据挖掘?在你的回答中,强调以下问题:1) 它是又一种噱头吗?2) 它是一种从数据库、统计学、机器学习和模式识别发展而来的技术的简单转换或应用吗?3) 我们提出了一种…

    2022年6月29日
    24
  • 华为交换机vlan配置教程

    华为交换机vlan配置教程Sys  \\进入系统视图Dhcpenable \\全局开启dhcp功能Vlanbacth234 \\批量创建vlan 234Intvlanif2 \\进入vlan 2Ipadd192.168.xxx.1 255.255.255.0 \\为vlan2分配IP地址及子网掩码Dhcpselectglobal\\dhcp选择全局开启Q \…

    2025年11月22日
    6
  • webgoat全关教程手册

    webgoat全关教程手册Webgoat amp Webwolfowasp 里面的两个服务搭建先要安装 jdk Webgoat 和 WebwolfWebgo 和 Webwolfjdk1 8 不支持了 需要安装 jdk11 去 git 上下载 Webgoat 和 Webwolfhttps github com WebGoat WebGoat releases tag v8 0 0 M26 去 oracle 官网下载 JDKhttps www oracle com java technologies javase jdk11 down

    2026年3月19日
    3

发表回复

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

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