ajax封装：get封装方式、post封装方式

ajax调用参数解释：

 ajax({
       url:"http://localhost:3000/users",
       method:"POST",
       data:"username=lala&password=111",
       headers:{
            "content-type":"application/x-www-form-urlencoded"
       },
       success:function(res){
            console.log("success:",res)
       },
       error:function(err){
            console.log("error:",err)//js代码里面执行error回调函数，会传过来一个实参
       }
    })复制

ajax：这里的ajax是封装的函数名，这个函数名随便起，函数定义是在js代码中；
url：数据请求的链接url一定要有；
method：为了让这种封装方式适用于各种请求方式，要在调用的时候有一个method参数来接收请求方式；
method:接收各种请求方式：get、post、put、patch、delete；
data：post方式等不同方式要传输的数据，放在data里；
async：是否异步，参数可传可不传，不传默认是true：异步；false：同步；
headers：因为我们在用post方式时，传给后端的信息有两种方式：一种是表单格式，一种是json格式，所以要有这个headers参数，放信息格式；
success和error是回调函数，一个成功的回调，一个失败的回调，函数调用会在js代码中实现；
最后因为参数多，我们可以用对象的方式将它们放在一起，传进ajax这个函数里；

ajax封装代码：
js代码：

 //因为data有可能会传进来的是一个对象，但post传的信息格式只有两种，一个是json对象，一个是表单
//这个函数是为了将对象转换为表单的格式
//函数调用在下面
function queryStringify(obj) {
    let str = ''
    for (let k in obj) str += `${k}=${obj[k]}&`
    //这个for循环执行后的结果是这样子的格式：
    //username=yiyi&password=123&
    //然后下面再用slice从0位置截取到最后一个位置的字符，但不包括最后一个字符
    //也就是截取下来的信息是这样的：username=yiyi&password=123
    return str.slice(0, -1)
  }
  
  // 封装 ajax
  //options是一个大对象，接收的形参；
  //因为到时候会从这个大对象了解构出来下面的url、method、async、data、headers等
  function ajax(options) {
    //定义一个defaultoptions默认对象，全部参数都定义了，防止options的实参有些参数没定义，就可以使用这里的默认值；
    let defaultoptions = {
      url: "",
      method: "GET",
      async: true,
      data: {},
      headers: {},
      success: function () { },
      error: function () { }
    }
    
    let { url, method, async, data, headers, success, error } = {
      ...defaultoptions,
      ...options
    }
    console.log(url, method, async, data, headers, success, error)
  
  
    if (typeof data === 'object' && headers["content-type"]?.indexOf("json") > -1) {
      data = JSON.stringify(data)
    }
    else {
      //queryStringify函数在最上面定义了
      data = queryStringify(data)
    }
    
    // 如果是 get 请求, 并且有参数, 那么直接组装一下 url 信息
    if (/^get$/i.test(method) && data) url += '?' + data
    
    // 4. 发送请求
    const xhr = new XMLHttpRequest()
    xhr.open(method, url, async)
    xhr.onload = function () {
      if (!/^2\d{2}$/.test(xhr.status)) {
        // console.log(error)
        error(`错误状态码:${xhr.status}`) //回调,执行error的回调函数，括号里是实参，
        return
      }
  
    // 执行解析
    //写try{}catch{}的作用是：可能后端传过来的数据解析错误，那success就执行不了，
    //下面的代码也都执行不了了，就卡在那里了，为了即使上面出错了，下面代码也能执行所以用了这样一个结构
    //如果发生try里面的代码发生错误，就执行catch的代码，不会因为错误代码就停了，出错了还会继续执行，但是会给你打印一个错误信息
      try {
        let result = JSON.parse(xhr.responseText)
        success(result)
      } catch (err) {
        error('解析失败 ! 因为后端返回的结果不是 json 格式字符串')
      }
    }
  
    // console.log(22222)
  
    // 设置请求头内的信息
    //请求头信息可能有多个，所以这里用for循环把它们遍历出来
    //将content-type设置在headers中
    for (let k in headers) xhr.setRequestHeader(k, headers[k])
    //设置一个既适用于get方式又适用于post方式的方法：
    if (/^get$/i.test(method)) {
        xhr.send()
      } else {
        xhr.send(data)
      }
  
    //  xhr.send(data)
   }复制

