Ajax编程技术

时间:2021-12-23 18:27:44

AJAX:”Asynchronous JavaScript and XML” 中文意思:异步JavaScript和XML。 指一种创建交互式网页应用的网页开发技术。

不是指一种单一的技术,而是有机地利用了一系列相关的技术: 简单理解为:JavaScript + XMLHttpRequest + CSS +服务器端 的集合.

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

XMLHttpRequest对象

Ajax应用程序的核心就是它。 XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。

简而言之:它可以异步从服务器端获取txt或者xml数据

异步请求基本步骤

使用XMLHttpRequest对象  按照下面模式,可以同步地XMLHttpRequest对象:

创建对象; - new  (叫助手过来) 创建请求; - open (告诉他要去做的事情) 发送请求; - send (去吧)

一、先来创建XMLHttpRequest对象
在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为:
 var xhr = new XMLHttpRequest();
在IE5/6中代码为:
 var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
  注意,JavaScript区分大小写。

二、为XMLHttpRequest对象设置请求参数
      1.GET方式
            1.1设置参数
            xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
        1.2GET方式请求可以设置浏览器不使用缓存xhr.setRequestHeader("If-Modified-Since", "0");
            1.3发送: xhr.send(null);//GET方式
   2.POST方式:

     1.1设置参数:xhr.open("POST", "GetAreasByAjax.aspx", true);

     1.2添加请求头:xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            1.3发送:xhr.send("isAjax=1&na=123");//POST方式

异步使用XMLHttpRequest对象
 异步使用XMLHttpRequest对象时,必须使用:onreadystatechange事件。
 使用模式应该是:
创建该对象;-new
设置readystatechange事件触发一个回调函数; -onreadystatechagne
打开请求;-open
发送请求;-send
       注:在回调函数中检查readyState属性,看数据是否准备就绪(是否等于4)。
如果没有准备好,隔一段时间再次检查。因为数据没有下载完时,我们无法使用它的属性和方法。
如果已经准备好,就继续往下执行;

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种不同的状态。
0:未初始化。new完后;
1:已打开。对象已经创建并初始化,但还未调用send方法
2:已发送。已经调用send 方法,但该对象正在等待状态码和头的返回;
3:正在接收。已经接收了部分数据,但还不能使用该对象的属性和方法,因为状态和响应头不完整;
4:已加载。所有数据接收完毕

abort 取消请求
open 需要使用多个参数,第一个设置方法属性,第二个设置目标URL,第三个指定是同步(false)还是异步(true)发送请求
send 发送请求到服务器
setRequestHeader 添加自定义HTTP头到请求
getAllResponseHeaders 获取HTTP响应头的整个列表
getResponseHeader 仅获取指定的HTTP响应头

onreadystatechange 返回或设置异步请求的事件处理程序
readyState 返回状态码:0:未初始化;1:打开;2:发送;3:正在接收;4:已加载
responseText 使用字符串返回HTTP响应
responseXML 使用XML DOM对象返回HTTP响应
status 返回HTTP状态码