新手学js之——学习ajax

最新推荐文章于 2022-02-22 14:44:58 发布

东东东雷

最新推荐文章于 2022-02-22 14:44:58 发布

阅读量609

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/u011845742/article/details/42150385

javascript 专栏收录该内容

2 篇文章

订阅专栏

AJAX在JavaScript中用于实现局部刷新，通过XMLHttpRequest对象进行异步通信，避免页面刷新，减少时间延迟。主要涉及open()、readyState、status、send()等方法。学习AJAX通常包括创建XMLHttpRequest对象、设定回调函数、设置请求属性和发送请求四个步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

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