html代码：
get方式调用ajax函数：

 <body>
    <script src="./util.js"></script>
    <script>
        //method:在get方式时不用传参数，因为后面我们定义的默认对象就是get，不传后面覆盖时默认是get
        //async、data、headers也不用传，因为get方式没有，就让他默认就行了；
        ajax({
            url:"http://localhost:3000/users",
            success:function(res){
                console.log("success:",res)
            },
            error:function(err){
                console.log("error:",err)//js代码里面执行error回调函数，会传过来一个实参
            }
        })
    </script>
</body>复制

post方式调用ajax函数：

 <body>
    <script src="./util.js"></script>
    <script>
        //method:在get方式时不用传参数，因为后面我们定义的默认对象就是get，不传后面覆盖时默认是get
        //async、data、headers也不用传，因为get方式没有，就让他默认就行了；
        ajax({
            url:"http://localhost:3000/users",
            method:"POST",
            data:"username=lala&password=111",
            headers:{
                "content-type":"application/x-www-form-urlencoded"
            },
            success:function(res){
                console.log("success:",res)
            },
            error:function(err){
                console.log("error:",err)//js代码里面执行error回调函数，会传过来一个实参
            }
        })
    </script>
</body>复制

代码解释：

 if (typeof data === 'object' && headers["content-type"]?.indexOf("json") > -1) {
      data = JSON.stringify(data)
   }
    else {
      //queryStringify函数在最上面定义了
      data = queryStringify(data)
   }复制

这个headers["content-type"]后面的问号的含义是：

如果前面为假，就不执行后面这个“.”的方法；
所以这句代码的含义是：如果headers["content-type"]为假，那么就不调用这个indexOf（“json”）这个方法，代码继续执行；
这样保证即使前面为假，代码也可以往下执行，只是不调用这个方法了而已；

ajax封装：get封装方式、post封装方式

9、jQuery

web前端1 x（初级）理论（158道单选题含答案）

网站登录界面制作（three.js 3D特效背景） boostrap导航栏实现 jQuery移动窗口【附加源代码】

VUE倒计时组件，解决setInterval （）引起页面卡顿问题

jquery导航图片全屏滚动、首页全屏轮播图，各式相册

基于Bootstrap&HTML&CSS&jQuery制作左侧多级垂直导航菜单(含源码)

onlyoffice 相关参数设置说明

jQuery 遍历方法总结

jQuery基础（对象获取、相关方法）

echarts更换主题

前端哥

js向上取整

9、jQuery

web前端1 x（初级）理论（158道单选题含答案）

网站登录界面制作（three.js 3D特效背景） boostrap导航栏实现 jQuery移动窗口【附加源代码】

基于javaweb mysql的ssm maven红酒朔源管理系统(java ssm jsp layui jquery mysql)

VUE倒计时组件，解决setInterval （）引起页面卡顿问题

jquery导航图片全屏滚动、首页全屏轮播图，各式相册

基于Bootstrap&HTML&CSS&jQuery制作左侧多级垂直导航菜单(含源码)

onlyoffice 相关参数设置说明

jQuery 遍历方法总结

1
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

2
HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999

3
web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999

4
html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997

5
导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994

6
Access-Control-Allow-Origin跨域解决及详细介绍

2024-02-03 12:02:13993

7
Get请求报错404出现原因及解决办法

2024-01-25 10:01:26993

8
vue3 vite pinia 配置动态路由、解决刷新页面路由消失问题

2024-01-27 01:01:35992

9
jQuery实现AJAX和AJAX跨域问题

2024-01-28 12:01:54988

10
echarts - 自定义形状 - 实现立体柱状图

