JavaScript前后端数据交互工具ajax使用教程

目录

• 1. 介绍
• 1.1定义
• 1.2传统请求的问题
• 1.3Ajax请求与传统请求的区别
• 1.4应用场景
• 2.原生ajax用法
• 2.1ajax的基础语法
• 2.2ajax提交数据
• 3.jquery的ajax
• 3.1基本用法
• 3.2jquery的ajax交互简化方法
• 4.ajax原理说明

1. 介绍

1.1定义

Ajax(Asynchronous Javascript And XML) 是一种在无需重新加载整个网页的情况下，能够更新部分 网页的技术。

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

1.2传统请求的问题

浏览器地址栏发送请求，是同步的（阻塞代码运行），当服务器很忙碌的时候会卡顿（等待），就造成 了资源浪费

1.3Ajax请求与传统请求的区别

ajax数据交互的优点是 在请求数据的时候 不会阻塞后续js代码的执行

带有ajax代码的js代码的执行顺序

1.从上到下执行

2.遇到ajax代码后 先发送请求

3.在等待服务器响应数据的时间段内 继续向下执行其他js代码

4.等到服务器数据响应回来 再执行渲染数据的代码

1.4应用场景

但凡遇到动态渲染的效果 我们都应该使用ajax

2.原生ajax用法

2.1ajax的基础语法

本质上ajax其实是es5中提供的一个构造函数——XMLHttpRequest

ajax实现前后端数据交互的步骤如下

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接
ajax.open("请求方式"，"服务器url地址");
//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
ajax.send();
//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{
    //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
    if(ajax.readyState==4){
        if(ajax.status==200||ajax.status==304){
            console.log(ajax.responseText)
        }
        else{
            console.log("请求失败")
        }
    }
}

ajax 的 通信状态码/生命周期

ajax的通信状态码/生命周期有五个 代表的含义 各不相同

分别是

0：请求未初始化（ajax对象还没有声明出来）

1：已建立连接（ajax对象调用了open）

2：已发送请求（ajax对象调用了send）

3：服务器接收到请求并正在处理

4：服务器已响应数据

随着ajax数据交互的一步步推荐 通信状态码/生命周期 会自动发生变化

每当通信状态码/生命周期 发生变化 就会触发一次onreadystatechange事件

在ajax中 我们可以通过ajax对象的一个属性 readyState 来获取通信状态码/生命周期

ajax对象.readyState

我们也可以通过ajax对象的一个属性 responseText 来获取响应数据

ajax对象.responseText

我们还可以通过ajax对象的一个属性 status 来获取响应状态码

ajax对象.status

2.2ajax提交数据

在不同的请求方式下 请求提交数据的写法 也不同 我们主要了解一下 get 和 post两种请求方式的提交数据的写法

get

get请求提交数据 是在地址后面 添加 "?键名=键值&键名=键值&..."

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接  
//get请求提交数据 提交在地址后面
ajax.open("get"，"服务器url地址?键名=键值&键名=键值&...");
//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
ajax.send();
//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{
    //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
    if(ajax.readyState==4){
        if(ajax.status==200||ajax.status==304){
            console.log(ajax.responseText)
        }
        else{
            console.log("请求失败")
        }
    }
}

post

post请求提交数据 是写在 send方法中 将要提交的数据作为send方法的实参 传入

post请求在提交之前 需要单独设置请求头 使用ajax对象的setRequestHeader方法 就可以设置请求头了

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接  
//get请求提交数据 提交在地址后面
ajax.open("post"，"服务器url地址?键名=键值&键名=键值&...");
//设置请求头
ajax.setRequestHeader("content-type"，"application/x-www-form-urlencoded"/"application/json")
//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
//将要提交的数据 作为实参 传入send方法中
ajax.send("键名=键值&键名=键值&..."/JSON.stringify({}));
//注意：如果设置为 application/json 提交的数据 必须是一个对象格式的json字符串
//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{
    //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
    if(ajax.readyState==4){
        if(ajax.status==200||ajax.status==304){
            console.log(ajax.responseText)
        }
        else{
            console.log("请求失败")
        }
    }
}

在不提交数据的时候的 post请求 即使不设置请求头 也不会出问题 但是我们一般为了语义和提高容错率，都会选择设置请求头。

3.jquery的ajax

3.1基本用法

jquery的ajax 是 $的一个方法——ajax 调用这个方法 并传参 即可实现ajax数据交互

$(()=>{
    //调用ajax方法 实现数据交互
    $.ajax({
        url:"服务器url地址"，//必传项
        type:"请求方式",//可选项 默认值为get
        dataType:"数据交互的格式"//可选项 默认值为json 另外还可以选择 xml text jsonp
        data:{},//请求提交的数据 可选项 默认不提交数据  如果想提交 在对象中 写入属性即可提交
        timeout:数字，//超时时间 可选项 默认为无限 如果设置了具体的超时时间 则会在请求发送后 超过超时                     时间还没接收到响应数据的时候  停止请求 并报错404   单位为ms
        beforeSend(){
            //这个方法函数 会在ajax发送请求前 执行
        }，
        success(res){
            //这个方法函数 会在ajax发送请求 并成功接收到响应数据的时候 执行 形参会接收到响应数据
        }，
        error(err){
            //这个方法函数 会在ajax接收响应数据失败的时候执行 形参会接收到 失败信息
        }，
        complete(){
            //这个方法函数 会在ajax交互完成的时候 执行
        }
    })
})

注意：在实参对象中 四个方法 理论上都可以不传 但是success在实际开发中必传 因为success是用来接收响应数据的

3.2jquery的ajax交互简化方法

get

用法：$.get("url地址?键值对&键值对...",(res)=>{ res形参用来接收响应数据 })

post

用法：$.post(url地址,{要提交的数据},(res)=>{ res形参用来接收响应数据 })

4.ajax原理说明

ajax的数据交互方式 对比 传统的输入地址的交互方法 最大的优点是

是不阻塞后续代码

在等待响应数据的时间段内 会继续向下执行后续js代码

这个优点的原理 来源于 js的同步异步代码的区分和执行顺序

js同步异步代码的执行顺序

js代码从上到下执行

如果遇到同步代码 就直接执行

如果遇到异步代码 会先存入 任务队列 之后继续向下执行

直到所有同步代码 都执行完了 再去任务队列中 将异步代码 按照顺序 依次取出并执行

js中同步代码和异步代码的分类

异步代码：事件、定时器、ajax

同步代码：除了异步之外 都是同步

ajax代码 为什么能不阻塞后续js代码的执行

//1.创建 ajax交互对象 通过XMLHTTPRequest来实例化出来
let ajax = new XMLHttpRequest();//同步代码
//2.建立前端和服务器之间的连接 ajax对象有一个方法 open 调用即可建立连接
ajax.open("请求方式"，"服务器url地址");//同步代码
//3.发送请求 ajax对象有一个方法 send 调用即可发送请求
ajax.send();//同步代码
//4.接收服务器响应数据  ajax中是通过ajax对象的一个事件——onreadystatechange(通信状态码/生命周期 改变事件)
ajax.onreadystatechange = ()=>{//ajax的异步 体现在事件上 事件是异步代码
    //5.接收响应数据 当通信状态码为4的时候 就可以获取到响应数据了
    if(ajax.readyState==4){
        if(ajax.status==200||ajax.status==304){
            console.log(ajax.responseText)
        }
        else{
            console.log("请求失败")
        }
    }
}

到此这篇关于JavaScript前后端数据交互工具ajax使用教程的文章就介绍到这了,更多相关JS ajax内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！