html,xml,json入门Ajax例子

最新推荐文章于 2023-06-02 17:10:50 发布
最新推荐文章于 2023-06-02 17:10:50 发布
阅读量427 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yyw1417/article/details/73728974
版权

三种形式中HTML简单易懂，但拆分的难操作。xml和json jsp中的内容基本相似，就只有调用文件的格式不同组装也都是通过dom

HTML

showhtml.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    window.οnlοad=function(){
    var aNodes=document.getElementsByTagName("a");
    for(var i=0;i<aNodes.length;i++)
    {
    aNodes[i].οnclick=function()
    {
    var request=new XMLHttpRequest();
    var url=this.href;
    var method="GET";
    request.open(method,url);
    request.send(null);
    request.onreadystatechange=function()
    {
    if(request.readyState==4)
    {
    if(request.status==200||request.status==304)
    {
    document.getElementById("details").innerHTML=request.responseText;
    }
    }
    }
    return false;
    }
   
    }
   
    }
</script>
</head>
<body><center>
  <h4>用户信息</h4>
  <ul>
  <li><a href="a.jsp">小a</a></li>
  <li><a href="b.jsp">小B</a></li>
  <li><a href="c.jsp">小c</a></li>
  </ul>
  
  <div id="details"></div>
  </center>
 
</body>
</html>

a.jsp:

<body>
     小a<br/>
  email：23431@qq.com
</body>

类似写b.jsp,c,jsp



XML

showxml.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    window.οnlοad=function(){
    var aNodes=document.getElementsByTagName("a");
    for(var i=0;i<aNodes.length;i++)
    {
    aNodes[i].οnclick=function()
    {
    var request=new XMLHttpRequest();
    var url=this.href;
    var method="GET";
    request.open(method,url);
    request.send(null);
    request.onreadystatechange=function()
    {
    if(request.readyState==4)
    {
    if(request.status==200||request.status==304)
    {/*
    目标：<h2>Andy</h2>
         <h2>sfaf</h2>
    */
     var result=request.responseXML;
      var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
      var email=result.getElementsByTagName("email")[0].firstChild.nodeValue; 
     // alert(name);
     // alert(email);
    /*   var result=request.responseText;
     var object=eval("("+result+")");
     var name=object.person.name; */
     
     var aNode=document.createElement("h2");
     aNode.appendChild(document.createTextNode(name));
     var detailNode=document.getElementById("details");
     detailNode.innerHTML="";
     detailNode.appendChild(aNode);
      
    }
    }
    }
    return false;
    }
   
    }
   
    }
</script>
</head>
<body><center>
  <h4>用户信息</h4>
  <ul>
  <li><a href="a.xml">小A</a></li>
  <li><a href="b.xml">小B</a></li>
  <li><a href="c.xml">小C</a></li>
  </ul>
  
  <div id="details"></div>
  </center>
 
</body>
</html>


a.xml（其中的标签自己任意取名）类似的写b.xml,c.xml

<?xml version="1.0" encoding="UTF-8"?>
<det>
 <name>小A</name>
 <email>3141@qq.com</email>
 </det>


json

json1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>


<script type="text/javascript">
   window.οnlοad=function(){
  var aNodes=document.getElementsByTagName("a");
  for(var i=0;i<aNodes.length;i++)
  {
  aNodes[i].οnclick=function()
  {
  var request=new XMLHttpRequest();
  var method="post";
  var url=this.href;
  request.open(method,url);
  request.send("name='aaa'");
  request.onreadystatechange=function()
  {
 if(request.readyState==4)
 {
 if(request.status==200||request.status==304)
 {
   




        var result=request.responseText;
var object=eval("("+result+")");
var name=object.person.name;
var website=object.person.website;
var email=object.person.email;

     
     var aNode=document.createElement("h2");
     aNode.appendChild(document.createTextNode(name));
     aNode.appendChild(document.createTextNode(website));
     aNode.appendChild(document.createTextNode(email));
     var detailNode=document.getElementById("identity");
     detailNode.innerHTML="";
     detailNode.appendChild(aNode);
    
 }
 }
  }
  return false;
  }
  }
   }
</script>
</head>
<body>
<center>
  <a href="a.js">显示信息1</a>
  <a href="b.js">显示信息2</a>
