AJAX学习笔记

AJAX为 ”Asynchronous Javascript and XML“（异步Javascript与XML技术），是一种广泛应用于网页开发的技术。

AJAX是一种在2005年由google推广的编程模式。它并不是一种新的编程语言，而是一种使用现有的标准的新方法。AJAX基于Javascript和HTTP请求。

AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行相应的更新。

传统的网页（不使用AJAX）如果需要更新内容，必须重新载入整个网页面。

AJAX请求

AJAX 的 XMLHttpRequest 对象（XMLHttpRequest是AJAX的基础）

XMLHttpRequest用于在后台与服务器交换数据。（就是可以进行网页的部分更新）

所有现代浏览器（IE7+、firefox和Opera）均内建XMLHttpRequest对象。

创建 XMLHttpRequest对象的语法： variable = new XMLHttpRequest ( );

XMLHttpRequest对象 向 服务器发送请求：使用XMLHttpRequest 对象的 open()  和 send () 方法。

open( method,  url,  async )  //  规定请求的类型、 URL  以及 是否 异步处理请求。

method：                                    //  请求的类型（GET 或 POST）

url ：                                            //  文件在服务器上的位置

async：                                       //  true（异步） 或 false （同步）

send ( string )   //  将请求发送到服务器

string： 仅用于POST请求

xmlhttp.open( "GET" , "test.txt",  true );

xmlhttp.send( ”test“ );

GET 与 POST 方法的选择

与 POST 相比，GET更简单 也 更快， 并且在大部分情况下都能用。

在以下情况中，请使用 post 请求：

1.无法使用 缓存文件（更新 服务器上的 文件或 数据库）

2. 向 服务器 发送大量的 数据（POST 没有数据量的限制）

3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定 也更可靠。

需要 像 HTML 表单 那样 POST 数据， 请使用 setRequestHeader  ( ) 来添加HTTP 头（与GET方法的区别）。

sendRequestHeader（header， value）：向 请求 添加 HTTP 头。

header：                         // 规定的头名称

value：                            //  规定头的值

通过 AJAX，JavaScript 无需等待服务器的响应，而是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理。

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数。

AJAX响应

如果需要获得来自服务器的响应， 请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText 属性： 获得 字符串形式的响应 数据。

Eg：   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML属性 ： 获得XML形式的响应数据。如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性 。

Eg：xmlDoc=xmlhttp.responseXML;

txt="";

x=xmlDoc.getElementsByTagName("ARTIST");

for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; }

document.getElementById("myDiv").innerHTML=txt;

AJAX - onreadystatechange 事件

当 请求 被发送到 服务器时，我们需要执行一些记忆响应的 任务。

每当 readyState 改变时，就会触发  onreadystatechange事件。

readyState 属性 存有 XMLHttpRequest 的 状态 信息。

XMLHttpRequest  对象 的 三个重要的属性：

onreadystatechange          // 存储函数（或函数名），每当readyState属性改变时，就会调用该函数

readyState                          // 存有 XMLHttpRequest 的状态。从0 到 4 发生变化。

0：   请求未初始化

1：  服务器连接已建立

2：  请求已接收

3： 请求处理中

4： 请求已经完成，并且响应已就绪

status                  200： “OK”  ；  404：“未找到页面” 。

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()

{

      if (xmlhttp.readyState==4 && xmlhttp.status==200)

      {

              document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

      }

}

onreadystatechange 事件被触发 4 次，对应着 readyState 的每个变化。

BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。

当它被激活时，它会阻止使用者与页面（或页面的一部分）进行交互，直至它被取消。 BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为。

这个插件的用法很简单。

1 阻止用户与页面交互：$.blockUI();

2 自定义提示信息：$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });

3 自定义显示样式：$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });

4 解除对页面的锁定：$.unblockUI();

5 如果要使用默认设置来同步所有的AJAX请求动作，代码如下：$().ajaxStart($.blockUI).ajaxStop($.unblockUI);