Head First JavaScript笔记四

第十一章：除错务尽

1、在HTML属性中用到Javascript字符串时，引号与撇号应该交替运用

2、运行时错误、逻辑错误、语法错误

3、局部变量掩盖全局变量

第十二章：动态数据

1、Ajax让网页能动态接受网络服务器的数据

2、XML是种为任何类型的数据设计格式的标记语言；XHTML是遵守XML的较严格语法规则的新版HTML，它要求标签必须成对出现

3、援助Ajax的Javascript：XMLHttpRequest

• readyState 请求的状态码：0（未初始）、1（开启）、2（已传送）、3（接收中）、4（已载入）
• status HTTP的请求状态码：404（找不到文件）、200（OK）
• onreadystatechange（）请求状态改变时调用
• responseText 服务器返回的响应数据，为纯文本字符串
• responseXML 服务器防护的响应数据，为XML节点树对象
• abort（） 取消请求
• open（）准备请求，指定类型、URL等
• send（）传送请求

4、Ajax使用的两类请求为GET和POST，与送出HTML表单时相同

5、自定义的AjaxRequest对象减轻了制作Ajax请求的痛苦过程，底层的XMLHttpRequest对象存储于自定义对象的request特性中

// AjaxRequest object constructor
function AjaxRequest() {
  // Try the XMLHttpRequest object first
  if (window.XMLHttpRequest) {
    try {
      this.request = new XMLHttpRequest();
    } catch(e) {
      this.request = null;
    }
  // Now try the ActiveX (IE) version
  } else if (window.ActiveXObject) {
    try {
      this.request = new ActiveXObject("Msxml2.XMLHTTP");
    // Try the older ActiveX object for older versions of IE
    } catch(e) {
      try {
        this.request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch(e) {
        this.request = null;
      }
    }
  }

  // If the request creation failed, notify the user
  if (this.request == null)
    alert("Ajax error creating the request.\n" + "Details: " + e);
}

// Send an Ajax request to the server
AjaxRequest.prototype.send = function(type, url, handler, postDataType, postData) {
  if (this.request != null) {
    // Kill the previous request
    this.request.abort();

    // Tack on a dummy parameter to override browser caching
    url += "?dummy=" + new Date().getTime();

    try {
      this.request.onreadystatechange = handler;
      this.request.open(type, url, true); // always asynchronous (true)
      if (type.toLowerCase() == "get") {
        // Send a GET request; no data involved
        this.request.send(null);
      } else {
        // Send a POST request; the last argument is data
        this.request.setRequestHeader("Content-Type", postDataType);
        this.request.send(postData);
      }
    } catch(e) {
      alert("Ajax error communicating with the server.\n" + "Details: " + e);
    }
  }
}

AjaxRequest.prototype.getReadyState = function() {
  return this.request.readyState;
}

AjaxRequest.prototype.getStatus = function() {
  return this.request.status;
}

AjaxRequest.prototype.getResponseText = function() {
  return this.request.responseText;
}

AjaxRequest.prototype.getResponseXML = function() {
  return this.request.responseXML;
}

6、理解Ajax请求：AjaxRequest.prototype.send = function(type, url, handler, postDataType, postData){};

参数分别是：请求类型、URL、处理响应的回调函数、传送的数据类型、传送的数据；

7、Ajax通常是异步的，网页不需要冻结行动以等待服务器处理请求；

8、客户端脚本使用自定义的回调函数处理Ajax请求的响应

最后一个整体代码还是不错的：

<?php
$filename = "blog.xml";

if (file_exists($filename)) {
  // Load the blog entries from the XML file
  $rawBlog = file_get_contents($filename);
}
else {
  // Create an empty XML document
  $rawBlog = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>";
  $rawBlog .= "<blog><title>YouCube - The Blog for Cube Puzzlers</title>";
  $rawBlog .= "<author>Puzzler Ruby</author><entries></entries></blog>";
}
$xml = new SimpleXmlElement($rawBlog);

// Add the new blog entry as a child node
$entry = $xml->entries->addChild("entry");
$entry->addChild("date", $_REQUEST["date"]);
$entry->addChild("body", stripslashes($_REQUEST["body"]));
if ($_REQUEST["image"] != "")
  $entry->addChild("image", $_REQUEST["image"]);

// Write the entire blog to the file
$file = fopen($filename, 'w');
fwrite($file, $xml->asXML());
fclose($file);
?>