JS DOM编程艺术学习笔记（二）

最新推荐文章于 2023-05-27 15:34:11 发布

灵熙兔

最新推荐文章于 2023-05-27 15:34:11 发布

阅读量1k

点赞数

分类专栏：【JavaScript】

本文链接：https://blog.csdn.net/qq_25178609/article/details/51043240

版权

【JavaScript】专栏收录该内容

30 篇文章 0 订阅

订阅专栏

第七章动态创建标记

4.Ajax

AJAX = 异步 JavaScript 和 XML。
异步加载页面内容技术，是一种用于创建快速动态网页的技术。。使用Ajax可以做到只更新页面中的一小部分。其他内容——标志、导航、头部、脚
部，都不用重新加载。用户点击链接时可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
主要优势就是对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来相应请求，会在后台处理请求，与此同时用户还能继续浏览页面并
与页面交互。你的脚本可以按需加载和创建页面内容，而不会打断用户的浏览体验。通过 AJAX，JavaScript 无需等待服务器的响应，而是：在等待
服务器响应时执行其他脚本，当响应就绪后对响应进行处理。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网。

(1)(核心)XMLHttpRequest对象：以往的请求都是浏览器发出的，而JavaScript通过这个对象可以自己发送请求，自己处理响应。是内建对象
所有现代浏览器均支持 XMLHttpRequest对象，但不同浏览器实现XMLHttpRequest对象的方式不太一样，为了保证跨浏览器，需要写代码分支。
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 
对象。如果不支持，则创建 ActiveXObject ：

    var xmlhttp;
    if (window.XMLHttpRequest)  //code for IE7+, Firefox, Chrome, Opera, Safari
       { 
          xmlhttp=new XMLHttpRequest();
       }
    else                       // code for IE6, IE5
       {
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }

(2)XMLHttpRequest 对象作用：用于和服务器交换数据。
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
open(method,url,async)——规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

例如：xmlhttp.open("GET","test1.txt",true);

send(string)——将请求发送到服务器，仅用于 POST 请求。xmlhttp.send();

GET 还是 POST？Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。GET 更简单也更快，并且在大部分情况下都能用。在以下情况中，
请使用 POST 请求：无法使用缓存文件（更新服务器上的文件或数据库）、向服务器发送大量数据（POST 没有数据量限制）、发送包含未知字符的用户
输入时，POST 比 GET 更稳定也更可靠

(3)向服务器发送请求
GET 请求：一个简单的 GET 请求：您可能得到的是缓存的结果，为了避免这种情况，请向 URL 添加信息：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

POST 请求：一个简单 POST 请求：如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。
然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

setRequestHeader(header,value)向请求添加 HTTP 头。header: 规定头的名称，value: 规定头的值。
url：open() 方法的 url 参数是服务器上文件的地址，该文件可以是任何类型的文件，比如.txt 和.xml，或者服务器脚本文件，比如.asp 和.php 

(4)服务器响应：XMLHttpRequest 对象的 responseText 或 responseXML 属性。
responseText：获得字符串形式的响应数据。xmlhttp.responseText;
responseXML：服务器的响应是 XML，而且需要作为 XML 对象进行解析。xmlhttp.responseXML;

(5)jQuery-AJAX
编写常规的AJAX代码并不容易，因为不同的浏览器对AJAX的实现并不相同jQuery团队解决了这个难题，只需要一行简单的代码，就可以实现AJAX功能。

 常用一：load()方法从服务器加载数据，并把返回的数据放入被选元素中。语法：$(selector).load(URL,data,callback);必需URL，也可以把 jQuery 
 选择器添加到URL参数；可选的data参数，规定与请求一同发送的查询字符串键/值对集合。

    $("#div1").load("demo_test.txt #p1"); //把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中

 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：responseTxt - 包含调用成功时的结果内容,
 statusTxt- 包含调用的状态,xhr - 包含 XMLHttpRequest 对象

    $("button").click(function(){
    $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success") alert("外部内容加载成功！");
    if(statusTxt=="error") alert("Error:" +xhr.status+ ":" +xhr.statusText);
  });
});

 常用二：get() 和 post() 
 $.get() 方法通过 HTTP GET 请求从服务器上请求数据。语法：$.get(URL,callback);必需的 URL 参数规定您希望加载的 URL。
 回调函数有两个参数data,status第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

$("button").click(function(){
    $.get("demo_test.asp",function(data,status){
       alert("Data: " + data + "\nStatus: " + status);
    });
});

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。语法：$.post(URL,data,callback);

