ajax技术介绍

ajax技术是一种解决每次与服务端进行数据交流都要刷新页面的技术,使用ajax技术的好处就在于,当局部数据更新我们不必重新刷新页面,只需要更新局部就可以了,极大的提升了用户体验。

ajax的使用

创建xhr对象

const xhr = new XMLHttpRequest()

使用xhr对象的方法发送请求

open()方法可以传入三个参数,第一个是请求方式,第二个是请求地址,第三个为布尔值ture表示异步执行false表示同步,默认不传是ture,不同的请求方式发送数据的方式也不同。

xhr.open(method, url, async)

send()方法是用来向服务器传递内容的,get请求不需要传值,post请求需要传入想要传给服务器的内容

1.get请求
想要发送的信息以?key=value&key=value的方式拼接在url后面send()方法里面不需要传值

xhr.open('get', url?key=value&key=value)
xhr.send()

2.post请求
post请求可以传递多种形式的内容,不同形式需要设置不同的请求头

xhr.open('post', url)
//传递键值对形式的信息时设置以下形式的请求头,键值对信息放在send()方法里
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(key=value&key=value)
//传递json格式的信息时需要设置以下形式请求头,json对象要转换为字符串
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(JSON.stringify({"name":"kuankuan","age":"18"}))

接收并操作服务器响应的内容

xhr.onload = function () {
  //获取响应头中的内容格式信息判断接收到的内容格式
  let contentType = xhr.getResponseHeader('content-type')
  //xhr.responseText是接收到的服务器返回的内容
  let responseText = xhr.responseText
}

ajax发送表单中的信息

方法一:

获取到form表单 给表单注册onsubmit事件 注意事项 一定要阻止表单的默认提交行为

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <form id="Form">
    用户名:<input type="text" id="user"><br>
    密码:<input type="password" id="pass"><br>
    <input type="submit" id="sub">
  </form>
  <script>
    document.querySelector('#loginForm').onsubmit = function () {
      var user = document.querySelector('#user').value
      var pwd = document.querySelector('#pass').value
      var xhr = new XMLHttpRequest()

      xhr.open('post', '/postData')
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      xhr.send(`username=${user}&password=${pwd}`)

      xhr.onload = function () {
        console.log(xhr.responseText)
      }
      //阻止表单默认提交行为
      return false
    }
  </script>
</body>

</html>

方法二:

将submit按钮改为普通按钮,然后给按钮注册点击事件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <form id="Form">
    用户名:<input type="text" id="user"><br>
    密码:<input type="password" id="pass"><br>
    <input type="button" id="sub" value="提交">
  </form>
  <script>
    document.querySelector('#sub').onclick = function () {
      var user = document.querySelector('#user').value
      var pwd = document.querySelector('#pass').value

      var xhr = new XMLHttpRequest()
      xhr.open('post', '/postData')
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      xhr.send(`username=${user}&password=${pwd}`)

      xhr.onload = function () {
        console.log(xhr.responseText)
      }
    }
  </script>
</body>

</html>

ajax的封装

function ajax(options) {
	// 设置默认值
	var defaults = {
		type: 'get',
		url: '',
		data: {},
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		success: function () {},
		error: function () {}
	}

	// 使用用户传递的参数替换默认值参数
	Object.assign(defaults, options)

	// 创建ajax对象
	var xhr = new XMLHttpRequest()
	
	// 参数拼接变量
	formsParams(defaults.data)

	function formsParams(data) {
		var arr = []
		for (var attr in data) {
			arr.push(attr + "=" + data[attr])
		}
		return arr.join("&")
	}

	if (defaults.type == 'get') {
		defaults.url += '?' + params
	}

	xhr.open(defaults.type, defaults.url)

	if (defaults.type == 'post') {
		// 设置请求头
		xhr.setRequestHeader('Content-Type', defaults.header['Content-Type'])
		xhr.send(params)
	} else {
		xhr.send()
	}

	xhr.onreadystatechange = function () {

		if (xhr.readyState == 4 && xhr.status == 200) {
			var contentType = xhr.getResponseHeader('content-type')
			var responseText = xhr.responseText

			if (contentType.includes('application/json')) {
				// 将json字符串转换为json对象
				responseText = JSON.parse(responseText)
			}

			defaults.success(responseText)

		} else {
			defaults.error()
		}
	}
}

ajax({
  url: "/",
  type: "POST", 
  data: { 
    name: "kuankuan",
    age: 18
  },
  success: function (data) {
    console.log(data);
  }
})