Jquery学习笔记(五)

 

.load()方法简化了繁杂的加载文本的工作，之需要将加载的文件的URL作为参数传递给.load()方法。

$(document).ready(function(){
      $(‘#letter-a .button’).click(function(){
	$(‘#dictionary’).load(‘a.html’);
      });
});

 

前面我们看到，JavaScript对象就是由一些"键-值"对组成，而且可以方便地使用花括号({})来定义，另一方面，JavaScript的数组则可以使用方括号([])进行动态定义。将这两种语法组合起来，可以轻松地表达复杂而且庞大的数据结构。Douglas Crockford为利用这种简单的语法起了一个名字，叫做JSON(JavaScript Object Notation)。通过这种表示法能够方便地取代数据量庞大的XML格式。

{
     "key”: "value”,
     "key 2”: [
           "array”,
           "of”,
           "items”
    ]
}

 

$.getJSON()是作为全局JQuery对象的方法定义的，没有该方法使用的DOM，最为结果的对象只能提供给脚本，而不能插入到页面中。$.getJSON()可以接受两个参数，第一个参数为所要加载的文件名，第二个参数是当加载完成时调用的函数，即回调函数。AJAX请求都是异步的，回调函数提供了一种等待数据返回的方式，而不是立即执行代码。

$.each()函数不操作JQuery对象，它以一个数组或映射作为第一个参数，以一个回调函数作为第二个参数，此外，还需要将每次循环中数组或映射的当前索引和当前项作为回调函数的两个参数。

$(document).ready(function() {
  $('#letter-b a').click(function() {
    $.getJSON('b.json', function(data) {
      $('#dictionary').empty();
      $.each(data, function(entryIndex, entry) {
        var html = '<div class="entry">';
        html += '<h3 class="term">' + entry['term'] + '</h3>';
        html += '<div class="part">' + entry['part'] + '</div>';
        html += '<div class="definition">';
        html += entry['definition'];
        if (entry['quote']) {
          html += '<div class="quote">';
          $.each(entry['quote'], function(lineIndex, line) {
            html += '<div class="quote-line">' + line + '</div>';
          });
          if (entry['author']) {
            html += '<div class="quote-author">' + entry['author'] + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
        html += '</div>';
        $('#dictionary').append(html);
      });
    });
    return false;
  });
}); 

尽管JSON格式很简洁，但是它却不容许任何错误，所有方括号、花括号、引号和都好都必须合理而且适当的存在，否则文件不会加载。而且在多数浏览器中，当文件不会加载时我们都看不到错误信息，脚本只是静默地彻底终止运转。

 

在正常情况下，为了防止单击这些链接时打开新URL，我们在事件处理程序中必须返回false。

 

$.getScript() 虽然可以再需要时动态引入<script>标签，但是注入所需代码的更优雅的方式则是通过JQuery直接加载.js文件。

$(document).ready(function() {
  $('#letter-c a').click(function() {
    $.getScript('c.js');
    return false;
  });
});

 

加载XML时帮助我们完成任务的是$.get()函数，通常，这个函数只是简单地取得由URL制定的文件，然后将纯文本格式的数据提供给回调函数。但是在根据服务器提供的MIME类型知道响应的事XML的情况下，提供给回调函数的将是XML DOM树。

$(document).ready(function() {
  $('#letter-d a').click(function() {
    $.get('d.xml', function(data) {
      $('#dictionary').empty();
      $(data).find('entry:has(quote[author])').each(function() {
        var $entry = $(this);
        var html = '<div class="entry">';
        html += '<h3 class="term">' + $entry.attr('term') + '</h3>';
        html += '<div class="part">' + $entry.attr('part') + '</div>';
        html += '<div class="definition">';
        html += $entry.find('definition').text();
        var $quote = $entry.find('quote');
        if ($quote.length) {
          html += '<div class="quote">';
          $quote.find('line').each(function() {
            html += '<div class="quote-line">' + $(this).text() + '</div>';
          });
          if ($quote.attr('author')) {
            html += '<div class="quote-author">' + $quote.attr('author') + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
        html += '</div>';
        $('#dictionary').append($(html));
      });
    });
    return false;
  });
});

 

$(data).find('entry[quote[@author]]').each(function(){

 这是使用了XPath的选择习惯。

 

 

当AJAX请求开示且尚未进行其他传输时，会触发.ajaxStart()的回调函数，相反，当最后一次活动请求终止时，则会执行通过.ajaxStop()注册的回调函数，这些listeners都是全局性的，因为无论创建它们的代码位于何处，当AJAX通信发生时都需要调用它们。

 

$(document).ready(function() {
  $('<div id="loading">Loading...</div>')
    .insertBefore('#dictionary')
    .ajaxStart(function() {
      $(this).show();
    }).ajaxStop(function() {
      $(this).hide();
    });
});

 

一些零碎的东西

 

尽管构建动态的Web应用程序非常实用，但XMLHttpRequest(jQuery的AJAX实现背后的底层浏览器技术)常常会受到严格限制。为了防止各种跨站点脚本攻击，一般情况下从原始页面的服务器之外的站点请求文档是不可能的。

 

加载外来JavaScript文件的一种流行方法是根据请求注入<script>标签

$(document.createElement('script'))
	.attr('src','http://example.com/example.js').appendTo('head');