</center>
<div id="identity"></div>


</body>
</html>


a.js(json语法)

{
"person":{
"name":"Andy",
"website":"http://andy.com",
"email":"andy@clear.com"
}
}


叶一口
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML XML JSON
Roger_may的博客
03-22 240
HTML XML JSON XML是解析HTML的一个中间产物。我们解析HTML时，可以直接对HTML进行解析，也可以先把HTML处理成XML，再对XML解析 树形结构根节点—父节点 -子节点 HTML 标签（HTML tag）见HTML学习记录破解XML XML的英文是Extensible Markup Language，翻译过来是“可扩展标记语言 HTML更加擅长于内容的表示，也就是...
html如何遍历ajax数组,ajax返回json数组遍历添加到html
weixin_31650287的博客
06-20 988
大致需求为类型限制根据类型获取不同结果列表,再根据模糊查询搜索出结果,效果如下:…例子:利用AJAX返回JSON数据,间接访问数据库,查出Nation 表,并用下拉列表显示 造一个外部下拉列表框 JQurey代码 $(document).ready(function(e) { //调用ajax $.ajax({ url:"JsChuLi.php", //返回类型是JSON数据 dataType:...
[Network] HTML、XML和JSON学习汇总
weixin_33897722的博客
06-07 402
　　写在前面：楼主也是刚刚接触这方面的知识，之前完全是零基础，后来经朋友推荐了几个不错的博文，看完以后豁然开朗。但是此博文更加偏重于基础知识介绍（其实更深的楼主也还不了解，这方面的大神请绕道），只是分享个人的一个学习总结。希望那些跟我一样，在实验室闷头搞科研，一出门实习完全一头雾水的同僚们可以借鉴：好多东西并没有我们想想的那么复杂，只要你肯学，迈出第一步，你就成功了一大半。与大家共勉！ 　　好了...
html_xml_json
让，
03-25 166
1.xml extensible markup language 可拓展标记语言 作用： 被设计用来 存储 和 传输 数据 类似html的标记语言 htmo 超文本标记语言，被设计用来 显示数据 xml 可拓展标记语言，被设计用来 存储和传输数据 特点：没有 像html那样预定义的标签 被用来 存储，结构化和传输信息 ...
HTML{XML，JSON，YAML}
星夜征程
03-20 496
HTML是“超文本标记语言”的英文简称，它涵盖 { XML （常见于Internet上的信息交互与传递）， JSON （广泛应用于移动应用云端和节点的信息通信，无注释）， YAML （各类系统的配置文件，有注释易读）， } XML （最早的通用信息标记语言，可扩展性好，但繁琐） <img src="china.jpg" size="10">...</img> #...
HTML、XML和JSON 汇总
Memory_7s的博客
02-22 484
阅读目录1. HTML语言2. XML语言2.1 XML的特点2.2 XML与HTML的主要差异：2.3 XML允许自定义标签2.4 XML的解析3. JSON语言3.1 JSON的语法规则3.2 如何使用JSON？3.3 XML和JSON对比 　　写在前面：楼主也是刚刚接触这方面的知识，之前完全是零基础，后来经朋友推荐了几个不错的博文，看完以后豁然开朗。但是此博文更...
Java端 ajax简单入门例子
03-10
本教程将介绍一个简单的Java后端与Ajax结合的入门示例，帮助初学者理解这一技术的核心概念。 首先，Ajax的核心在于XMLHttpRequest对象，它是JavaScript内置的对象，用于在后台与服务器交换数据。在Java端，通常会...
商业编程-源码-Ajax入门的三个实用小例子.zip
06-20
这个压缩包文件包含的“商业编程-源码-Ajax入门的三个实用小例子”是学习Ajax基础知识的理想实践资源。下面，我们将详细探讨这三个小例子所涵盖的Ajax技术知识点。 1. **创建Ajax对象** 在JavaScript中，Ajax的...
Ajax入门例子
07-29
**Ajax入门例子** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这种方式意味着可以在不重新...
JSON入门指南（中文版）.doc
09-06
由于其与JavaScript语法的高度相似性，JSON成为了Web应用中数据交换的常用格式，尤其在AJAX（Asynchronous JavaScript and XML）技术中得到了广泛应用。 JSON的数据结构主要包含两种基本类型：对象（Object）和数组...
如何理解html,xml,json作用
wangliyi111的博客
10-02 753
如何理解html,xml,json的作用 首先，先简单的提及一下超文本标记语言HTML(HyperText Markup Language)。对于HTML语言，大家一定不陌生，没吃过猪肉，可总见过猪跑吧。 超文本标记语言HTML是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。“标记”是指计算机所能理解的信息符号
数据交换格式(JSON , XML , HTML)
骑大马挎大刀
11-08 239
List<Person> list = new ArrayList<>(); Person p1 = new Person("李四",19,"lisi@qq.com"); Person p2 = new Person("张三",89,"zhangsan@qq.com"); list.add(p1); list.add(p2); String jsonString = JSON.toJSONString(list); String str =""; JSON.parseArray
各种信息标记形式HTML\XML\JSON\YAML
bakk0615的博客
11-20 260
HTML 就不做介绍了，太熟悉了，就是用各种标签进行标记 XML 以标签为主，来构建信息表达信息 用于Internet上的信息交互与传递 和Html非常接近，是Html的扩展 XML学习教程：http://www.runoob.com/xml/xml-tutorial.html <img src="china.jpg"...
HTML、XML、HTML5、JavaScript、Json、Ajax
VoyagerHua的博客
01-18 839
HTML Vs XML :HTML的设计目标是显示数据并集中于数据外观，而XML的设计目标是描述数据并集中于数据的内容（用于传输数据 所以xml做配置文件 结构化易于存储数据），它的显示形式靠CSS或XSL帮完成。XML相对于HTML标准性更强。HTML 中使用的标签都是预定义的。HTML 文档只能使用在 HTML 标准中定义过的标签（如 、 等等）。XML 允许创作者定义自己的标签和自己的文
html导入json数据格式转换,数据传输格式——XML/HTML/JSON
weixin_39524703的博客
06-02 584
xmlhtmljsonxml的官方解释是可扩展标记语言，主要用于数据传输，而HTML则是超文本标记语言，主要用于网页显示。从语法上来讲，xml和html可以被归为一类，他们遵循的语法一致，只是在web中充当的角色和标签名称上有差异。GeorgeJohnReminder一个典型的xml文档如上所示，第一行是xml的文档头声明，主要包含xml的版本、字符编码信息。之后的几行时xml文档的主题内容。该x...
Xml是啥？有什么用？和HTML还有Json的区别？
weixin_43088769的博客
01-18 331
Xml的作用 XML概念： 可拓展标记语言（Extensible Marrup Language）是一种标记语言。标记指计算机所能理解的信息符号。通过此种标记，计算机之间可以处理包含各种信息的文章等。如何定义这些标记，既可以选择国际通用的标记语言，比如HTML，也可以使用想XML这样由相关人士自由决定的标记语言，这就是语言的可扩展性。XML是从标准通用标记语言(SGML)中简化修改出来的。 ...
Ajax——jquery快速实现html、json、xml的ajax应用
皮蛋瘦肉没有肉
11-17 311
html格式： $(function() { $("a").click(function() { var url = this.href; //var url = this.href +"h2" 选择h2部分 var args = { "time": new Date() }; $("#details").load(url); return fa
Ajax学习与使用（HTML、XML、JSON格式数据的处理方法、区别）
x瓜皮的博客
06-28 812
什么是Ajax： Ajax（即异步 JavaScript 和 XML）是一种 Web 应用程序开发的手段，它采用客户端脚本与 Web 服务器交换数据。所以，不必采用会中断交互的完整页面刷新，就可以动态地更新 Web 页面。使用 Ajax，可以创建更加丰富、更加动态的 Web 应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程序。 为什么使用Ajax： Ajax技术解决了很多其它技术解决不了的问题， 比如: 页面无刷新的动态数据交换-----对比传统页面的数据交换 局部刷新页面【验证用户名
一文看懂XML，Json，XAML，HTML 区别及含义--小结
最新发布
Blue
06-02 1011
一文看懂XML，Json，XAML，HTML 区别及含义--小结
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值