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


相关推荐

发表回复

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

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