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

第七章 动态创建标记

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)把这些标记插入到文档