Ajax_数据格式_HTML(01)

来源：互联网发布：直播软件收入排行榜编辑：程序博客网时间：2024/06/03 21:22

一、数据格式提要：从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送，服务器端的编程语言只能以如下三种格式返回数据：

1、XML

2、JSON

3、HTML

下面呢我分别以这三种格式来完成对应的操作。

这篇博文主要是按照HTML的格式完成ajax的操作

二、解析HTML

1、HTML是由一些普通的文本组成，如果服务器通过XMLHttpRequest对象来发送HTML,文本将存储在ResponseText属性中。

2、不必从ResponseText属性中读取数据，因为它本身就是希望的数据格式，可以直接将它插入页面中。

3、插入HTML代码最简单的方法是更新这个元素的innerHTML属性。

项目目录结构如下：

实现的效果如下：

点击之后在同一个页面显示该人员的相关信息：

这个效果就是通过ajax的技术实现对html代码直接插入页面，下面我把涉及的两个文件的代码贴出来：

1、index.html代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><script type="text/javascript">window.onload=function(){     var  nodes = document.getElementsByTagName('a');  for(var i = 0; i<nodes.length;i++){  //1、获取a节点，并为其添加onclick函数响应  nodes[i].onclick=function(){  //3、创建XMLHttpRequest对象   var request = new XMLHttpRequest();  //4、准备发送请求的数据：url    var url = this.href;   var method = "GET";   //5、调用XMLHttpRequest对象的open方法   request.open(method, url);   //6、调用XMLHttpRequest对象的send方法   request.send(null);   //7、为XMLHttpRequest对象 添加onreadystatechange函数响应   request.onreadystatechange = function(){   //8、判断响应是否完成：XMLHttpRequest对象的 readystate 属性值为4的时候     if(request.readyState == 4){     //9、在判断响应是否可用：XMLHttpRequest对象的 Status 的值为200       if(request.status == 200 || request.status == 304){           //10、将响应结果显示在div里面           document.getElementById("detials").innerHTML = request.responseText;          }        }      }     //2、取消a节点的默认行为      return false;   }    }}</script><body><h1>people</h1><ul>    <li>  <a  href="files/andy.html">andy</a></li>    <li>  <a  href="files/judy.html">judy</a></li>    <li>  <a  href="files/jojo.html">jojo</a></li></ul><div id="detials"></div></body></html>

2、andy.html文件的代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body>andy welcome you ....</body></html>

三、html总结

优点：

1、从服务器端发送的html代码在浏览器端不需要javascript进行解析

2、html的可读性比较好

3、html代码与innerHTML属性更搭，效率更高

缺点：

1、如果需要通过ajax更新文档的多个部分，html不合适

2、innerHTML不是DOM标准

0 0