$("button").click(function(){
  $.post("demo_test_post.asp",
          {
              name:"Donald Duck",
              city:"Duckburg"
          },
      function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
      });
});

第八章充实文档内容

不要利用JavaScript把“重要内容”添加到网页上。要记住两项原则：
    渐进增强：应该从最核心的部分即内容开始，根据内容使用标记实现良好的结构；然后再逐步加强这些内容。这些增强工作既可以是通过CSS改进
    呈现效果，也可以是通过DOM添加各种行为。不应该使用DOM添加核心内容，内容应该在刚开始编写文档时就称为文档的组成部分。
    平稳退化：按照渐进增强的原则充实内容时，您为内容添加的样式和行为就自然支持平稳退化，那些缺乏必要的CSS和DOM支持的访问者扔可以访问
    到你的核心内容。

本章使用DOM技术为网页添加一些实用的小部件：
(1)得到隐藏在属性里的信息
(2)创建标记封装这些信息
(3)把这些标记插入到文档

缩略语标签：<abbr></abbr> title属性隐藏，鼠标停留时可能会显示。注意！IE浏览器是<acronym>,最后会谈到兼容性问题

1.显示缩略语列表
这里写图片描述

用自定义列表元素，把<abbr>标签包含的文本和title属性集中添加显示在页面中，用DOM来创建定义列表。编写displayAbbreviations()函数：存.js

第一步：getElementsByTagName将所有的<abbr>找出,为了适用于其它文档还需要if语句判断是否有abbr：

var abbreviations=document.getElementsByTagName("abbr");//取得所有缩略词
if(abbreviations.length<1) return false;

第二步：getAttribute获取并保存每个abbr元素提供的信息title和abbr文本值，数组是理想的存储媒介：

var defs=new Array();
for (var i=0;i<abbreviations.length;i++){    //遍历缩略词
            var current_abbr=abbreviations[i];
            var definition=current_abbr.getAttribute("title");
            var key=current_abbr.lastchild.nodeValue;//为了避免文本嵌套在其他元素里，用lastchild更稳妥
            defs[key]=definition;
}

将缩略语作为数组元素下标，文本解释作为数组元素的值。

第三步：创建标记封装信息。用creatElement创建定义列表，这时dl元素是孤儿，最后需要把它添加到html文档中。每次循环都要创建一个dt元素和
一个dd元素，还需要创建相应的文本节点 并添加到新创建的dt元素和dd元素中。

  var dlist=document.creatElement("dl");      //创建自定义列表
  for (key in defs) {
      var definition = defs[key]；

      var dtitle = document.createElement("dt");
      var dtitle_text = document.createTextNode(key);
      dtitle.appendChild(dtitle_text);

      var ddesc = document.createElement("dd");
      var ddesc_text = document.createTextNode(definition);
      ddesc.appendChild(ddesc_text);

      dlist.appendChild(dtitle);          
      dlist.appendChild(ddesc);
}

第四步：插入自定义列表，引用body标签；并添加描述性标题。

var header=document.creatElement("h2");
var header_text=document.creatTextNode("Abbreviations");
header.appendChild(header_text);
document.body.appendChild(header);    // 把标题添加到页面主体
document.body.appendChild(dlist);     // 把定义列表添加到页面主体

此时，displayAbbreviations函数完成。可以改进检查兼容性：

if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;

为了日后方便把多个事例添加到window.onload处理函数上，最好使用addLoadEvent函数。首先编写addLoadEvent函数并存入script文件夹，
然后在displayAbbreviations函数后面，displayAbbreviations.js中添加addLoadEvent(displayAbbreviations);

前面你说到了IE浏览器缩略短语是<acronym>，所以displayAbbreviations函数在IE浏览器并不兼容。但是为了不让现有代码函数
大动干戈，只能让IE浏览器用户看不到此缩略语列表。该如何改进呢？
(1)在从abbr元素提取title属性和文本值的for循环里插入：

for (var i=0; i<abbreviations.length; i++) {
    var current_abbr = abbreviations[i];
    if (current_abbr.childNodes.length < 1) continue; //这句
    var definition = current_abbr.getAttribute("title");
    var key = current_abbr.lastChild.nodeValue;
    defs[key] = definition;
  }

