Ajax编程思想

什么是AJAX?
AJAX:”Asynchronous JavaScript and XML” 中文意思：异步JavaScript和XML。 指一种创建交互式网页应用的网页开发技术。 AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词。

不是指一种单一的技术，而是有机地利用了一系列相关的技术： web标准( Standards-Based Presentation )XHTML+CSS的表示, 使用 DOM( Document Object Model )进行动态显示及交互, 使用 XML 和 XSLT 进行数据交换及相关操作, 使用 XMLHttpRequest 进行异步数据查询、检索。

简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端 的集合
AJAX优点
1.Ajax在本质上是一个浏览器端的技术
2.Ajax技术之主要目的在于局部交换客户端及服务器间之数据
3.这个技术的主角XMLHttpRequest 的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)
4.与服务器之间的沟通，完全是透过Javascript 来实行
5.使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序
6.AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦

XMLHttpRequest对象
1.Ajax应用程序的核心就是它。
2.XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。
3.简而言之：它可以异步从服务器端获取txt或者xml数据

创建XMLHttpRequest对象
使用XMLHttpRequest对象按照下面模式，可以同步地XMLHttpRequest对象：
1.创建对象； - new (叫助手过来)
2.创建请求； - open (告诉他要去做的事情)
3.发送请求； - send (去吧)

先来创建XMLHttpRequest对象
IE7及以上、谷歌、Firefox、safari和Opera中创建该对象的JavaScript代码为：
var xhr = new XMLHttpRequest();
在IE5/6中代码为：
var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
注意，JavaScript区分大小写。
为XMLHttpRequest对象设置请求参数

GET方式
1.设置参数：xhr.open(“GET”, “GetAreasByAjax.ashx?isAjax=1”, true);
2.GET方式请求可以设置浏览器不使用缓存：xhr.setRequestHeader(“If-Modified-Since”, “0”);
3.发送: xhr.send(null);//GET方式

POST方式
1.设置参数：xhr.open(“POST”, “GetAreasByAjax.aspx”, true);
2.添加请求头：xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
3.发送：xhr.send(“isAjax=1&na=123”);//POST方式

设置回调函数
异步使用XMLHttpRequest对象
异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件。
使用模式应该是： 1. 创建该对象；-new 1. 设置readystatechange事件触发一个回调函数; -onreadystatechagne 1. 打开请求；-open 1. 发送请求；-send

注：在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)。

• 如果没有准备好，隔一段时间再次检查。因为数据没有下载完时，我们无法使用它的属性和方法。
• •如果已经准备好，就继续往下执行；

XMLHttpRequest常用方法

编写回调函数
1.在xhr.send之前添加设置回调函数代码： xhr.onreadystatechange = watching;
2. 回调函数 function watching() {if (xhr.readyState == 4) {if (xhr.status == 200) {var msg = xhr.responseText; //服务器返回的字符串 } else alert(“服务器错误!” + ajaxH.status);} }

异步对象常用属性

异步对象readyState属性

readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。

1. 未初始化。对象已经创建，但还未初始化，即还没调用open方法；
2. 已打开。对象已经创建并初始化，但还未调用send方法；
3. 已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
4. 正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
5. 已加载。所有数据接收完毕

常见错误
1.AJAX请求服务器时如果服务器出错了怎么办？
2.编程常见错误

XMLHttpRequest大小写不正确；

多写了对圆括号：正确：xHRObject.onreadystatechange =getData; 错误：xHRObject.onreadystatechange =getData();

必须弄清楚，在JavaScript中： 函数名后如果有圆括号，意思就是将函数的返回值赋给等号左边的变量；

没有圆括号，是将函数本身赋给等号前的变量。