通俗语言理解AJAX是什么？

北~笙

于 2023-05-18 15:34:05 发布

阅读量291

点赞数 1

分类专栏：笔记计算机文章标签： ajax javascript jquery 服务器前端

本文链接：https://blog.csdn.net/qq_53679373/article/details/130739885

版权

笔记同时被 2 个专栏收录

17 篇文章 4 订阅

订阅专栏

计算机

14 篇文章 1 订阅

订阅专栏

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。博主自己认为总结起来就是四个字 : 局部刷新

一.什么是AJAX

二.为什么需要使用AJAX

三.AJAX核心：XMLHttpRequest

四.XMLHttpRequest对象的属性和方法

五.AJAX请求的一般格式

六.简单轮询请求

一.什么是AJAX

Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML

AJAX 不是新的编程语言，AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

其实总结来看的话实质是指：客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术

二.为什么需要使用AJAX

为什么我们需要使用AJAX呢，可以这样想，如果在我们的开发过程中，每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。这样操作的后果其实是很不好的，首先我们服务器的性能会有一定幅度的降低，其次在进行修改的时候，这种可能会对用户的操作界面进行打断或中断。

那么AJAX是如何实现的局部刷新呢？

三.AJAX核心：XMLHttpRequest

XMLHttpRequest对象是AJAXx中最重要的一个对象。使用Ajax更多的是编写客户端代码，而不是服务端的代码。

那么XMLHttpRequest是如何工作的呢？

传统的web前端与后端的交互中，浏览器直接访问Tomcat的Servlet来获取数据。Servlet通过转发把数据发送给浏览器。

当我们使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器，XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上【因为不是转发的方式，所以是无刷新就能够获取服务器端的数据】

四.XMLHttpRequest对象的属性和方法

常用的方法通常是open(),send(),setRequestHeader().

open()：该方法创建http请求
- 第一个参数是指定提交方式(post、get)
- 第二个参数是指定要提交的地址是哪
- 第三个参数是指定是异步还是同步(true表示异步，false表示同步)
- 第四和第五参数在http认证的时候会用到。是可选的

send(content)：发送请求给服务器
- 如果是get方式，并不需要填写参数，或填写null
- 如果是post方式，把要提交的参数写上去
setRequestHeader(String header,String value)：设置消息头（使用post方式才会使用到，get方法并不需要调用该方法）

属性具体是:

readyState：请求状态readyState一改变，回调函数被调用，它有5个状态
- 0：未初始化
- 1：open方法成功调用以后
- 2：服务器已经应答客户端的请求
- 3：交互中。Http头信息已经接收，响应数据尚未接收。
- 4：完成。数据接收完成

每次这个属性的值增加的时候，都会触发 onreadystatechange 事件。该事件用于指定当readystate状态改变时使用的操作，一般用于指定具体的回调函数。

五.AJAX请求的一般格式

<script>
    $.ajax({
        //要请求的后端地址,与后端约定好的接口
        url:'http://localhost:8081/User',
        //指定发送的方法
        type:'get',
        //后端返回的数据格式
        contentType:'application/x-www-form-urlencoded',
        //要传的参数
        data:'username=张三&password=123456',
        //请求之前的处理
        beforeSend:function(){
            //响应内容
            console.log('发送之前执行的逻辑');
        },
        //error请求失败时的回调
        error:function(){
            console.log('请求出现异常');
        },
        //success 当请求之后调用，传入返回后的数据，以及包含成功代码的字符串
        success:function(data,state){
            console.log('请求成功时调用');
            console.log('state='+state);
            console.log(data);
            //把请求回来的内容，加载到当前页的指定标签中
            $('#index-container').html(data);
            $('h3').remove;
        },
        complete:function(xhr,code){
            console.log('请求完成时调用');
            console.log(code);
        }
    })
</script>

六.简单轮询请求

什么是轮询？

　　轮询（polling）：客户端按规定时间定时向服务端发送ajax请求，服务器接到请求后马上返回响应信息并关闭连接。

　　Ajax轮询需要服务器有很快的处理速度与快速响应。

Ajax轮询原理

客户端是按照规定时间（这个时间由你设定，此处默认为1秒）像服务端发送请求，前一次请求完成后，无论有无结果返回，一秒之后下一次请求又会发出。这就叫做Ajax轮询。

<script>
$(function(){
    var code,status;
    function getResult(){
        var params = {
            code: code,
            operate: '操作TODO:',
        };
        $.ajax({
            type: 'POST',
            url: "请求地址TODO:",
            data: params,
            success: function(response) {
                console.log('成功了');
                //对成功数据的操作TODO：
                clearInterval(status);              
            },
            dataType: 'json',
            timeout: 40*1000,// 超时时间
            // 超时意味着出错了
            error: function (error) {
              console.log('失败了);
            }
 
        });
   }
 
  });
//获取code。如果code存在则调用轮询来获取数据
    if(code){
           status = setInterval(getResult, 1000);
      }
  
  </script>

博主整理了一些问题相关问题供大家参考学习

1.什么是同步请求？
同步请求是指当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码。相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态。

2.什么是异步请求？
默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。
异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

3.同步与异步的区别？
同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。
异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来。
4.AJAX 的工作原理？
客户端发送请求，请求交给xhr，xhr把请求提交给服务，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示：