原生ajax原理及使用方法

最新推荐文章于 2023-07-03 10:09:42 发布

奔跑吧、GZB

最新推荐文章于 2023-07-03 10:09:42 发布

阅读量1.4k

点赞数

一、什么是Ajax

1、Ajax的全称是Asynchronous JavaScript and XML，即异步JavaScript+XML。

2、在Ajax出现之前，更新页面内容必须刷新或者跳转页面，这在某些时候很不方便，于是ajax出现了，使得一个页面可以动态的获取数据，然后将数据渲染在页面上

3、它依赖的是现有的CSS/HTML/Javascript，其中最核心的依赖是浏览器提供的XMLHttpRequest对象。这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口，使得页面可以使用这个对象发出HTTP请求与接收HTTP响应，这样就可以动态的获取数据，实现在页面不刷新的情况下和服务端进行数据交互。

【补充】Ajax和XMLHttpRequest 两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。

二、怎么实现在页面不刷新的情况下和服务端进行数据交互?
1、XMLHttpRequest对象
2、fecth（暂不讨论）

XMLHttpRequest对象

为了便于我们理解怎么使用XMLHttpRequest对象实现在页面不刷新的情况下和服务端进行数据交互，我们先来看下面的代码。

<script>
  var xhr = new XMLHttpRequest()  //创建一个对象
  xhr.open('GET','/helloAjax.json',false)  //设置ajax，.open()方法里面的三个参数分别是：要发送的请求类型、请求的url、表示是否异步发送请求的布尔值
  xhr.send()  //发出请求
  var data = xhr.responseText  //当请求到来时，读取请求中的数据
  console.log(data)  //输出
</script>

这样就是一个使用XMLHttpRequest对象发送的Ajax请求了，现在我们来分析分析这段代码。
首先，XMLHttpRequest构造函数通过new的方式构造一个XHR对象，并将这个对象赋值给xhr（可取任意名字）
然后，调用XMLHttpRequest对象的方法open与send。

XMLHttpRequest对象的两个重要方法

调用send方法之后请求被发往服务器，由于这次请求是同步的，JS代码会在xhr.send()这个步骤暂停掉，一直等到服务器根据请求生成响应（Response），传回给XHR对象，再继续执行。
最后，在收到响应后相应数据会填充到XHR对象的属性。有四个相关属性会被填充：
1、responseText——从服务器进程作为响应主体被返回的文本。
2、responseXML——从服务器进程返回的DOM兼容的文档数据对象。
3、status——响应的HTTP状态。即从服务器返回的数字代码，如404（未找到）和200（已就绪）。
4、statusText——HTTP状态的说明。伴随状态码的字符串信息。

但多数情况下，我们还是要发送异步请求，才能让JavaScript继续执行而不必等待响应。为了更好的理解ajax发送异步请求，我们来看以下代码

   <script>
        var xhr = new XMLHttpRequest()
        //请求响应过程的当前活动阶段
        xhr.onreadystatechange = function(){
            console.log('readyState:',xhr.readyState)
        }
        xhr.open('GET','hello.json',true)
        xhr.send()
        //监听请求状态
        xhr.onload = function(){             //onload相当于readyState=4
            console.log(xhr.status)
            if((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304){
                console.log(xhr.responseText)
            }else{
                console.log(error)
            }
        }
    </script>

上述代码中，XHR对象的readyState属性，表示请求响应过程的当前活动阶段。该属性可取的值如下：