一简单的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>

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 程序员有哪些强迫症?听知乎网友为你现身说法[通俗易懂]

    程序员有哪些强迫症?听知乎网友为你现身说法

  • android Kotlin int类型和Long类型转换

    android Kotlin int类型和Long类型转换在Kotlin开发中,即使Long类型较大,int类型的数值也不会自动转换为long类型。这与Java处理数字转换的方式不同。例如;在Java中intnumber1=102;longnumber2=number1;//有效代码这里,number1类型的int值自动转换为类型long,并分配给变量number2。在Kotlin,valnumber1:Int=10…

  • DirectX修复工具使用技巧之三——命令行与配置文件参数介绍

    DirectX修复工具使用技巧之三——命令行与配置文件参数介绍最后更新:2021-10-8DirectX修复工具自V1.0版起即支持通过settings.ini配置文件的方式设置程序配置信息,自V3.7版起支持命令行配置功能。由于命令行与配置文件均需要通过参数设定程序配置信息,本文档详细列出了命令行与配置文件的参数使用方式,供有需要的高级用户参考。命令行与配置文件中约有90%的命令是通用的,部分特殊命令只支持命令行的配置方式,本文件将分别介绍命令行参数与配置文件参数。命令行参数本程序支持命令行参数提示,用户可通过/?或者/h…

  • noip2012质因数分解_90分解质因数是多少

    noip2012质因数分解_90分解质因数是多少已知正整数n是两个不同的质数的乘积,试求出两者中较大的那个质数。输入格式一个正整数n。输出格式一个正整数p,即较大的那个质数。n≤2×10的9次方这道题可以暴力枚举,但时间复杂度是O(2n),但我们可以用O(n),的时间复杂的做出来,代码如下:`#include#include<iostream>usingnamespacestd;intmain(…

  • 什么是pisa测试_什么是pisa考试?

    什么是pisa测试_什么是pisa考试?导读:众所周知,对于前期所做的一切努力,如果最终没有一个评价的标准,或者说差异化评估,那么如何证明前期从事的一切是有效的,因此在学生的学习方面,我们也需要比较合适的评估方式。今天推荐的一个国际化标准测评体系,叫做“PISA”,主要针对接近完成基础教育的15岁学生进行评估。PISA(ProgramforInternationalStudentAssessment)(国际学生评估项目的缩写)是…

  • PHP-递归算法「建议收藏」

    PHP-递归算法「建议收藏」在PHP开发过程中,递归算法通常用于无限极分类。那么所谓递归就是一种函数调用自身的机制。简单来说就是在函数体内直接或间接自己调用自己,但需要设置自调用的条件,若满足条件,则调用函数本身,若不满足则终止本函数的自调用。并且递归算法的实现方法是有多种的,如通过“静态变量”、“全局变量”、“引用传参”的方式。下面我们就结合具体的代码示例,给大家介绍其中一种方法即利用静态变量的方法!代码如下:输…

发表回复

您的电子邮箱地址不会被公开。

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