$ajax() - 基础造轮子

版权声明：尊重原创！ https://blog.csdn.net/weixin_42675488/article/details/89007208

参考文献
	Jquery中AJAX参数详细列表              node.js中文网
	http - 400/500 详解                    axios插件 数据请求
	$.ajax()方法 详解
文章目录：
	1、ajax原理
	2、原生js封装ajax请求
	3、本地php数据库，和xml文件（搭建服务器）
	4、json 格式

ajax原理：

XMLHttpRequest 是 ajax 的核心机制，它是在 IES5 中首先引入的，是一种支持异步请求的技术，简单来说，也就是JavaScript 可以及时向服务器提出请求和处理响应，而不阻塞用户，达到无刷新效果。

• ajax基础简介：

区分请求类型： GET 或 POST

方法：

1 、open(“method”,“url”,asynch) - 规定请求类型、URL以及是否异步处理请求： xmlHttp.open(“GET”,“test.php”,true);

• method - 请求的方法 ： GET / POST
• url - 表示请求服务器的地址，相对位置或绝对位置（也可以是一段 http:// 请求）
• asynch - 表示是否采用异步方法，true（异步）或 false（同步），默认为异步

2、 send(content) ：向服务器发出请求，如果采用异步方式，则会立即返回。content 可以指定 null 表示不发送数据，其也可以是 dom 对象、输入流或字符串；仅用于post 请求

---

• XMLHttpRequest 对象的三个重要的属性：

利用 xhr.onreadystatechange = function(){} 来捕获 readyState 变化之后做的事情。

属性：
readyState -存有XMLHttpRequest 的请求状态 从 0 到 4 发生变化	0 - 请求未初始化 1- 服务器连接已建立 2- 请求已接收 3- 请求处理中 4- 请求已完成，且响应已就绪
status	200 - ok / 404 - 未找到页面
当 readyState 等于 4 且状态为 200 时，表示响应已就绪

• xmlhttp.status：- 服务器返回的状态码：

· 200 —— “OK”
· 304 —— 该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
· 403 —— （禁止） 服务器拒绝请求。
· 404 —— （未找到） 服务器找不到请求的网页。
· 408 —— （请求超时） 服务器等候请求时发生超时。
· 415 —— （跨域） -后台。
· 500 —— （服务器内部错误） 服务器遇到错误，无法完成请求-后台。

---

• $.ajax() 函数依赖服务器提供的信息来处理返回的数据：

描述
1.0、dataType 选项	可以指定其他不同数据处理方式，除了单纯的XML，还可以指定 html、json、jsonp、script或者text； 指定json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为对象返回；
2.0、data选项	发送数据到服务器，可以包含一个查询字符串，比如 key1 = value1 & key2 = value2； 也可以是一个映射，比如 {key1 : “value1”, key2 : “value2”} / key 为键；value 为值

“http://192.168.1.169:8088/” - 一般是固定格式，变的是后面；

GET参数通过URL传递，POST 放在 Request body中，后者安全性比较高

1、open方法的第三个参数选择的是true，那么当前就是异步请求，这个时候需要写一个回调函数 - onreadystatechange，这个属性返回的是一个匿名地方法，否则 false；