(2)在创建缩略语列表的for循环时最后判断dl元素没有子节点的话就退出

  var dlist=document.creatElement("dl");      //创建自定义列表
  for (key in defs) {
      var definition = defs[key]；

      var dtitle = document.createElement("dt");
      var dtitle_text = document.createTextNode(key);
      dtitle.appendChild(dtitle_text);

      var ddesc = document.createElement("dd");
      var ddesc_text = document.createTextNode(definition);
      ddesc.appendChild(ddesc_text);

      dlist.appendChild(dtitle);          
      dlist.appendChild(ddesc);
}  
  if (dlist.childNodes.length < 1) return false; //这句

 最后总结一下创建这个自定义列表的具体步骤：

(1)遍历这份文档中的所有abbr元素
(2)保存每个abbr元素的title属性
(3)保存每个abbr元素包含的文本
(4)创建一个“定义列表”元素（dl）
(5)遍历刚才保存的title属性和abbr元素包含的文本
》(6)创建一个“定义标题”元素（dt）
》(7)把文本插入到这个dt元素——赋值，追加
》(8)创建一个“定义描述”元素（dd）
》(9)把title属性插入到这个dt元素——赋值，追加
》(10)把dt元素追加到第四步的dl元素上
》(11)把dd元素追加到第四步的dl元素上
(12)把dl元素追加到html文档的body元素上

2.显示文献来源链接表

这里写图片描述

<blockquote>与</blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进(增加外边距),有时会用斜体.即块引用有自己的空间。
所有主流的浏览器均支持<blockquote>标签。有一个cite属性，该属性是一个网址，规定引用的来源。从理论上讲，这是一个把文献资料与相关网页
链接起来的好办法，但是浏览器会完全忽视 cite属性。虽然信息在那里，用户却无法看到他们。我们利用JS和DOM把那些信息收集起来，并以一种
更有意义的方式把他们显示在网页上。

将文献以链接形式显示出来，我们编写displayCitation函数，将它保存在displayCitation.js文件中

第一步：把文档里的所有blockquote元素找出来，保存为变量quotes：遍历集合，先测试当前文献有没有cite这个属性，若有则存入变量url

var quotes=document.getElementsByTagName("blockquote");

for (var i=0;i<quotes.length;i++)
{
    if(!quotes[i].getAttribute("cite")) continue;
    var url = quotes[i].getAttribute("cite");
    //注意 没有结束此函数

第二步：把“文献来源链接”放到何处？   我们想把“文献来源链接”放在blockquote元素所包含的最后一个子元素节点之后，显然我们应该找到当前
blockquote元素的lastChild属性。但是，lastChild可能是<p>标签也可能是</p>和</blockquote>标签之间的换行符（文本节点）。所以选出
所有元素节点后，数组长度减1就是最后一个元素的位置（因为数组是从0开始的）：

var quoteChildren = quotes[i].getElementsByTagName('*');
if (quoteChildren.length < 1) continue;
var elem = quoteChildren[quoteChildren.length - 1];//最后一个子节点

以上做好了创建一个链接的所有准备，变量url包含着将成为那个链接的href属性值得字符串，elem变量包含着链接在文档中插入位置的节点。

第三步：创建链接，先用creatELement方法创建“链接”元素，并把href属性添加给新链接。再创建标识文本，既“文本节点+追入”

 var link = document.createElement("a");
 link.setAttribute("href",url);
 var link_text = document.createTextNode("source");
 link.appendChild(link_text);

新链接已创建好，就待插入

第四步：插入链接。先创建一个上标sup元素节点（<sup><a></a></sup>）然后把新链接放入sup元素，并追加到变量elem(文档最后一个子节点)上。
使这个上标形式的新链接将出现在文献节选的后面：

       var superscript = document.createElement("sup");
       superscript.appendChild(link);
       elem.appendChild(superscript);   
   }       //结束for循环
 }       //此时displayCitation函数结束

改进：同样在函数中用if语句判断浏览器兼容性，并且在displayCitation函数外面，.js文件的最后面添加addLoadEvent(displayCitation);

function displayCitations() {
  if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;

灵熙兔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS DOM编程艺术学习笔记（二）

第七章动态创建标记4.AjaxAJAX = 异步 JavaScript 和 XML。异步加载页面内容技术，是一种用于创建快速动态网页的技术。。使用Ajax可以做到只更新页面中的一小部分。其他内容——标志、导航、头部、脚部，都不用重新加载。用户点击链接时可以在不重新加载整个网页的情况下，对网页的某部分进行更新。主要优势就是对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来
复制链接

扫一扫