Ajax基础内容

Ajax简介

AJAX(Asynchronous JS And XML): 与服务器端交换数据实现网页局部刷新的技术（不需要网页的重新加载)

核心技术：XMLHttpRequest对象

XMLHttpRequest对象如何构建

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

XMLHttpRequest对象与服务器端交换数据.

向服务器发送请求

建立连接：
xhr.open(method, url, async)

1. method: GET、POST(请求类型)
2. url: scheme://host.domain:port/path/filename(请求路径）
3. async: true(异步) or false(同步)

向后端发送请求:

xhr.send(string) (将请求发送到服务器)
string: 仅用于POST请求

POST请求： 无法缓存、适用于大量文件、包含未知字符的用户输入

GET请求

• 有缓存

xhr.open("GET","info.html",true);  // 发起一个异步的GET请求
xhr.send();

• 无缓存

xhr.open("GET","info.html?t="+Math.random(),true); // 发起一个异步的GET请求
xhr.send();

• 提交信息

xhr.open("GET","info.html?username=wangzz",true);
xhr.send();

POST请求

• 简单请求

xhr.open("POST","info.html",true);
xhr.send();

• 复杂请求

xhr.open("POST","info.html",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 设置请求头
xhr.send("fname=Bill&lname=Gates");

Async = true
xhr.onreadystatechange=function(){
	if(xhr.readyState == 4 && xhr.status==200){
		// 异步交互成功
	}else{
		// 异步交互失败
	}
}
xhr.open("POST","info.html",true); // 
xhr.send();

Ajax发送异步请求后端接收后返回请求

XMLHttpRequest对象的responseText或responseXML属性

• responseText: 获得字符串形式的响应数据
• responseXML: 获得XML形式的响应数据

xhr.onreadystatechange事件

当异步请求发送到后端进行响应后前端需要处理响应事件（成功或失败）

每当readystate改变时，就会触发onreadystatechange事件

XMLHttpRequest对象的状态信息存储在readyState属性中

1. xhr.onreadystatechange=function(){} 存储函数名，每当readyState```属性改变就会触发该函数

2. readyState

	0: 请求尚未初始化
	1: 请求建立完成
	2: 请求后端已经接收
	3：请求后端处理中
	4: 请求已完成，且响应就绪

// 因为readyState每次改变都会触发onreadystatechange函数
// readyState：【0-4】共5中状态就是会触发onreadystatechange事件5次

xhr.status:

200: 请求处理成功！
404: 请求路径不存在导致请求处理失败！

onreadystatechange属性使用

xhr.onreadystatechange=function(){
	if(xhr.readyState == 4 && xhr.status == 200){
		// 后端请求处理完毕，进行响应结果的处理★

	}else{
		// 后端请求失败！
	}
}

使用Callback函数

callback用于对上述异步请求处理的集成(intergration)和包装(package)

function myFunction(){
	// 1. 构建XMLHttpRequest对象
	var xhr;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXRequest("Microsoft.XMLHTTP");
	}
	
	// 2. 构建onreadystatechange事件
	xhr.onreadystatechange=function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			// 【响应结果处理】异步请求成功，后端返回响应结果
			
		}else{
			// 【响应结果失败】
		}	
	}

	// 3. 构建请求体 xhr.open(method,url,isAsync)
	xhr.open("GET","info.html",true);
	// 4. 提交请求
	xhr.send();

}	

⭐️总结

Ajax的核心基础： XMLHttpRequest对象

XMLHttpRequest对象

1. XMLHttpRequest对象内置函数名： onreadystatechange

2. XMLHttpRequest对象预状态属性：readyState
   readyState DESC
   0 请求尚未初始化
   1 请求初始化完成
   2 请求提交到后端
   3 后端处理请求中
   4 后端请求处理成功并响应结果

3. XMLHttpRequest对象状态属性：status
   200 请求成功
   404 请求路径不存在

4. XMLHttpRequest对象中的xhr.open(method,url,isAsync);

• method: 请求类型->GET、POST
• url: 请求路径-> "index.html"
• isAsync: true or false (true:异步，false:同步)
  GET类型请求构建
  xhr.open("GET","index.html",true); // 构建GET类型的异步请求【有缓存】
  xhr.open("GET","index.html?t="+Math.random(),true); // 构建GET类型的异步请求【无缓存】
  POST类型请求构建
  xhr.open("POST","index.html",true); // 构建POST类型的异步请求【POST请求使用于无缓存、大文件】