前后端交互——Ajax

最新推荐文章于 2025-06-14 16:29:08 发布

小手冰凉的007

最新推荐文章于 2025-06-14 16:29:08 发布

阅读量913

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： js ajax

本文链接：https://blog.youkuaiyun.com/weixin_48065262/article/details/112709712

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

Ajax是前后端交互的重要手段，也是前后端交互的重要桥梁。

Ajax的组成：

ajax不是单一的技术，是一组技术；
异步的js，数据请求的异步（以事件的形式体现出异步）
XMLGHTTPRequest对象，连接前后端的载体，承载了前后端交互的数据和其他信息
其他js负责解析和处理使用数据

Ajax的特点：

不刷新页面加载数据
不会产生历史记录，破坏了浏览器的前进和后退功能
提升了页面的初始打开速度，用户体验极佳
搜索引擎无法检索由js引起的数据变化，导致破坏了SEO
提升了web页面的性能
减轻了服务器的带宽

Ajax的运行过程：

准备页面请求，创建XMLHTTPRequest()对象

var xhr = new XMLHTTPRequest();

使用XMLHTTPRequest对象的open()和send()方法发送资源请求给服务器；

xhr.open("method",url,async);
xhr.send();

请求接受
请求处理中
请求完成，且响应已就绪
可以使用onreadystatechange,监听状态，使用XMLHTTPRequest的responseText或者XML属性获得服务器的响应

onreadyrequest = function(){
if(xhr.readyState===4&&xhr.Status===200){
console.log(xhr.responseText)
}

get和post区别

get:

get只能传输2-8k左右的数据；
数据拼接在url上
get为明文传输

open("post",ulr+"?"+"传输的数据")

post:

post上传没有限制
post传输的数据放在send()里
具有加密性，相对安全

open("post",url);
setRequestHeader("Content-type","application/x-www-from-urlencoded");
send("post要传输的数据")

post传输数据之前需要设置请求头，只能写在open()和send()之前，在其他地方无效

Ajax常见的状态码：

100~199 ：表示连接继续
200~299：表示意义上的成功
300~399：表示重定向
400~499：表示客户端错误
500~599: 表示各种服务端错误

同步-异步-程序-进程-线程

异步：多个程序同时执行；
同步：每个程序不同时进行；
程序：功能；
进程：一个功能的开始执行到执行结束的过程；
线程：一个功能在执行过程中的每一个分支，多线程异步执行，线程越多执行速度越快，但也需要消耗大量的性能；
JavaScript是一门单线程异步的编程语言
js中的宏任务和微任务：js单线程，通知只能执行一个程序，当宏任务上的程序执行结束才会开始执行微任务
js中的异步：延时器、事件、Ajax

Ajax—get触发浏览器的缓存

浏览器缓存：浏览器把一个已经请求过的web资源拷贝一份副本存储在浏览器中，当再次访问这个url地址的时候，如果网页没有更新，就不会再次请求下载网页，而是直接使用本地缓存的网页
如何清除缓存
利用url后的?后的数据发送，标记不同的地址，但请求同样的资源
可以用拼接时间戳

  url = url + "?" + str + "__clear__="+Date.now();

get的ajax的封装：


    function ajaxGet(url, callback, data){
        // 1. 处理默认参数
        data = data || {};
        // 2. 将data解析成"字段名=字段值&字段名=字段值"格式
        var str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }
        // 3. 拼接到url
        url = url + "?" + str.slice(0,str.length-1);

        // 4. ajax的请求过程
        let xhr = new XMLHttpRequest();
        xhr.open("get",url);
        xhr.send();
        xhr.addEventListener("load",function(){
            if(xhr.status === 200){
                // 5. 请求成功之后，执行外部传入的回调函数，并将请求成功之后的数据，传参，方便外部获取数据
                callback(xhr.responseText);
            }
        })
    }

postt的ajax的封装：

 function ajaxPost(url, callback, data){
        data = data || {};
        var str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }
        let xhr = new XMLHttpRequest();
        // 1. open的第一个参数改成post
        // 2. url后拼接的数据，换到send方法内
        xhr.open("post",url);
        // 3. send执行之前，修改请求头信息的内容类型，为表单数据格式
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(str.slice(0,str.length-1));
        xhr.addEventListener("load",function(){
            if(xhr.status === 200){
                callback(xhr.responseText);
            }
        })
    }