初学Ajax

最近找到了个实习，暑假开始，我被安排做网页方面的工作，然后呢想趁这学期结束前多学点web技术，就去买了本关于Ajax的书来看。

-------------------------------------------------------------------

Ajax代表Asynchronous Javascript and XML，但是很多被人为是Ajax的页面并没有使用Javascript和XML，所以把Ajax定义为一种构建web页面的方法更合适吧。

异步请求就是向服务器发出请求而无须用户等待响应。

有时候我们点击网页某一个图片，在网页另一个部分能显示他的详细信息。这之间向服务器发送了一个请求，要求获得这个商品的详细信息。不过在发送请求之前，需要创建请求对象。

function createRequest() {
  try {
    request = new XMLHttpRequest();
  } catch (tryMS) {
    try {
      request = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (otherMS) {
      try {
        request = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (failed) {
        request = null;
      }
    }
  }
  return request;
}

因为创建的请求对象不一定适用于所有浏览器，所以不停尝试。

然后发送

function getDetails(itemName) {
  request = createRequest();
  //做检查以确保请求对象不为null
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  //escape()处理可能有问题的字符
  var url= "getDetails.php?ImageID=" + escape(itemName);
  //true表示请求应当是异步的
  request.open("GET", url, true);
  //回调函数，对一个函数的引用，而不是函数调用
  request.onreadystatechange = displayDetails;
  request.send(null);
}

另外，Ajax是服务器无关的，可以使用asp、PHP等其他技术。

“向服务器发送一个请求对象”，事实上你要与web浏览器通信，再由浏览器与服务器通信。浏览器把你的请求对象发送给服务器，而且再将响应数据发回到web页面之前浏览器会解释服务器的响应。

再比如一个例子，注册的时候，网站自动辨别用户名是否被占用。用户输入用户名后会得到反馈，这样就不需要在按了注册按钮之后才知道用户名有没有被占用。

function checkUsername() {
  document.getElementById("username").className = "thinking";
  request = createRequest();
  if (request == null)
    alert("Unable to create request");
  else {
    var theName = document.getElementById("username").value;
    var username = escape(theName);
    var url= "checkName.php?username=" + username;
    request.onreadystatechange = showUsernameStatus;
    request.open("GET", url, true);
    request.send(null);
  }
}

href=“#”代表引用当前页。

------------------------------------------------------------下面是一个底层的东西（关于兼容性）

为同一个事件指定两个事件处理程序时，只有所指定的最后一个事件处理程序会得以运行。因为事件处理程序只是属性，一个属性只能有一个值。（所有浏览器都适用，但是这个方法有弊端，因为代码他在运行前是不会指定事件处理程序的，假如这段代码还没被页面加载完的情况下，你点击按妞是不会有任何反应的，这样子的事件绑定对于很多产品需求而已是无法满足的。）

  var buttons = 
    document.getElementById("navigation").getElementsByTagName("a");
  for (var i=0; i<buttons.length; i++) {
    var currentBtn = buttons[i];
    currentBtn.onmouseover = showHint;
    currentBtn.onmouseout = hideHint;
    currentBtn.onclick = showTab;
    currentBtn.onmouseover = buttonOver;
    currentBtn.onmouseout = buttonOut;
  }

可以用addEventListener()指定多个事件处理程序。来自DOMLevel2 。大部分主流浏览器支持这个标准。

可以改成：

currentBtn.addEventListener("mouseover",showHint,false);
currentBtn.addEventListener("mouseout",hideHint,false);
currentBtn.οnclick=showTab;
currentBtn.addEventListener("mouseover",buttonOver,false);
currentBtn.addEventListener("mouseout",buttonOut,false);

但是IE9以下 不支持DOMLevel2，所以不能用addEventListener()，但是可以用attachEvent()，效果一样。(但是有个坑爹的地方，IE与其他浏览器执行先后不一致，在IE9以下的浏览器中执行顺序都是反着者的，因为IE9开始已经支持addEventListener()方法所以不会在有这个问题了。)

currentBtn.attachEvent("onmouseover",showHint);

类似的，可以构建跨浏览器工具函数

function addEventHandler(obj, eventName, handler) {
  if (document.attachEvent) {
    obj.attachEvent("on" + eventName, handler);
  } else if (document.addEventListener) {
    obj.addEventListener(eventName, handler, false);
  }
}

 var schedulePane = document.getElementById("schedulePane");
  addEventHandler(schedulePane, "click", showTab);
  addEventHandler(schedulePane, "mouseover", showHint);
  addEventHandler(schedulePane, "mouseout", hideHint);

  var navigationDiv = document.getElementById("navigation");
  addEventHandler(navigationDiv, "mouseover", buttonOver);
  addEventHandler(navigationDiv, "mouseout", buttonOut);

但还有个问题，IE中事件处理程序的所有者是IE的事件框架，而不是当前活动的页面对象。

Javascript很酷的一点就是，声明函数不需要列出那些函数的所有参数，但是也会遗漏或者忽视那些参数，有时候这不是好事。

事件处理程序会从attachEvent()和addEventListener()得到一个Event对象，有两个有用的属性，type和target。（IE中不是target，而是srcElement）

为了处理这个差异，最好建立一个工具函数

function getActivatedObject(e) {
  var obj;
  if (!e) {
    // early version of IE
    obj = window.event.srcElement;
  } else if (e.srcElement) {
    // IE 7 or later
    obj = e.srcElement;
  } else {
    // DOM Level 2 browser
    obj = e.target;
  }
  return obj;
}

function showHint(e) {
  if (!welcomePaneShowing) {
    return;
  }
  var me = getActivatedObject(e);
  switch (me.title) {
...

-----------------------------------------------