Ajax的概念及jQuery中的Ajax的3种方法，模仿jQuery封装自己的Ajax函数

news/2024/4/28 4:51:13/文章来源:https://blog.csdn.net/Vest_er/article/details/127393463

一、网页中如何请求数据
- 资源的请求方式
二、Ajax
- 1、什么是Ajax
- 2、Ajax的特点
- 3、Ajax工作原理
- 4、同步与异步的区别
三、jQuery中的Ajax
- 1、$.get()函数
- 2、$.post()函数
- 3、$.ajax()函数
四、模仿jQuery封装自己的Ajax函数
- 实现效果
- 1、定义options参数选项
- 2、定义resoveData()函数处理data参数
- 3、定义myAjax()函数
- 4、判断请求类型
五、使用封装的Ajax函数发送请求

一、网页中如何请求数据

我们从浏览器看到的视频、音乐都属于资源；当然数据也是服务器对外提供的一种资源，只要是数据，都要经过请求 — 处理 — 响应的方式进行获取。

网页中请求服务端的数据需要用到XMLHttpRequest对象，简称xhr，是浏览器提供的JS成员
在这里插入图片描述

资源的请求方式

请求方式	说明	举例
get	获取服务器的资源	从腾讯上看综艺
post	向服务器提交资源	登录微信账号

二、Ajax

1、什么是Ajax

概念：Ajax（全称：Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式
注意：Ajax不是一种技术规范，只是多种技术的组合。每种技术都有其独特这处，合并在一起形成了一个功能强大的新技术。

2、Ajax的特点

特点：局部刷新，异步加载
通过与后端服务器进行少量的数据交换，Ajax可以使页面实现异步更新。这也意味着可以在不重新加载整个页面的情况下，对页面某个部分进行局部更新。

3、Ajax工作原理

客户端发送请求，请求交给xhr，xhr把请求提交给服务器，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上
在这里插入图片描述

4、同步与异步的区别

同步提交：当用户发送请求时，当前页面不能使用，服务器响应页面到客户端，响应完成之后用户采用使用页面。

异步提交：当用户发送请求时，当前页面可以使用，当异步请求的数据响应给页面，页面把数据显示出来。

三、jQuery中的Ajax

浏览器提供的xhr使用方法比较复杂，jQurey对其进行二次封装，降低使用难度(xhr详解：https://blog.csdn.net/Vest_er/article/details/127397828)
jQuery中发起Ajax请求的方法

1、$.get()函数

向服务器请求数据
语法：

$.get(url, [data], [callback])

参数名	参数类型	必选？	说明
url	sting	是	要请求的资源地址
data	object	否	请求资源要携带的参数
callback	function	否	请求成功的回调函数

2、$.post()函数

向服务器提交数据
语法（参数同$.get()函数）

$.post(url, [data], [callback])

3、$.ajax()函数

综合，可以请求也可以提交数据

语法

$.ajax({tyep:'', // 请求的方式 eg:get或posturl:'',	// 请求的url地址data:{}, // 这次请求要携带的数据sunccess:function(res){} // 请求成功之后的回调
})

四、模仿jQuery封装自己的Ajax函数

实现效果

<!-- 导入自定义的ajax函数库 -->
<script src="./MyAjax.js"></script>
<script>myAjax({methods:'请求类型',url:'请求地址',data:{请求参数对象},success:function(res){ // 成功的回调函数console.log(res); //打印数据}})
</script>

1、定义options参数选项

myAjax()函数是我们自己定义的Ajax函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性

属性名	功能
method	请求类型
url	请求的URL地址
data	请求携带的参数
success	请求成功之后的回调函数

2、定义resoveData()函数处理data参数

需要把data参数对象转化成查询字符串的格式，从而提交到服务器，因此需要提前定义resoveData函数

// 处理data参数
// @params{data}需要发送到服务器的参数
// @returns{string} 返回拼接好的查询字符串 name=zs&age=18function resoveData(data){var arr = [];for(var k in data){arr.push(k + '=' + data[k]);};return arr.join('&');
}

3、定义myAjax()函数

在myAjax()函数中，需要创建xhr对象，并监听onreadyStatechange事件

function myAjax(options){var xhr = new XMLHttpRequest();// 拼接查询字符串var qs = resoveData(options.data);// 监听请求状态改变的事件xhr.onreadystatechange = function (){if(xhr.readyState == 4 && xhr.status == 200) {// JSON字符串转化为JS对象var result = JSON.parse(xhr.responseText);options.success(result)}}
}

4、判断请求类型

toUpperCase()函数：转化为大写

if(options.methods.toUpperCase() === 'GET') { // 发起GET请求// 创建请求xhr.open(options.methods,options.url + '?' + qs);// 发送Ajax请求xhr.send();
}else if(options.methods.toUpperCase() === 'POST') {     // 发起POST请求// 创建请求xhr.open(options.methods,options.url);// 设置Content-Type属性（固定写法）xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');// 发送Ajax请求xhr.send(qs)
}

五、使用封装的Ajax函数发送请求

MyAjax.js代码

// 定义resoveData()函数处理data参数
function resoveData(data){var arr = [];for(var k in data){arr.push(k + '=' + data[k]);};return arr.join('&');
}// 定义myAjax()函数
function myAjax(options){var xhr = new XMLHttpRequest();// 拼接查询字符串var qs = resoveData(options.data);// 判断请求类型if(options.methods.toUpperCase() === 'GET') {// 发起GET请求xhr.open(options.methods,options.url + '?' + qs);xhr.send();}else if(options.methods.toUpperCase() === 'POST') {// 发起POST请求xhr.open(options.methods,options.url);xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.send(qs)}// 监听请求状态改变的事件xhr.onreadystatechange = function (){if(xhr.readyState == 4 && xhr.status == 200) {// JSON字符串转化为JS对象var result = JSON.parse(xhr.responseText);options.success(result)}}
}

index.js代码

<!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"><!-- 导入自定义的ajax函数库 --><script src="./MyAjax.js"></script><title>Document</title>
</head>
<body><script>// 发起GET请求myAjax({method:'GET',url:'http://www.liulongbin.top:3006/api/getbooks',data:{id:1},success:function(res){ // 成功的回调函数console.log(res); //打印数据}});// 发起POST请求myAjax({method:'POST',url:'http://www.liulongbin.top:3006/api/addbook',data:{bookname:"憨瓜与波妞",author:"离奇6厘米",publisher:"郑州图书出版社"},success:function(res){ // 成功的回调函数console.log(res); //打印数据}})</script>
</body>
</html>