前后端交互：Ajax

..... .

已于 2023-06-19 10:11:29 修改

阅读量115

点赞数 2

文章标签：前端 javascript java

于 2023-06-16 10:48:01 首次发布

本文链接：https://blog.csdn.net/flyCatdog/article/details/131241942

版权

Ajax是一种用于实现网页异步更新的技术，它通过JavaScript的XMLHttpRequest对象与服务器进行数据交换。Ajax允许在不刷新整个页面的情况下获取并更新内容，支持多种数据格式如JSON、XML等。然而，它也存在一些缺点，如破坏浏览器历史记录和影响SEO。文章介绍了Ajax的基本使用步骤和封装方法。

摘要由CSDN通过智能技术生成

Ajax:连接前后端的重要手段，是前后端沟通的桥梁，异步的js和服务器的数据

A：Asynchronous
j：javascript
a：and
x：服务端的数据
作用：连接前后端，进行数据交互

Ajax的组成：

异步的js：事件
载体对象：XMLHttpRequest
服务端的数据：json，xml，html，css，js，txt，jpg，..........
同步的js：数据解析

Ajax的特点：

可以异步获取服务端数据（在不中断浏览器其他任务的情况下获取数据）

在当前页面，无刷新加载新数据
无刷新加载的新数据，不会被浏览器的历史记录记录

破坏了浏览器的前后后退按钮
提升页面的首屏加载速度
破坏了搜索引擎的搜索优化

Ajax的使用：

创建载体对象

const xhr = new XMLHttpRequest()
配置信息：get或post，地址，同步或异步

xhr.open("get","url")
发送请求

xhr.send()

监听状态

xhr.onload = function(){
    //预制成功或失败后要做的事情
    if(xhr.status === 200){
        console.log(xhr.responseText);
    }else{
        console.log(xhr.status)
    }
}

Ajax的封装：

//通过传参决定本次功能使用get还是post

//1.处理默认（可选）参数
function ajax({method = "get",success,data = {},url,error}={}){
    //2.处理必传函数
    if(!success){
        console.error("缺少必穿配置success")
        return;
    }
    if(!url){
        console.error("缺少必传配置url")
        return;
    }
    //3.解析对象，解析成前端向后端发送数据的格式：key=val & key=val
    let str = "";
    for(let key in data){
        str += `&{key}=&{data[key]}&`;
    }
    //4.如果是get请求，将数据拼接到url
    if(method==="get"){
        url += "?" + str.slice(0,-1);
    }
    //5.开启ajax
    const xhr = new XHLHttpRequest();
    xhr.open(method,url,ture);
    if(method==="get"){
        xhr.send();
    }else{
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(str.slice(0,-1))
    }
    xhr.onload = function(){
        if(xhr.status === 200){
            success(xhr.responseText);
        }else{
            error && error(xhr.status);
        }
    }
}