Ajax学习笔记

小刘私坊

已于 2023-05-09 20:40:28 修改

阅读量702

点赞数

分类专栏：前端文章标签： ajax javascript 学习

于 2023-05-02 10:39:53 首次发布

本文链接：https://blog.csdn.net/Python_Ghost/article/details/130461875

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

AJAX：

Ajax是浏览器中的技术；用来实现客户端网页请求服务器的数据

Asynchronous JavaScript XML简称ajax

操作服务器上的数据除了要使用 URL地址，还要指定 请求方式

请求方式：

使用ajax请求数据的五种方式：

 POST           向服务器增加数据
 GET            从服务器获取数据
 DELETE         删除服务器的数据
 PUT            更新服务器上的数据(侧重于完整的更新，更新用户信息)
 PATCH          更新服务器上的数据（侧重于部分更新）

ajax原理：

通过XMLHTTPRequest对象向服务器发异步请求

从服务器获取数据， 【关键的一步】

然后用JavaScript来操作DOM并更新页码

XMLHTTPRequest是ajax的核心机制，是一种支持异步请求的方式

同步和异步：

javascript是一门单线程执行的编程语言，也就是同一个时间只能做一件事情

问题: 前一个任务非常耗时，后续的任务就不得不一直等待，导致 程序假死问题

JavaScript把执行的任务分为两类：

同步任务：

又叫做非耗时的任务，在主线程上排队执行的任务

只有前一个任务执行完毕，才能执行后一个任务

异步任务：

叫做耗时任务，由JavaScript 委托给宿主环境进行执行

当异步任务执行完毕后，会通知JavaScript 主线程执行异步任务的回调函数

同步任务和异步任务执行过程：

主线程执行同步任务遇到异步任务会将其委托给宿主环境运行，完毕后的回调函数会放到任务队列的回调函数依次执行

同步任务由JavaScript主线程按次序执行
异步任务委托给宿主环境执行
已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行
JavaScript主线程的执行栈被清空后，会读取任务队列中的回调函数依次执行
主线程不断重复以上4个步骤

在这里插入图片描述

客户端和服务端：

服务端：

上网过程中，负责存放和对外提供资源的电脑，叫做服务器

客户端：

上网过程中，用来获取和消费资源的电脑，叫做客户端

在这里插入图片描述

URL地址：

URL是统一资源定位符，标识互联网上资源的唯一存放位置

浏览器可以通过URL地址，能正确的定位资源的存放位置，从而成功的访问对应的资源

http://www.baidu.com
http://www.taobao.com

URL地址由三部分组成：

客户端和服务端之间的通信协议
存有该资源的服务器名称
资源在服务器上具体的存放位置

在这里插入图片描述

客户端和服务端之间的通信位置：

在这里插入图片描述

服务器对外提供了哪些资源：

文字内容 image图片 Audio音频 Video视频

网页中的数据，也是服务器对外提供的资源

网页如何请求数据：

在这里插入图片描述

数据请求方式：

客户端请求服务器时，请求方式有很多，最常用两种请求方式是get和post请求

get请求通常用于获取服务端资源，（向服务器要数据）

根据url地址，从服务器获取HTML文件，css文件，js文件，图片文件，数据资源

post请求用于向服务器提交数据（往服务器发送资源）

登录时向服务器提交登录信息，注册时向服务器提交注册信息，添加用户时向服务器提交用户信息

什么是Ajax：

全称 AsynchronousJavaScript+XML（异步JavaScript和XML）

在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax

为什么要学Ajax：

Ajax可以让我们轻松的实现 网页和服务器之间的数据交互

XMLHttpResponse的使用：

XMLHttpRequest是浏览器提供的js对象，通过它，可以请求服务器上的数据资源

使用xhr发起get请求：

创建xhr对象
调用xhr.open函数
调用xhr.send函数
监听xhr.onreadystatechange事件

<script>
    // 1创建xhr对象
    var xhr = new XMLHttpRequest()
    // 2调用open函数
    xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')
    // 3 调用send函数
    xhr.send()
    // 4 监听onreadystatechange事件
    xhr.onreadystatechange = function () {
    // 监听xhr的请求状态  服务器响应的状态
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}
</script>

xhr的readystate属性：

XMLHttpRequest对象的readyState属性，用来表示当前Ajax请求所处的状态，每个Ajax请求必然处于以下状态中的一个