2024-01-30 10:01:46987

	ajax({
	url:"http://localhost:3000/users",
	method:"POST",
	data:"username=lala&password=111",
	headers:{
	"content-type":"application/x-www-form-urlencoded"
	},
	success:function(res){
	console.log("success:",res)
	},
	error:function(err){
	console.log("error:",err)//js代码里面执行error回调函数，会传过来一个实参
	}
	})

	//因为data有可能会传进来的是一个对象，但post传的信息格式只有两种，一个是json对象，一个是表单
	//这个函数是为了将对象转换为表单的格式
	//函数调用在下面
	function queryStringify(obj) {
	let str = ''
	for (let k in obj) str += `${k}=${obj[k]}&`
	//这个for循环执行后的结果是这样子的格式：
	//username=yiyi&password=123&
	//然后下面再用slice从0位置截取到最后一个位置的字符，但不包括最后一个字符
	//也就是截取下来的信息是这样的：username=yiyi&password=123
	return str.slice(0, -1)
	}

	// 封装 ajax
	//options是一个大对象，接收的形参；
	//因为到时候会从这个大对象了解构出来下面的url、method、async、data、headers等
	function ajax(options) {
	//定义一个defaultoptions默认对象，全部参数都定义了，防止options的实参有些参数没定义，就可以使用这里的默认值；
	let defaultoptions = {
	url: "",
	method: "GET",
	async: true,
	data: {},
	headers: {},
	success: function () { },
	error: function () { }
	}

	let { url, method, async, data, headers, success, error } = {
	...defaultoptions,
	...options
	}
	console.log(url, method, async, data, headers, success, error)


	if (typeof data === 'object' && headers["content-type"]?.indexOf("json") > -1) {
	data = JSON.stringify(data)
	}
	else {
	//queryStringify函数在最上面定义了
	data = queryStringify(data)
	}

	// 如果是 get 请求, 并且有参数, 那么直接组装一下 url 信息
	if (/^get$/i.test(method) && data) url += '?' + data

	// 4. 发送请求
	const xhr = new XMLHttpRequest()
	xhr.open(method, url, async)
	xhr.onload = function () {
	if (!/^2\d{2}$/.test(xhr.status)) {
	// console.log(error)
	error(`错误状态码:${xhr.status}`) //回调,执行error的回调函数，括号里是实参，
	return
	}

	// 执行解析
	//写try{}catch{}的作用是：可能后端传过来的数据解析错误，那success就执行不了，
	//下面的代码也都执行不了了，就卡在那里了，为了即使上面出错了，下面代码也能执行所以用了这样一个结构
	//如果发生try里面的代码发生错误，就执行catch的代码，不会因为错误代码就停了，出错了还会继续执行，但是会给你打印一个错误信息
	try {
	let result = JSON.parse(xhr.responseText)
	success(result)
	} catch (err) {
	error('解析失败 ! 因为后端返回的结果不是 json 格式字符串')
	}
	}

	// console.log(22222)

	// 设置请求头内的信息
	//请求头信息可能有多个，所以这里用for循环把它们遍历出来
	//将content-type设置在headers中
	for (let k in headers) xhr.setRequestHeader(k, headers[k])
	//设置一个既适用于get方式又适用于post方式的方法：
	if (/^get$/i.test(method)) {
	xhr.send()
	} else {
	xhr.send(data)
	}

	// xhr.send(data)
	}

	<body>
	<script src="./util.js"></script>
	<script>
	//method:在get方式时不用传参数，因为后面我们定义的默认对象就是get，不传后面覆盖时默认是get
	//async、data、headers也不用传，因为get方式没有，就让他默认就行了；
	ajax({
	url:"http://localhost:3000/users",
	success:function(res){
	console.log("success:",res)
	},
	error:function(err){
	console.log("error:",err)//js代码里面执行error回调函数，会传过来一个实参
	}
	})
	</script>
	</body>

ajax封装：get封装方式、post封装方式

微信扫一扫：分享