AJAX

DHTML

• 动态HTML（Dynamic HTML，简称DHTML），其实并不是一门新的语言，它只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html+css+javascript（或其它客户端脚本），其中css和客户端脚本是直接在页面上写而不是链接上相关文件。DHTML不是一种技术、标准或规范，只是一种将目前已有的网页技术、语言标准整合运用，制作出能在下载后仍然能实时变换页面元素效果的网页设计概念。

XHR

• XmlHttpRequest异步数据获取技术

AJAX

• AJAX不是一门新的技术， 而是将JavaScript, XML和异步执行这3项综合运用的一个解决方案

• ajax的特性。它是用来发送异步请求的，请求的是服务器，但不会刷新页面

  • 包含主要内容

    • 运用HTML + CSS来表达信息

    • 运用JavaScript操作DOM来实现效果

    • 运用XML, JSON等进行数据交互

    • 运用XMLHttpRequest与web服务器进行异步数据交互

• AJAX交互模型
  

• AJAX支持WEB异步交互

• AJAX 异步的javascript和xml

• AJAX = DHTML + XHR

---

AJAX编码步骤

---

XmlHttpRequest的属性

• a、readyState：short只读 标识着当前的请求状态

  1 XmlHttpRequest对象被创建了。此时为0
  2 建立与服务器的链接，但是请求还没有发出去。此时为1。open(),send()还没有执行。
  3 发出了请求，但是服务器没有任何响应。此时为2
  4 接收到了服务器的响应，接收到了服务器发出的响应消息头时，此时3.
  5 接收到了服务器发送的响应正文，响应结束。此时为4
  

• b、status：代表着响应状态码

• c、statusText：响应码描述

• d、responseText：字符串类型。代表着响应正文内容，把他当做文本对待

• e、responseXML：Document。代表着响应正文内容，把他当做一个Document对象。（DOM）

---

XmlHttpRequest的方法

• a、getAllResponseHeaders():返回的是所有的响应消息头。是一个字符串。

• b、getResponseHeader(var headerName):返回指定响应消息头的值。是一个字符串。

• c、open(var method,var url,boolean isAnsy):建立连接。

  • method，请求方式

  • url，请求的地址

  • isAnsy，同步还是异步。默认是true，就是异步。

• d、send(var data):向服务器发送请求正文。如果是get请求，请求传入null.
  如果是post请求：data ="username=abc&password=123"

• e、setRequestHeader(var headerName,var headerValue):向服务器发送请求消息头。

---

XmlHttpRequest的状态监听器

• onreadystatechange，指向是一个函数。回调函数。

• 何时触发执行，每次XHR对象的readyState发生变化都会触发。

• 一般写法：

  xhr.onreadystatechange=function()
  {
  if(xhr.readyState==4)
  {
      if(xhr.status==200)
      {
           //JS之DOM、BOM编程
      }
  }
  }