0  UNSEND   XMLHttpRequest对象创建，但尚未调用open方法
1  OPENED   open方法已经被调用
2  HEADERS_RECEIVED  send方法已经被调用，响应头已经被接收
3   LOADING   数据接收中，此时response属性中已经包含部分数据
4    DONE    Ajax请求完成，数据传播已经彻底完成或失败

使用xhr发起带参数的get请求：

xhr对象发起带参数的GET请求时，只需在调用xhr.open期间，为URL地址指定参数即可

xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=1')

这种在URL地址后面拼接的参数，叫做查询字符串

查询字符串：

查询字符串指在URL的末尾加上用于向服务器发送信息的字符串(变量)

格式：将英文的?放在URL的末尾，然后再加上参数=值，想加上多个参数的话，使用**&**进行分隔。以这个形式，可以将想要发送给服务器的数据添加到URL中

//带有多个参数的URL地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
//带有1个参数的URL地址
http://www.liulongbin.top:3006/api/getbooks?id=1
//不带参数
http://www.liulongbin.top:3006/api/getbooks

GET请求携带参数的本质：

xhr对象发起GET请求，当需要携带参数的时候，本质上，就是直接将参数以查询字符串的形式，追加到URL地址的后面，发送到服务器的

URL编码：

URL地址中，只允许出现英文相关的字母，标点符号，数字，因此，在URL地址中不允许出现中文字符

如果URL中需要包含中文这样的字符，则必须对中文字符进行编码

URL编码的规则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示哪些不安全的字符

用英文字符去表示非英文字符

http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记

//经过URL编码之后，URL地址变成了如下格式
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=%E8%A5%BF%E6%B8%B8%E8%AE%B0

浏览器会自动对URL地址进行编码操作，大多数情况下，不需要关心URL地址的编码和解码操作

使用xhr发起post请求：

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

<script>
    // 1 创建xhr对象
    var xhr = new XMLHttpRequest()
    // 2 调用open
    xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
    // 3设置Content-Type属性 固定写法
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 4 调用send 同时将数据以查询字符串的形式，提交给服务器
    xhr.send('bookname=js编程&author=丁鹿学堂学员&publisher=北京出版社')
    // 5监听onreadystatechange事件
    xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}
</script>

数据交换格式：

服务器端与客户端之间进行数据传输与交换的格式

经常交换的格式JSON

封装请求：

// 封装请求
/* 
method  请求类型
url  请求地址
data 传递的参数   查询字符串
success 回调函数 请求成功之后做的事情
options={
  method:'post',
  url:"xxxxxx",
  data:{name:xx,age:xxsx},
  success:function(res){

  }
}
*/

function resolveData(data) {
    // {name:xx,age:xxsx},     name=xxxx&age=xxsx
    var arr = []
    for (var k in data) {
        var str = k + '=' + data[k]
        arr.push(str)
    }
    return arr.join('&')
}

function myAjax(options) {
    var xhr = new XMLHttpRequest()

    // 把外界传递过来的参数对象  转换为查询字符串
    var qs = resolveData(options.data)

    //判断请求类型
    if (options.method.toUpperCase() === 'GET') {
        xhr.open(options.method, options.url + '?' + qs)
        xhr.send()
    } else {
        xhr.open(options.method, options.url)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(qs)
    }

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 服务器响应回来的结果
            var s = JSON.parse(xhr.responseText)
            // 通过回调函数 把结果返回出去
            options.success && options.success(s)
        }
    }
}

调用：

myAjax({
    method: 'GET',
    url: 'http://www.liulongbin.top:3006/api/getbooks',
    data: { id: 1, bookname: '西游记' },
    success: function (res) {
        console.log(res)
    },
})

myAjax({
    method: 'post',
    url: 'http://www.liulongbin.top:3006/api/addbook',
    data: { bookname: 'js图书', author: 'hello', publisher: '北京出版社' },
    success: function (res) {
        console.log(res)
    },
})

{ id: 1, bookname: ‘西游记’ },
success: function (res) {
console.log(res)
},
})

myAjax({
method: ‘post’,
url: ‘http://www.liulongbin.top:3006/api/addbook’,
data: { bookname: ‘js图书’, author: ‘hello’, publisher: ‘北京出版社’ },
success: function (res) {
console.log(res)
},
})