第十二章认识Ajax(三)
认识Ajax封装
初步封装Ajax()函数
为什么需要使用Ajax封装函数？
原因：编写一个Ajax请求所需的代码数量多，发送多个Ajax请求会出现大量的数据冗余和重复，使用Ajax封装会简化项目中的代码，提高开发效率。
封装Ajax()函数的基本使用
在使用之前，应当明确Ajax的请求方式是什么？请求地址是什么吗？以及如何对请求结果进行处理，并将这些信息以参数的方式传递给Ajax()函数。示例代码如下：
ajax({type:'get',url:'http:localhost:3000/ajax',success:function (data) {console.log(data);}
})
type: 'get'指定了请求的方法为GET。
url: 'http://localhost:3000/ajax'指定了请求的URL为http://localhost:3000/ajax。
success是一个回调函数，用于处理请求成功后的响应数据。在这个示例中，回调函数被定义为匿名函数，它接收一个参数data，表示返回的数据。在这个示例中，回调函数将返回的数据打印到控制台。调用封装的Ajax函数
ajax()，并传入一个包含请求参数的对象作为参数。
这段代码使用了封装的Ajax函数发送了一个GET请求到http://localhost:3000/ajax接口，并在请求成功后将返回的数据打印到控制台。
在知道Ajax封装函数的基本语法之后，开始编写代码初步封装，如下
第一：在D:code/chapter01/server/public目录下新建demo07.html文件，在页面中定义一个Ajax函数并调用它来发送Ajax请求。代码如下
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>你好</title>
</head><body><script>function ajax(options) { //定义了一个名为ajax的函数，接受一个参数options，用于配置Ajax请求的相关参数。var xhr = new XMLHttpRequest(); //创建XMLHttpRequest对象，用于发送Ajax请求。xhr.open(options.type, options.url); // 设置请求的类型和URLxhr.onload = function () { //设置一个加载完成时的事件处理函数options.success(xhr.responseText); //调用options对象中的success属性，将响应的文本内容作为参数传递给这个回调函数};xhr.onerror = function () { //设置一个请求错误时的事件处理函数，用于处理请求出错的情况console.error('请求出错: ', xhr.statusText);};xhr.send();};