笔记前端需要了解的ajax_前端ajax 了解-优快云博客

本文链接：https://blog.youkuaiyun.com/ygx_work/article/details/106177787

本文深入讲解AJAX技术，介绍其工作原理，包括如何通过XMLHttpRequest对象实现局部刷新，减轻服务器负担，提升用户体验。同时探讨AJAX的优缺点，如支持程度、安全性及调试难度。

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

ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。（异步无刷新）

优点：

减轻服务器的负担,按需取数据,最大程度的减少冗余请求
局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离

缺点：

ajax不支持浏览器back按钮。
安全问题 AJAX暴露了与服务器交互的细节。
对搜索引擎的支持比较弱。
破坏了程序的异常机制。
不容易调试。

AJAX的工作原理：

创建ajax对象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
判断数据传输方式(GET/POST)
打开链接 open()
发送 send()
当ajax对象完成第四步（onreadystatechange）数据接收完成，判断http响应状态（status）200-300之间或者304（缓存）执行回调函数

 //将值发送到后台比较，使用ajax发送到后台
	//1.创建对象 分为IE和dome
     let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
     //console.log(xhr);
   //2.打开对象
    //xhr.open(请求方式，请求地址，布尔值) 布尔值代表（同步：flase；异步：true）默认是异步
    xhr.open('post','/verifyRegister',true);
   //2.5 如果是post请求需要设置请求头  如果是get请求不需要
    //xhr.setRequestHeader(`content-type`,`application/json`);
    xhr.setRequestHeader(`content-type`,`application/x-www-form-urlencoded`);//解析格式，告诉后端的解析方式
   //3.发送数据
    //xhr.send()是post请求，send参数 就是发送给后台的数据 get请求没有参数 get请求发送给后台的数据需要拼接在open的地址后面
    xhr.send(`userName=${value}`);
   //4.对象接收服务器响应
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4 && xhr.status === 200){//响应成功
             console.log(xhr.responseText); //接收后台传输的参数
             idtishi.innerText = xhr.responseText;
             	if(idtishi.innerText === '用户名可以注册'){
                        state.user = true;
                    }
                }
            }