2、xmlhttp.open(“GET”,"/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true); - [ get ]

原生 js 方法：
<script>
var oAjax = new XMLHttpRequest(); //创建ajax 对象，用于发送数据，并接收

//注册回调函数
oAjax.onreadystatechange = function(){
  if(oAjax.readyState === XMLHttpRequest.DONE && oAjax.status === 200) { // 校验HTTP状态码
    console.log('说明请求成功');
    console.log(oAjax.responseText)
  }
}

//第一个参数是请求方式、第二个是请求地址，第三个true、false 代表是否为异步请求、一般都是true
oAjax.open("POST","http://192.168.1.169:8080/redPackets/findOwner",true);

//post 请求数据上放在 send 里面的，get 则需拼在 url 里面
oAjax.send("{'userId':1,'pageNo':1}");
</script>

封装文献：
	jQuery 的 AJAX 实现代码迭代过程（web封装）
——

jq 的 ajax 方法
<script>
$.ajax({
	type:"post",
	url:"http://192.168.1.169:8080/redPackets/findOwner",
	async:true,
	"data":{
		"userId":1,
		"pageNo":1
	},
	"success":function(json){
		console.log("成功"+json.data.count);
		//JSON.parse(str);  //字符串转换成json
		
		console.log(JSON.stringify(json)); //json转换成字符串
		
	},
	"error":function(){
		console.log("出错了")
	}
});

</script>

• Async : true ：实例在 open() 的第三个参数中使用了 “true”。该参数规定请求是否异步处理。True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。

---

原生 js 封装 ajax请求：

// success , error - 传递成功或者失败的两个回调函数

// 传递服务器参数 url?key=value&key=value，并将对象转换成字符串，再设置最新请求
function objstrr(data) {
	data.t = new Date().getTime();
	var res = [];
	// for 遍历到obj对象中的所有元素
	for (var key in data) {
		// encodeURIComponent - 将url中出现的中文进行转码
		res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
	}
	return res.join("&"); // 数组转成字符串，并且元素与元素之间用 & 连接
}

function ajax(type, url, data, timeout, success, error) {
	// 0、将对象转换成字符串
	var str = objstrr(data);
	
	// 1、创建一个异步对象
	var xmlhttp, timer;
	// 1.1、兼容浏览器问题
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	} else {
		// ie5~6
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	// 2、设置请求方式 和 请求地址
	// 2.1、括号中包含： method - 请求类型； url - 服务器地址； async -异步或者同步；
	// 2.2、每次发送请求都能拿到最新的数据,是当前一段最新的时间 ： url + "?t=" + (new Date().getTime()) 
	//xmlhttp.open("POST", url + "?" + str, true);
	
	// 2、3 两点升级 , toLowerCase - 转换成小写格式
	if(type.toLowerCase() === "get" && type.toLowerCase() === "post") {
		xmlhttp.open(type, url + "?" + str, true);
		xmlhttp.send();
	} else {
		xmlhttp.open(type, url, true);
		xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xmlhttp.send(str);
	}
	
	// 3、发送请求
	//xmlhttp.send();
	
	// 4、监听状态变化 
	xmlhttp.onreadystatechange = function (ev2) {
		// 请求会有五次变化
		if(xmlhttp.readyState === 4) {
			clearInterval(timer);
			if(xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
				// 5、处理返回结果
				console.log("接收到服务器返回的数据");
				success(xmlhttp);
			} else {
				error(xmlhttp);
				console.log("没有接收到服务器返回的数据");
			}
		}
		// timeout - 设置超时时间方法,或者说是设置等待远程服务器的时间，超过时间则自动终止请求
		if (timeout) {
			// 开启定时器
			timer = setInterval(function() {
				//终止发送请求
				xmlhttp.abort();
				clearInterval(timer); // 终止定时器
			}, timeout) // timeout - 外界传入的定时器时长
		}
	}
}

处理超时的方法可有可无；

页面调用axjax：

<script>

// 先页面引用上面的js
window.onload = function () {
	var onBtn = document.querySelector('button');
	onBtn.onclick = function () {
		// 调用封装好的ajax函数
		ajax("POST", "04-AJAX-XML.php", 3000, function (xhr) {
			// 成功的回调函数
		}, function (xhr) {
			// 失败的回调函数
		})
	}
}
</script>

jq 中 &ajax({}) ，{} - 它传递的是一个对象，然后通过这个对象 获取到它下面对应的参数，所以它打乱参数的顺序也能正常执行；

而原生js的ajax 则也需要通过一个对象才能实现；如

然后页面调用的格式就和jq中的一样就行了，上面 jQuery 的 AJAX 实现代码迭代过程（web封装）链接有介绍

function ajax(option) {
	var str = objstrr(option.data);
	if(option.type.toLowerCase() === "get" && option.type.toLowerCase() === "post") {
		xmlhttp.open(option.type, option.url + "?" + str, true);
		xmlhttp.send();
	} else {
		xmlhttp.open(option.type, option.url, true);
		xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xmlhttp.send(str);
	}
}

php 与 xml，后端如何返回一个xml数据给前端？前端在接收到xml和又如何处理xml数据？

搭建服务器
	1、利用nodeJs anywhere搭建本地服务器环境
	2、WampServer 软件查看 php

xml 固定格式： 版本号 和 字符集 第一行必须这样写

<?xml version="1.0" encoding="UTF-8" ?>
// 必须有一个根节点 包含所有数据
<person>
	<name>aaaaa</name>
	<age>11</age>
</person>

后端如何返回一个xml数据给前端？04-AJAX-XML.php ：

<?php
	// 转换字符集
	header(string: "content-type:text/xml; charset=utf-8");
	/*调用xml数据路径*/
	echo file_get_contents(filename: "info.xml");
?>

/*页面调用 */
success: function(xhr) {
	//console.log(xhr.responseText);
	// 这个是获取xml的
	//console.log(xhr.responseXML); //返回null，有中文需要转换字符集,转换后会是一个 document对象
	// 1、拿到document对象
	var res = xhr.responseXML;
	// 2、再找到内容
	console.log(res.querySelector("name").innerHTML);
}
error: function(xhr) {
	console.log(xhr.status);
}

---

json格式，体积会比xml的要小，代码也精简，体积小传输就会快，用户体验就会好；

1、写数据

2、php 后台存数据

3、前端拿数据