AJAX笔记

AJAX

• Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
• Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
• Ajax 是一种用于创建快速动态网页的技术。
• Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
  通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax 的应用场景

• 页面上拉加载更多数据
• 列表数据无刷新分页
• . 表单项离开焦点数据验证
• . 搜索框提示文字下拉列表
  等等

Ajax 状态码

在创建ajax对象，配置ajax对象，发送请求，响应结果，这个过程每一个步骤都有一个对应的ajax状态码

xhr.readyState // 获取Ajax状态码

• 0：请求未初始化(还没有调用open())
• 1：请求已经建立，但是还没有发送(还没有调用send())
• 2：请求已经发送
• 3：请求正在处理中，通常响应中已经有部分数据可以用了
• 4：响应已经完成，可以获取并使用服务器的响应了

ajax封装

function ajax(options) {
	//创建默认值对象
	var defaults = {
		type: 'get',//请求方式
		url: '',//请求路径
		data: {},//请求参数
		header: {//请求头信息
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		success: function () {//成功回调函数

		},
		error: function () {//失败回调函数

		}
	}
	//使用options对象中的属性覆盖default对象中的属性
	Object.assign(defaults, options)

	//创建xmlHttpRequest对象
	var xhr = new XMLHttpRequest()
	var params = ''//请求参数
	//将参数转换成字符串格式
	for (var attr in defaults.data) {
		params += attr + '=' + defaults.data[attr] + '&'
	}
	//移除请求参数最后一个&
	params = params.substr(0, params.length - 1)
	//判断请求方式
	if (defaults.type == 'get') {//get请求方式，请求参数在url后面
		defaults.url = defaults.url + '?' + params
	}
	//告诉 Ajax 请求地址以及请求方式
	xhr.open(defaults.type, defaults.url)
	//判断请求方式，如果为post需要设置请求体，请求参数在请求体中
	if (xhr.type == 'post') {
		//获取请求头信息
		var contentType = defaults.header['Content-Type']
		//设置请求头信息
		xhr.setRequestHeader('Content-Type', contentType)
		if (contentType == 'application/json') {//json类型数据
			//因为向服务器请求的参数需要时string类型的json数据，所以需要使用json.stringify进行转换
			//将请求参数转换成json字符串
			xhr.send(JSON.stringify(defaults.params))
		} else { //普通类型数据
			xhr.send(defaults.params)
		}
	} else {//get方式提交 
		xhr.send()
	}

	//使用onload监听获取服务器响应数据
	xhr.onload = function () {
		//获取服务器响应头信息
		var contentType = xhr.getResponseHeader('Content-Type')
		//获取服务器响应结果
		var responseText = xhr.responseText
		//判断响应头信息
		if (contentType.includes('application/json')) {
			//将响应数据转换成json对象
			responseText = JSON.parse(responseText)
		}
		//如果状态为200说明成功返回
		if (xhr.status == 200) {
			//调用处理成功的函数
			defaults.success(responseText, xhr)//返回响应数据
		} else { //说明请求失败，错误返回
			//调用处理失败的函数
			defaults.error(responseText, xhr)
		}
	}

}