Ajax异步传输

一，Ajax技术与原理

1.1   Ajax简介

        Ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

        AJAX 不是新的编程语言，而是一种使用现有标准的新方法(技术)。

        AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下。简而言之就是实现页面的局部刷新。

1.2   Ajax所包含的语言

        ajax并非一种新的技术，而是几种原有语言的结合体。由以下技术组合而成：

                1.使用CSS和HTML来表示。

                2.使用DOOM模型来交互和动态显示。

                3.使用XMLHttpRequest来和服务器进行异步通信。

                4.使用javascript来绑定和调用。

        Ajax的核心是XMLHttpRequest对象。

        不同的浏览器创建XMLHttpRequest对象的方法是有差异的。

        IE浏览器使用ActiveXObject, 而其他的浏览器使用名为XML HttpRequest的JavaScript内置对象

1.3 Ajax的工作原理

        Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

1.4 XMLHttpRequest对象的三个常用属性

1.onreadystatechange属性

onreadystatechange属性存有处理服务器响应的函数。

下面的代码定义一个空的函数，同时对onreadystatechange属性进行设置：

// xmlHttp  是自定义的变量

xmlHttp.onreadystatechange = function(){

//  处理服务器响应

}

2.readyState属性

readyState属性存有服务器响应的状态信息。每当readyState改变时，onreadystatechange函数就会被执行。

3.responseText属性

可以通过respone Text属性来取回由服务器返回的数据。

在代码中，我们将把时间文本框的值设置为等于reponseText;

xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4){
    document.myForm.time.value = xmlHttp.responseText;
}
}

 1.5 xmlHttprequest的方法

1.open()方法

open()有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。

xmlHttp.open('GET',"test.php",true);    

2.send()方法 

send()方法将请求送往服务器，假设HTML和PHP文件位于相同的目录，代码如下：

xmlHttp.send(null);