ajxa（原生方式和jquery方式实现）

---

前言

ajxa是前后台交互的能力，也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具。在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页。

---

一、原生方式ajxa的使用

一般步骤如下：

1. 为标签绑定事件
2. 创建XMLRequest对象
3. 为XMLRequest对象绑定onreadystatechange函数
4. 当readystate值为4且http状态码为200~299之间则可以执行回调函数
5. 使用open函数配置请求信息
6. 使用send函数发送请求

注： 当使用post请求时，还要设置请求头中的 content- type属性，
ajxa.setRequestHeader(‘content-type’, ‘application/x-www-form- urlencoded’)

在 javascript 中有内置的构造函数，可以创建 ajax 对象，通过ajxa对象，我们可以向服务器发送请求，并获得相应，得到数据，渲染部分页面。这依赖于XMLHTTPRequest对象。

（1）创建一个ajxa对象

const ajxa = new XMLHttpRequest()

（2）使用XMLHttpRequest对象

get请求：

    const ajxa = new XMLHttpRequest()
	ajxa.onreadyStateChange = function () {
	// 每次 readyState 改变的时候都会触发该事件
	// 判断 readyState 的值是不是到4并且http的状态码是不是 200 ~ 299
	if (ajxa.readyState === 4 && /^2\d{2}$/.test(ajxa.status)) {
	// 当验证通过就可以获取服务端给我们响应的内容了
      	var a=document.querySelector('.mydiv')
      	//responseText中存储的是我们的响应体的内容
        a.innerHTML=myd.responseText 
	}
}
	//这里最好使用项目的绝对路径，如果使用相对路径，要带上项目名
	//这里true表示异步请求
	ajxa.open('get', '/test?username=zhangsan&password=123456',true)
	ajxa.send()

post请求：

    const ajxa = new XMLHttpRequest()
	ajxa.onreadyStateChange = function () {
	// 每次 readyState 改变的时候都会触发该事件
	// 判断 readyState 的值是不是到4并且http的状态码是不是 200 ~ 299
	if (ajxa.readyState === 4 && /^2\d{2}$/.test(ajxa.status)) {
	// 当验证通过就可以获取服务端给我们响应的内容了 
		var a=document.querySelector('.mydiv')
      	//responseText中存储的是我们的响应体的内容
        a.innerHTML=myd.responseText 
	}
}
	//这里最好使用项目的绝对路径，如果使用相对路径，要带上项目名
	ajxa.open('post', '/test',true)
	//设置请求头信息
	ajxa.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	//这里只需要将参数写在send函数里面
	ajxa.send('username=zhangsan&password=123456')

二、Jquery方式ajxa的使用

（1）引入jquery库

1. 官网下载：jquery-3.7.0.min.js
2. 将jquery放在项目文件web下的lib路径下管理

3. 在项目html文件中引入jquery

<script src="/ajax/lib/jquery-3.7.0.min.js"></script>

（2）在项目中使用ajxa请求

get请求

  $(function () {
      $("#but").click(function () {
          $.ajax({
          		 url: "/ajax/myA", 
          		 type : "get",
          		 //指定post请求从后端后端返回的字符串
          		 //尝试通过JSON.parse()尝试解析为js对象
          		 dataType: 'json',
          		 data : {username : "recipient", password : "password"},
          		 success:function (json) {
              		$("#in").val(json.uname)
          		}
          		 error: function (msg) {
						alert(msg);
					}
          		})
     	 })
  })

post请求

  $(function () {
      $("#but").click(function () {
          $.ajax({
          		 url: "/ajax/myA", 
          		 //指定post请求从后端后端返回的字符串
          		 //尝试通过JSON.parse()尝试解析为js对象
          		 dataType: 'json',
          		 type : "post",
          		 data : {username : "recipient", password : "password"},
          		 success:function (json) {
              		$("#in").val(json.uname)
          		}
          		 error: function (msg) {
						alert(msg);
					}
          		})
     	 })
  })

---

总结

关于ajxa还有一些问题没有提到，比如跨越问题，这需要大家自己去学习了，还有jsonfast还是先用1.2.6的，2.0版本的有一些问题，就是这么多，谢谢大家。