ajax 与 xhr

ajax

ajax: A:异步 ；J: javascript ；A :and ；X :XML；

前后端交互:
	❶ 前端发送请求
	❷ 后端接收请求;
	❸ 后端处理请求;
	❹ 后端返回响应; .
	❺ 前端处理后端的响应;

前端发送请求方式: form表单; 传统请求方式; . 会让页面跳转并刷新页面;

前端因为发现了这些问题，所以发明了一个 新的请求发送方式:ajax
	无刷新的页面请求发起方式;
	这个行为是有JS来执行的;
	让页面实现局部刷新;

ajax这个技术目标是在页面之中无刷新的发起请求，但是ajax技术实现不只有一种;

实现的方式有： 
			xhr :称之为 小黄人;
			jsonp:用来处理跨域问题的;
			fetch :高级的xhr封装;

xhr发起请求

<button id="btn"> 发起xhr请求</ button>
	<script>
		var btn = document . getElementById("btn");
		btn. onclick = function(){
			// xhr发请求共分成三个步骤:
			// -创建一个xhr对象;
			//浏览器提供给我们发起无刷新请求的工具;
			var xhr = new XMLHttpRequest();
			// -配置请求; 
			//  -请求目标; 
			//  -请求方式;
			//开启并配置xhr请求（请求方式，请求目标）
			xhr.open("GET ","./xhr.php");
			// -发送请求；
			//get没有请求体，直接调用sendAPI就可以了
			xhr.send();

			// xhr请求的响应接收
			//-异步;（JS执行的顺序，整个代码最后执行）
			
			//on :
			// readystate : xhr 的状态码;
			// change : 改变;
			xhr . onreadystatechange = function(){
				// xhr对象的状态码共郁5个;
				//记住4是成功
				// xhr. readyState里面取出的就是xhr的状态码;
				if( xhr.readyState === 4 ){
					//数据放在 xhr.responseText(响应文本)
					console.log( xhr.responseText );
				}
			}
		}
</script>

同路径下创建后台数据 xhr.php 文件

<?php

echo "hello 这是后端返回的数据";

不刷新页面 能发送数据

xhr请求如何携带信息

<button id="btn"> 发起xhr请求</ button>
<script>
		// GET  :请求携带的信息是放在url地址栏里的;
		// POST :请求携带的信息是放在请求体之中的;
		var btn = document . getElementById("btn");
		btn. onclick = function(){
			var xhr = new XMLHttpRequest();
			//要使用GET请求发送方式并携带数据我们需要拼接一个 合适的URL;
			//数据和url使用 ? 分隔的;
			//数据 字段名  = 字段值 & 字段名2 = 字段值2 形式发送的;
			var url = "./xhr请求携带的信息.php?username=wuyanzu&password=123456" ;
			xhr. open("GET"，url );
			xhr . send();

//此时后台返回下列图一图二

			接收响应:
			xhr. onreadystatechange = function(){
				if( xhr.readyState === 4 ){
					console.log( xhr . responseText);
				}
			}
		}
//此时后台返回下列图三


</script>

与之匹配的后端创建 xhr请求携带的信息php文件

<?php

//[ ]中内容 是 后端定义前端用什么携带信息的东西，叫字段
$username = $_GET["username"] ;
$password = $_GET["password"];

echo "前端发送的信息是 : $username , $password";

查询结果是：

容易出现的问题：

	##在发起xhr请求时，为什么请求方式为GET，GET请求明明是获取数据，POST才是发送数据？
		-任何请求都可以携带参数，只不过携带参数的数量不同;
			-GET：GET请求可以携带的数据量较少;
			-POST：POST请求数据携带量不受限制;
			
	## xhr请求发送中为什么在没有【xhr对象状态码为4】的条件时，console. log( xhr. responseText ); 会执行两次?
		-这个事件在状态码改变的时候就会被触发，所以我们只判定在成功的时候去获取数据;否则会多次执行
		
	## xhr. send( )
			-请求发送的行为（规定）