从零开始的毕设--JavaScript-Ajax（1）

数据驱动(data-driven)网页

Ajax让网页能动态接受网络服务器的数据。
它的运行方式如下：
客户端发起Ajax请求，然后等待响应。
服务器收到请求，以相应的数据作为响应。
收到服务器的相应后，客户端立即拿起数据并将其假如网页中，而且网页不用重新载入。
（javascript作为居中的 媒介，发起请求，处理响应并且整合数据到网页中。）

万用HTML:XML

在HTML中的ML，指的是markup language（标记语言），也指出了HTML使用了标签tag和属性attribute创建超文本(HT)。
而XML是种作为任何类型的数据设计格式的标记语言。
XML没有定义任何标签和属性，它只是一组标签与属性该如何创建与使用的规则。
一切说明特定数据表现方式的标签与属性规范都交给各个XML应用程序。
** XML 创建自己的标签**
如下：

<movie>
	<title>Gleaming the Cube</title>
	<date>01/13/1989</date>
	<directior>Grame Clifford</director>
	<summary>skateboarder investigates the death of his adopted brother</summary>
</movie>

XMLHttpRequest

JavaScript内置一个称为XMLHttpRequest的对象，用于发起Ajax请求并处理Ajax响应。这个对象非常复杂，包含许多通力合作以支持Ajax的方法与特性：
readyState属性：请求的状态代码：0（未初始）、1（开启）、2（已传送）、3（接收中）、4（已载入）
status属性：HTTP的请求状态代码、例如404或者200
onreadystatechange属性：它存储一个引用，引用于Ajax请求的状态改变时被调用的自定义事件处理器——这个事件处理器就是处理响应的地方。
responseText属性：由服务器返回的响应数据，格式为纯文本字符串。
responseXML属性:由服务器返回的相应数据，格式为XML节点树构成的对象。
abort()：取消请求，这个方法只用在需要取消Ajax请求的时候。
open()：准备请求，指定请求的类型、URL及其他细节。
send()：传送请求，交给服务器处理。
XMLHttpRequest的威力很强大，同时具有惊人的灵活性。但是带来的缺点就是复杂度，即便是最基础的Ajax请求，也需要相当数量的Javascript代码。

var request=null;
if(window.XMLHttpRequest){
	try{
		request=new XMLHttpRequest();
	}catch(e){
		request=null;
	}
}else if{window.ActiveXObject}{
	try{
		request=new ActiveXObject("Msxm12.XMLHTTP");
	}catch(e){
		try{
			request=new ActiveXObject("Microsoft.XMLHTTP");
		}catch(e){
			request=null;
		}
	}
}
if (request == null)
    alert("Ajax error creating the request.\n" + "Details: " + e);

由于XMLHttpRequest对象要在数种浏览器上运作，需要以上的代码:
(window.ActiveXObject)的作用，用来判断浏览器是否支持ActiveX控件，如果支持ActiveX控件，我们可以利用var xml=new ActiveXObject("Microsoft.XMLHTTP")的形式来创建XMLHTTPRequest对象（这是在IE7以前的版本中）。在较新的IE版本中可以利用var xml=new ActiveXObject("Msxml2.XMLHTTP")的形式创建XMLHttpRequest对象；而在IE7及非IE浏览器中可以利用var xml=new XMLHttpRequest()创建XMLHttpRequest对象。因此我们在创建这个对象的时候必须得考虑浏览器的兼容问题。

//服务器响应我们的请求时收到调用的自定义函数handler
request.onreadystatechange=handler;
//开启请求，让请求准备被传送，同时决定请求的类型（GET或POST）
request.open(type,url,true);//异步(true)

创建XMLHttpRequest对象后，换成设定处理请求的函数，然后开启请求。
开启请求时，指定请求的类型get或者post，还有服务器的Url，以及是否请求异步。因为异步不用让脚本等待，所以几乎所有Ajax请求都是异步。
关于GET与POST
GET：不会改变服务器上任何事务的数据获取方式。如果需要，还是能透过URL传入小量数据给服务器。GET非常适合从服务器的XML文件获取博客数据。

request.open("GET","blog.xml",true);
request.send(null);//因为请求被传送时没有数据，所以是Null

POST：此处传给服务器的数据，因为某种方式会改变服务器状态，例如存储数据到数据库中。数据还是能在响应中返回。POST是使用网页表单动态新增加博客日志、评论等这类任务的理想助手。

request.open("POST","addblogentry.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
request.send("09/26/2008&These dreams just...&cubeapart.png");

get和post更多的区别：
https://www.cnblogs.com/logsharing/p/8448446.html

简化Ajax

虽然XMLHttpRequest对象极为强大，但是过于麻烦。所以出现了一些第三方函数库，让其使用简单，这些函数库都扩展了JavaScript功能。
下面我们自己定义一个AjaxRequest对象：

// 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;
}

理解Ajax请求

自定义的AjaxRequest对象由构造函数和数个方法组成，其中有一个方法特别重要：send()
send(type,url,handler,postDataType,postData);
type：请求的类型。
url：服务器的URL。如有需要，数据也可以包装在URL里。
handler：用于处理响应的回调函数。
postDataType：被传送的数据类型（只用于POST）
postData：被传送的数据（只用于POST）
所以GET请求可以省略后面两个参数。进一步来说，前三个自变量对于send方法而言，尤其重要。