（与jQuery靠近乎）-06-jq中的Ajax简介+优缺+论述+实例/one-CSDN博客

本文链接：https://blog.csdn.net/zsx0806/article/details/121385551

今天，我还是风尚，一个有梦想的咸鱼程序员

今天我们还来和jQuery来靠近乎

不过今天，来了个重头戏

-------Ajax-------

什么是Ajax？

百度词条：Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest，使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

我总结：异步JavaScript和XML

ajax原理：

运用 XMLHttpRequest 异步交换
服务器上的数据通常是 JSON 格式保存文本数据；
运行 javascript 来操作渲染dom

关于Ajax的优势

由于 Ajax 包含众多特性，优势与不足也非常明显。

不需要插件支持（一般浏览器且默认开启 JavaScript 即可）；
用户体验极佳（不刷新页面即可获取可更新的数据）；
提升 Web 程序的性能（在传递数据方面做到按需加载，不必整体提交）；
减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；
它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验

万事都有两面性：Ajax 的不足：

前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会几率前后页面）；
搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；

定义和用法

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

异步是什么？

使用 Ajax 最关键的地方，就是实现异步请求、接受响应及执行回调。那么异步与同步有什么区别呢？

我们普通的 Web 程序开发基本都是同步的，意为执行一段程序才能执行下一段，类似电话中的通话，一个电话接完才能接听下个电话；而异步可以同时执行多条任务，感觉有多条线路，类似于短信，不会因为看一条短信而停止接受另一条短信。

Ajax 也可以使用同步模式执行，但同步的模式属于阻塞模式，这样会导致多条线路执行时又必须一条一条执行，会让 Web 页面出现假死状态，所以，一般 Ajax 大部分采用异步模式。

使用Ajax

建一个XMLHttpRequest

1，创建xhr

    var xhr=new  XMLHttpRequest();

2, 打开链接 open （method,url,asny);

xhr.open("get","url?params1=some&params2=somm2",true);

3, 发送 send （"params1=some&params2=somm2"）;

xhr.send("name="+uname.value);//发送数据 
// post 请求需要发一个header
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

4,监听 readyState status

xhr.onreadystatechange=function(){//当XHR 状态方式改变时
	
		if(xhr.status==200&&xhr.readyState==4){
		//如果http的状态码200(请求成功) xhr的状态是4（成功状态）
			}
		}

readyState

0,'未初始化....'
1,'请求参数已准备，尚未发送请求...'
2,'已经发送请求,尚未接收响应'
3,'正在接受部分响应.....'
4,'响应全部接受完毕'

响应

status      响应码   200   成功
statusText  响应状态  ok   成功
responseText响应题文本形式

XMLHTTPRequest案例

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ajax</title>
</head>
<body>
	<button>获取文件</button>
<script>
	var btn = document.querySelector("button");
	btn.onclick=function(){
		//01  声明一个xhr对象
		var xhr =new XMLHttpRequest();	
				
		//02 打开链接地址
		xhr.open("GET", "./text.txt",true);
		
		//03 发送 
		xhr.send();
		
		//04 监听事件
		// readyState进行状态  为4的时候打开完毕
		// status 服务的响应码 200 时候是响应成功
		// responseText服务的返回数据
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4&&xhr.status==200){
				console.log(xhr.responseText,xhr);
				document.querySelector("body")
				.append(xhr.responseText)
			}
		}
	}
	
</script>
</body>
</html>

post方式

post 需要设置xhr请求头 url编码
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

var xhr = new XMLHttpRequest();
xhr.open("post","http://520mg.com/ajax/echo.php");
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("name=mumu&age=18");

文件上传

获取文件 var fileObj = document.getElementById("file").files[0];

文字上传需要创建一个表单数据对象
var form = new FormData()
form.append("file",fileObj);

onload 加载完毕回调函数注意xhr.send(form)要最后调用

function UploadFile(){
   var fileObj = document.getElementById("file").files[0];
   var url ="https://www.520mg.com/ajax/file.php";
   var form = new FormData();
   form.append("file",fileObj);
   var xhr = new XMLHttpRequest();
   xhr.open("post",url,true);
   
   xhr.onload = function(){
   	console.log(xhr);
   }
   
   xhr.send(form);
			
}

上传进度跟踪

XMLHttpRequest对象，传送数据的时候，有一个progress事件，用来返回进度信息。

它分成上传和下载两种情况
１）下载的progress事件属于XMLHttpRequest对象
２）上传的progress事件属于XMLHttpRequest.upload对象。

xhr.upload.onprogress =function(e){
    console.log(e);
    console.log(e.loaded,e.total,Math.round(e.loaded/e.total*100)+"%")
}

jq上传进度

 $.ajax({
    type: "POST", // 数据提交类型
    url: "https://www.520mg.com/ajax/file.php", // 发送地址
    data: formData, //发送数据
    async: true, // 是否异步
    processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
    contentType: false, //需设置为false,因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
   xhr:function(){
	   
		var xhr = new XMLHttpRequest();
		if(xhr.upload){
			xhr.upload.addEventListener("progress",function(e){
				console.log(e);
			})
		}
		
		return xhr;
	}
            });