Ajax基础

最新推荐文章于 2024-08-25 09:57:22 发布

双星。

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/weixin_44703582/article/details/124758386

版权

文章目录

4.XMLHttpRequest Level2新功能

五、封装Ajax函数

总结

一、Ajax是什么？

Ajax的全称是Asynchronous Javascript And XML(异步JavaScript和XML)。
通俗的理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax。能让我们轻松实现网页与服务器之间的数据交互。

二、URL地址组成

URL(UniformResourceLocator)中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置，浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。

三、jQuery发起Ajax

1.$.get

$.get() 专门发起get请求
$.get(url,[data],[callback])
url 必填 string类要请求的资源地址
data 非必填 object类请求资源期间要携带的参数
callback 非必填 function类请求成功时的回调函数

2.$.post

$.post() 专门发起post请求
$.post(url,[data],[callback])
url 必填 string类提交数据的地址
data 非必填 object类要提交的数据
callback 非必填 function类数据提交成功时的回调函数

3.$.ajax

$.ajax({
   type：' ', //请求方式如get或post
   url：' ', //请求地址
   data：{} //请求携带的数据
   success：function(res) { } //请求成功之后的回调函数
})

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button id="btn">发起不带参数的get请求</button>
    <button id="btn1">发起带参数的get请求</button>
    <script>
        $(function() {
            $('#btn').on('click', function() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
                    console.log(res);
                })
            });
            $('#btn1').on('click', function() {
                $.get('http://www.liulongbin.top:3006/api/getbooks', {
                    id: 1
                }, function(res) {
                    console.log(res);
                })
            })
        })
    </script>
</body>

</html>

四、XMLHttpRequest

1.readyState属性

值状态       描述
0   UNSENT xhr对象已被创建，但尚未调用open方法
1   OPENED open()方法已经被调用
2   HEADERS_RECEIVED send()方法已被调用，响应头也已经被接收
3   LOADING 数据接收中，此时response属性中已经包含部分数据
4   DONE      Ajax请求完成，这意味着数据传输已经彻底完成或失败

2.查询字符串

定义：查询字符串是指在URL的末尾加上用于向服务器发送信息的字符串(变量).
格式：将英文的?放在URL的末尾，然后再加上参数=值，项加上多个参数的话，使用&符号进行分隔。以这个形式，可以将想要发送给服务器的数据添加到URL中

无论使用$.ajax(),还是使用$.get(),又或者直接使用xhr对象发起GET请求，当需要携带参数的时候，本质上，都是直接将参数以查询字符串的形式，追加到URL地址的后面，发送到服务器。

3.GET和POST

GET请求：

1、创建xhr对象
2、调用xhr.open()函数
3、调用xhr.send()函数
4、监听xhr.onreadystatechange事件

POST请求：

1、创建xhr对象
2、调用xhr.open()函数
3、设置Content-Type属性(固定写法)
4、调用xhr.send()函数，同时指定要发送的数据
5、监听xhr.onreadystatechange事件

4.XMLHttpRequest Level2新功能

1、可以设置HTTP请求的时限 timeout
2、可以使用FormData对象管理表单数据
3、可以上传文件 files
4、可以获得数据传输的进度信息（xhr.upload.onprogress显示文件上传进度）

五、封装Ajax函数

itheima()函数是我们自定义的Ajax函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性：
method 请求的类型
url 请求的URL地址
data 请求携带的数据
success 请求成功之后的回调函数

总结

本文简单的介绍了一下Ajax的基本功能，之后还有许多功能需要不断探索。

双星。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax基础

文章目录一、Ajax是什么？二、URL地址组成三、jQuery发起Ajax1.$.get2.$.post3.$.ajax四、XMLHttpRequest1.readyState属性2.查询字符串3.GET和POST4.XMLHttpRequest Level2新功能五、封装Ajax函数总结一、Ajax是什么？Ajax的全称是Asynchronous Javascript And XML(异步JavaScript和XML)...
复制链接

扫一扫