新手学js之——学习ajax

来源：互联网发布：行业研究数据来源编辑：程序博客网时间：2024/06/01 19:58

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）.

在 Javascript 中局部刷新 ajax 是一个亮点的，局部刷新是不刷新界面的情况下，我们可以不用提交的情况下直接与后台进行通信，所以这就大大减少后台数据的访问，减少时间延迟，特别是后台数据信息很大的话，时间延迟上会是一个需要极其注意的因素。

好吧，先介绍一下几点：

1、ajax 是使用 XMLHttpRequest 进行异步通讯的，XmlHttpRequest 使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

所以首先要获得我们要获得 XMLHttpRequest 对象，又因为由于浏览器内核的不同获得 XMLHttpRequest 对象的。

if (window.XMLHttpRequest)  {// code for all new browsers  xmlhttp=new XMLHttpRequest();  }else if (window.ActiveXObject)  {// code for IE5 and IE6  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }

XMLHttpRequest 主要方法有：

xmlHttp.open(“method”,"url"，true); //建立连接调用服务器。

xmlHttp.onreadystatechange = ajaxCallBack; //状态改变即会触发事件处理器（readyState）

xmlHttp.readyState //请求状态。5个状态：0—未初始化；1—正在加载；2—已加载；3—交互中；4—完成

xmlHttp.status //服务器的HTTP状态码（如：404 = "文件末找到" 、200 ="成功" ，等等）

send(content) //向服务器发送请求

xmlHttp.responsetext //服务器的HTTP状态码（如：404 = "文件末找到" 、200 ="成功" ，等等）

…………

2、步骤：

（1）创建XMLHttpRequest 对象实例；

（2）设定XMLHttpRequest 对象的回调函数，利用 xmlHttp.onreadystatechange = ajaxCallBack；（其中 ajaxCallBack 方法是回调函数）；

（3）设定请求属性：用 open方法设定HTTP 方法（get/post）,访问的URL，

（4）将请求发动给服务器。利用send（）方法。

3、实例：

js 代码：

<script type="text/javascript">        var xmlhttp;        function getAjaxHttpRequest(){            if (window.XMLHttpRequest) {                xmlhttp=new XMLHttpRequest();            } else  {                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");            }            return xmlhttp;        }

        function ajaxCallback(){            if(xmlhttp.readyState == 4){                if(xmlhttp.status == 200){                    alert("I am coming！");                }            }        }        function do() {            var xmlhttp=getAjaxHttpRequest();            if(null != xmlhttp){                xmlhttp.open("GET", "http://localhost:8080/test", true);                xmlhttp.onreadystatechange = ajaxCallback;                xmlhttp.send(null);            }        }    </script>

这就是我浅显的见识，在这抛砖引玉，希望大神指教……

0 0