AJAX-数据格式提要

最新推荐文章于 2024-03-10 11:15:00 发布
最新推荐文章于 2024-03-10 11:15:00 发布
阅读量240 收藏 1
点赞数
分类专栏： # JAVA WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ldw201510803006/article/details/73969602
版权

服务器端的编程语言只能以如下三种格式返回数据：XML，jSON，HTML

（1）HTML返回:

<script type="text/javascript">
     
     window.onload = function (){
       var aNodes = document.getElementsByTagName("a");
       for (var i = 0; i < aNodes.length; i++) {
		aNodes[i].onclick = function (){
		  var request = new XMLHttpRequest();
		  var method = "GET";
		  var url = this.href;
		  
		  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>
  <ul>
   <li> <a href = "andy.html">Andy</a></li>
   <li> <a href = "tom.html">Tom</a></li>
   <li> <a href = "Deve.html">Deve</a>
       <br><br><br>
   <div id = "details"></div>
  </ul>

（2）XML返回： 

<!DOCTYPE html>
<html>
  <head>
    <title>index.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  <script type="text/javascript">
     
     window.onload = function (){
       var aNodes = document.getElementsByTagName("a");
       for (var i = 0; i < aNodes.length; i++) {
		aNodes[i].onclick = function (){
		  var request = new XMLHttpRequest();
		  var method = "GET";
		  var url = this.href;
		  
		  request.open(method, url);
		  request.send(null);
		  request.onreadystatechange = function(){
		    if(request.readyState == 4){
		       if(request.status == 200 || request.status == 304){
		       
		         //<h2> <a href = "motto:andy@clearleft.com">Andy buGG</a></h2>   转换的目标格式
                 //<a href = "http://www.pzhu.cn">http://www.pzhu.cn</a>
                 
                 //结果为xml格式，所以需要responseXML来获取
                 var result = request.responseXML;
                 //结果不能使用，必须创建相应节点，再放到#details中
                 var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
                 var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
                 var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
                 
                 
                 var aNode = document.createElement("a");
                aNode.appendChild(document.createTextNode(name));
                aNode.href = website;
                 
                 var h2Node = document.createElement("h2");
                 h2Node.appendChild(aNode);
                 
                 var aNode2 = document.createElement("a");
                 aNode2.appendChild(document.createTextNode(email));
                 aNode2.href = website;
                 
                 var detailsNode = document.getElementById("details");
                 detailsNode.innerHTML = "";
                 detailsNode.appendChild(h2Node);
                 detailsNode.appendChild(aNode2);
		       }   
		    }
		  }
		  return false ;
		}
	   }
     }
    
  </script>

  </head>
  
  <body>
  <ul>
   <li> <a href = "andy.xml">Andy</a></li>
   <li> <a href = "tom.xml">Tom</a></li>
       <br><br><br>
   <div id = "details"></div>
  </ul>
  </body>
</html>

xml格式： 

<?xml version="1.0" encoding="UTF-8"?>
<details>
  <name>tom</name>
  <website>http://pzhu.cn</website>
  <email>tom@clearleft</email>
</details>

（3）JSON格式返回：

一个简单的JSON：

  <script type="text/javascript"> 
    
    var jsonObject = {
      "name":"atguigu",
      "age":12,
      "address":{"city":"beijing","school":"acguigu"},
      "teaching":function(){
       alert("java EE:Android");
      }
    }
    
    alert(jsonObject.name);
    alert(jsonObject.age);
    alert(jsonObject.address.city);
    jsonObject.teaching();
  </script>

调用resposetext函数， 返回一个Json字符串，需要进行转换成html格式：

    //eval()可以将字符串内容解析成一个js处理 
var JsonStr = "{'name':'zhangsan'}";
var testStr = eval("("+JsonStr+")");
alert(testStr.name);


<!DOCTYPE html>
<html>
  <head>
    <title>testJson.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

 <script type="text/javascript">
     
     window.onload = function (){
       var aNodes = document.getElementsByTagName("a");
       for (var i = 0; i < aNodes.length; i++) {
		aNodes[i].onclick = function (){
		  var request = new XMLHttpRequest();
		  var method = "GET";
		  var url = this.href;
		  
		  request.open(method, url);
		  request.send(null);
		  request.onreadystatechange = function(){
		    if(request.readyState == 4){
		       if(request.status == 200 || request.status == 304){
		       
		         //<h2> <a href = "motto:andy@clearleft.com">Andy buGG</a></h2>   转换的目标格式
                 //<a href = "http://www.pzhu.cn">http://www.pzhu.cn</a>
                 var result = request.responseText;
                 var Object = eval("("+result+")");
                 
                 //结果不能使用，必须创建相应节点，再放到#details中
                 var name = Object.person.name;
                 var website = Object.person.website;
                 var email = Object.person.email;
                 
                 
                 var aNode = document.createElement("a");
                aNode.appendChild(document.createTextNode(name));
                aNode.href = website;
                 
                 var h2Node = document.createElement("h2");
                 h2Node.appendChild(aNode);
                 
                 var aNode2 = document.createElement("a");
                 aNode2.appendChild(document.createTextNode(email));
                 aNode2.href = website;
                 
                 var detailsNode = document.getElementById("details");
                 detailsNode.innerHTML = "";
                 detailsNode.appendChild(h2Node);
                 detailsNode.appendChild(aNode2);
		       }   
		    }
		  }
		  return false ;
		}
	   }
     }
    
  </script>

  </head>
  
  <body>
      <ul>
   <li> <a href = "andy.js">Andy</a></li>
   <li> <a href = "tom.js">Tom</a></li>
       <br><br><br>
   <div id = "details"></div>
  </ul>
  </body>
</html>

Json数据格式：

//andy.js
{"person":{
	"name":"andy",
	"website":"http://pzhu.cn",
	"email":"andy@clearleft"
}
}



三种数据格式的比较：

HTML:若应用程序不需要与其他应用程序数据共享，则优选。

JSON:若数据重用，则优选。

XML:远程应用程序未知时，则优选；因为xml是web领域的世界语。




柏油
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
AJAX-FilmDB-开源
04-23
它提供了丰富的函数库，便于处理数据库操作，如MySQLi或PDO扩展，以及与前端交互，如JSON数据格式。 2. **MySQL**：作为数据库管理系统，MySQL为AJAX-FilmDB存储和管理电影数据。它是一种关系型数据库，支持SQL语言...
Ajax-Spring-RSS.zip
09-17
许多主要新闻网站的数据通过rss提要聚合,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下更改。
Ajax（二）数据格式
wendy0927的博客
05-12 122
数据格式提要 在服务器端AJAX是一门与语言无关的技术。 从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下三种格式返回数据： XML JSON HTML HTML小结 优点： 从服务器端发送的HTML代码在浏览器端不需要用JavaScript进行解析。 HTML的可读性好 HTML代码块与innerHTML属性搭配，效率高。 缺点： 若需要...
Ajax_数据格式
张议的博客
07-02 130
文章目录数据格式提要解析HTML优点缺点解析XML优点缺点JSONJSON示例解析JSON优点缺点 数据格式提要 再服务器端AJAX是一门与语言无关的技术。再业务逻辑层使用何种服务器端语言都可以。 从服务器端接受数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下3中格式返回数据： - XML - JSON - HTML 解析HTML HTML由一些普通文本组成...
js-json---各种格式数据格式提要
baojie1022的专栏
04-02 498
数据格式提要 在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。 从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据： XML JSON HTML XML 优点： XML 是一种通用的数据格式。 不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。 利用 DOM 可以完全掌控文档。
ajax批量上传数据,Ajax上传数据和上传文件（三种方式）
weixin_35983968的博客
08-05 733
Ajax向后端发送数据可以有三种方式：原生Ajax方式，jQuery Ajax方式，iframe+form 方式(伪造Ajax方式)Title.btn {background-color: coral;color: white;padding: 5px 10px;border-radius: 26%;cursor: pointer;}原生Ajax测试get发送post发送仿Ajax(ifram...
Ajax拿取html格式数据
LHJBK的博客
11-11 1287
数据格式提要 在服务器端Ajax是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以 从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端端编程语言能以如下3种格式返回数据： XML JSON HTML 解析 HTML HTML由一些普通文本组成，如果服务器通过XMLHttpRequest发送HTML，文本将存储在responseText属性中。 不必从respo
Ajax学习（3）数据格式提要
付之一笑的专栏
03-04 537
数据格式提要： 在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据： XML： 优点： XML 是一种通用的数据格式。不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。利用 DOM 可以完全掌控文档。 缺点：
ajax上传多文件和数据,Ajax上传数据和上传文件（三种方式）
weixin_34158442的博客
08-06 1270
Ajax向后端发送数据可以有三种方式：原生Ajax方式，jQuery Ajax方式，iframe+form 方式(伪造Ajax方式)Title.btn {background-color: coral;color: white;padding: 5px 10px;border-radius: 26%;cursor: pointer;}原生Ajax测试get发送post发送仿Ajax(ifram...
Ajax_数据格式_HTML
weixin_33690963的博客
10-01 48
【数据格式提要】 1.在服务器端Ajax是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。 2.从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下三种格式返回数据： --XML --JSON --HTML 【解析HTML】 1.HTML由一些普通文本组成。如果服务器通过XMLHttpRequest发送HTML，文本将存...
Django环境下使用Ajax
最新发布
AZURE060606的博客
03-10 2331
AJAX 的主要目标是在不刷新整个页面的情况下，通过后台与服务器进行数据交换和更新页面内容。通过 AJAX，您可以向服务器发送请求并接收响应，然后使用 JavaScript 动态地更新页面的部分内容简单来说就是将后端数据进行加工后传给前端，再利用js对数据进行加工或判断后渲染到前端AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行，AJAX 使用异步交互与服务器进行通信同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
e-chaupal:这是用于新闻提要
07-02
新闻提要通常需要实时更新、排序和展示最新的新闻条目，JavaScript 提供了这样的能力，可以通过 AJAX (Asynchronous JavaScript and XML) 技术实现异步数据加载，使页面无需刷新就能获取新内容。 在 "e-chaupal" ...
RSS Reader using PHP, AJAX, & XML-开源
05-03
RSS（Really Simple Syndication）是一种用于发布和聚合内容的XML格式，广泛应用于新闻、博客和各种在线内容的更新通知。通过使用此RSS阅读器，用户无需逐个访问各个网站，即可在一个集中位置查看所有关注的站点的...
Head Rush Ajax
03-25
3. **XML与JSON**：最初，AJAX数据格式主要使用XML，但现代实践中更常使用JSON，因为JSON格式更简洁且易于解析。 4. **DOM操作**：返回的数据通常用于修改或添加到文档对象模型（DOM）中，JavaScript可以轻松地通过...
从jsp页面中连接数据库并进行相关操作（增删查改）
热门推荐
持之以恒
04-18 2万+
1、在servlet中处理读取数据库中的内容； 2、编写一个java类封装对数据库的加载、连接以及各种查询、更新方法； 3、编写一个javaBean 其参数对应于数据库中的列名 4、servlet中读取数据完成后，交于jsp界面输出 数据库中的数据： 读取的数据： 具体如下： 一：java类，封装对数据库的加载、连接以及各种查询、更新方法；
jsp 页面中连接sql server 2008数据库
持之以恒
04-18 1万+
根据我自己的连接情况，综合网上的方法（也就是将网上的一些方法组合在一起，希望对你有帮助） 一：怎样更改SQL Server 2008的身份验证方式 大家都知道sql server 有两种登录验证方式，即sql server验证方式和windows验证方式，但是sql server默认的是windows登录验证方式，我们如何启用sql server和windows混合的验证方式并
Feign 应用之 RequestInterceptor 拦截器，超实用指南
持之以恒
09-26 1万+
思考一下，你目前正在使用微服务体系，一个普通的用户请求可能会在微服务之间多次调用，而途径的每个微服务都需要原始请求的部分参数，你会如何传递这些参数？ 在之前的文章中，我们了解到，Feign 的本质就是 JAVA 易用版的 HTTP 上层封装，本质还是 `HTTP` 调用 想要原始请求参数在微服务之间流转，本质就是在调用下游服务的 HTTP 请求头上添加这些参
服务端实时推送技术之SSE（Server-Send Events）
持之以恒
04-28 1万+
服务端推送，也称为消息推送或通知推送，是一种允许应用服务器主动将信息发送到客户端的能力，为客户端提供了实时的信息更新和通知，增强了用户体验。
AJAX--- 前后端数据交互
08-24
常见的数据格式包括 XML、JSON 或纯文本。 3. 更新页面内容：根据服务器返回的数据，可以使用 JavaScript 动态更新页面内容，而不需要刷新整个页面。这样可以提升用户体验并减少网络流量。 以下是一个简单的 AJAX ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柏油

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值