AJAX基础

AJAX基础

Tags: ajax学习笔记
ajax是一种在无需加载整个网页情况下还能更新部分网页的技术

---

什么是ajax

：AJAX = 异步 JavaScript 和 xml
ajax 是一种应用于快速创建动态网页的技术，通过在后台与服务器少量的数据交换，Ajax可以使网页实现异步更新，（在无需刷新整个页面的情况下进行网页部分更新）

---

XMLHttpRequest

是 AJAX 的基础。 (简称XHR)
XMLHttpRequest 用于在后台与服务器交换数据。所有的现代浏览器都支持XMLHttpRequest 对象（IE5,6使用ActiveXObject）

---

创建XHR对象

`variable=new XMLHttpRequest();`

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象
variable=new ActiveXObject("Microsoft.XMLHTTP");
所以，为了兼容所有现代浏览器，可以封装

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");
  }

---

向服务器发送请求

再次声明XMLHttpRequest对象用于和服务器交换数据
如需将请求发送到服务器，使用XHR对象的 open（） 和 send（）方法
例：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

方法：
open(method, url , async)

三个参数分别为

1. (method)规定请求的类型，post 或 get
2. (url) 路径（文件在服务器上的位置）
   该文件可以是任何类型的文件，比如.txt和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。
3. （async）true（异步） 或 false(同步)
   XHR如果要用于AJAX open 方法的async参数必须是true;

send(string)
将请求发送到服务器。
string：仅用于 POST 请求

get和post
与post相比 get 更简便也更快，且大多数时候都能使用，在以下情况必须使用Post

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

有关于get 和 post的示例
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定发送的数据：

• 方法： setRequestHeader(header ,value)
  给请求加上HTTP头

---

服务器响应

XHR对象的两个属性

1. responseText 获得字符串形式的响应数据
2. responseXML 获得 XML 形式的响应数据。

如果来自服务器的响应不是xml，都是用responseText 属性
两种属性示例

---

AJAX-onreadystatechange事件

当请求被发送到服务器时，就需要执行一些基于响应的任务
每当 readyState 改变，就会触发onreadystatechange 事件，
而readytState 的属性存有XMLHttpRequest 的状态信息.

• onreadyState :存有XMLHttpRequest 的状态。从 0 到 4 发生变化。
  0: 请求未初始化
  1: 服务器连接已建立
  2: 请求已接收
  3: 请求处理中
  4: 请求已完成，且响应已就绪
• onreadystatechange: 存储函数，每当readystate 改变时就会调用该函数。
• status （HTTP状态码）
  200： ok;
  404: 未找到页面
  503： 服务器暂时不可用
  onreadyststechange 规定了在服务器响应已做好被处理准备时所执行的任务，readyState = 4,且status = 200时，响应已经就绪。

---

事件回顾（高程）

1.事件流

在单击按钮的同时，也单击了按钮的容器元素。甚至单击了整个页面。
事件流描述的是从页面接收事件的顺序。而IE和Netscape提出来基本完全相反的事件流的顺序，IE为事件冒泡流，而Netscape是事件捕获流。

1. 事件冒泡：

从具体的元素沿着dom树向上冒泡，每一个节点都会发生，直到传播到document对象（IE5.5之前的版本冒泡时会绕过html节点，而IE9 chrome safari firefox 一直会冒泡到window对象）

2.事件捕获：
不太具体的节点更早的接收到事件，具体节点在最后接收到事件。其意义在于在事件达到预定目标之前捕获他，即从documen开始逐级向下捕捉（“建议读者放心使用事件冒泡，在特殊需要时在使用事件捕获”）

3.DOM事件流
DOM2级事件 规定：事件流分为三个阶段，事件捕获阶段，处于目标阶段和事件冒泡阶段。实际的目标在事件捕获阶段是不会接受到事件的，在第二阶段才会接收到，然后，冒泡阶段发生，事件又被重新传回文档。
即使如是规定。IE9 Safari Chrome FireFox Opera9.5以上在捕获阶段都会触发事件对象上的对象，会有两个操作目标对象事件的机会

DOM0级事件处理程序

即 xxx.onxxx = function(){};
删除时xxx.onxxx = null即可

DOM2级事件处理程序

两个方法：处理指定和删除事件处理程序的操作：addEventListener() removeEventListener()
三个参数：处理事件名，作为事件处理函数名，布尔值。
布尔值：如果是true 则在捕获阶段调用事件处理程序，如果是false 就在冒泡阶段调用事件处理函数。默认是false.即在冒泡阶段才会调用事件处理函数
与DOM0级事件比较，优点是可以添加多个事件处理程序
btn.addEventLisstener(“click”,function(){a},false)
btn.addEventLisstener(“click”,function(){b},false)…

• 两种方法相同点,都是在其依附的元素的作用域中运行（在函数体内可以用this代替元素）
• removeEventListener();通过addEventLisstener 添加的事件只能用removeEventListener()移除，传入的参数和添加时传入的参数一致。即如果添加时 用的函数是匿名函数，将导致无法移除
• 对于 true 和false :大多数情况下，都是将事件流的处理程序添加到冒泡阶段，（最大限度兼容各浏览器）最好只在需要在事件到达目标之前截获他的时候将事件处理程序添加到捕获阶段。

事件对象

再触发DOM上的某个事件的时候，会产生一个事件对象event，它包含着所有跟事件有关的信息 。包括导致事件的元素，事件类型，还有其他特定事件相关信息

DOM中的事件对象###

无论指定事件时使用的是什么方法（DOM 0级 /2级）都会传入event对象

btn.onclick = function(event){
    alert(event.type);//"click"
}
btn.addEventListener("click",function(){
    alert(event.type);//"click"
})

在上述两例中，都可以不传event形参
补充：在HTML特性指定事件处理程序时，变量event存着event对象。

 <input type="button" value="click me" onclick = 'alert(event.type)'>

事件的具体属性和方法见高程p355~p356
这里总结this, currentTarget ,target的关系。

btn.onclick = function(){
    alert(event.currentTarget === this);
    alert(event.target === this);
}

结果都是true
事件处理程序注册在那个元素上 this ，currentTarget就是谁（他俩所指一直一样），而target则是事件的真正目标，此时三个一样。

document.body.onclick = function(event){
    alert(event.currentTarget == document.body);
    alert(this == document.body);
    alert(event.target == btn);
}

事件处理程序注册到了body元素上，所以this 和currentTarget都等于document.body,但是按钮元素才是target，因为他是click事件的真正目标，按钮上没有注册事件处理程序，结果click事件就冒泡到了document.body上。在那里事件才得到了处理