原生AJAX，GET和POST两种请求方式

(以下内容仅代表个人理解呦,望大佬指正,嘿嘿....)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		// 什么是AJAX?
		//   AJAX即Asynchronous Javascript And XML(异步Javascript和XML),
		//   是一种浏览器和服务器之间异步交互的技术(浏览器和服务器之间
		//   异步交互可理解为:客户端无须更新页面即可获取数据信息)
		// 为什么需要异步？
		//   同步:同步发送请求后,客户端需要等待服务端的响应,期间不能做任何操作,
		//   在服务端处于处理请求阶段客户端需要一直等待,当数据正常获取后一次性全部刷新,
		//   用户体验极差。(异步应运而生)
		//   异步:异步发送请求后,服务端在接收到请求体并完成处理后
		//   将向客户端发送数据,客户端将会针对局部进行页面刷新
		// 原生AJAX
		//   两种请求方式:GET和POST,两种不同的原生写法(大同小异)
		//   两种请求方式的区别:
		//   	1.GET请求的参数在URL中显示,数据通过URL或Cookie传输,POST请求数据主要通过body传输
		//   	2.GET请求发送的数据长度有限制,POST请求发送的数据量大
		//   	3.GET请求一般是为了获取数据,POST请求则是上传和修改数据
		//   	4.POST请求比GET请求更安全,数据在地址栏不可见
		// 原生AJAX的GET请求：
			// 1.创建AJAX对象
			function loadXMLDoc(){
    
    	// 触发点击事件调用此函数
				var xmlhttp;		
				if(window.XMLHttpRequest){
    
    
					xmlhttp = new XMLHttpRequest();
				}
				else{
    
    
					xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
				}
				// 2.监听异步回调,即readyState状态的变化
					// readyState五个状态:
					// 0:请求未初始化,即还未调用open
					// 1:服务器已建立连接,即已调用open
					// 2:请求已接受,即服务器接收到了请求头信息
					// 3:请求处理中,即客户端接受到了响应体
					// 4:请求已完成且响应已就绪，即响应已完成
				// 下面function中onreadystatechange、readyState和status都是XHR对象的属性，
				// 每当readyStata属性发生改变时就会调用onreadyStatechang存储的函数,
				// readyState有5个状态，因此一次AJAX请求会调用5次onreadystatechange存储的函数
				xmlhttp.onreadystatechange = function(){
    
    
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
    
     
						// status是HTTP的状态码,HTTP状态码又三位数字组成,首尾数字定义了状态码的类型:
							// 1XX:信息类,表示已收到web浏览器的请求,正在进一步处理中
							// 2XX:成功, 表示用户请求被正确接受、理解和处理,例如:200 'OK'
							// 3XX:重定向,表示请求没有成功,客户需要采取进一步的措施
							// 4XX:客户端错误,表示客户端提交的请求有错误
							// 5XX:服务端错误,表示服务端不能完成对请求的处理
						// 必须保证readyState的状态码为4,表示请求完成,并且HTTP的状态码status是200,
						// 表示接口请求成功
						document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
						// responseText为相应数据,字符串类型
					}
				}
				// 打开连接,异步:async = true,同步:async = false
				xmlhttp.open('GET','AJAX/AJAX.txt ? k1 = v1 & k2 = v2',true);
				// 发送请求
				xmlhttp.send(null);
			}
			
		// 原生AJAX的POST请求：需要设置请求头,请求的信息写在xmlhttp.send()里面
		function loadXMLDoc(){
    
    
			//创建XMLHttpRequest对象
			var xmlhttp;
			if(window.XMLHttpRequest){
    
    
				xmlhttp = new XMLHttpRequest();
			}
			else{
    
    
				xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
			}
			//监听异步回调
			xmlhttp.onreadystatechange(){
    
    
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
    
    
					document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
				}
			}
			// 打开连接
			xmlhttp.open('POST','AJAX/AJAX.txt',true);
			// 设置请求头,包括请求头信息的数据类型和编码方式,
			// 即下面的Content-Type和application/x-www-form-urlencoded
			xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			// 发送请求体,需编码后提交
			xmlhttp.send('k1 = v1 & k2 = v2');
		}
		</script>
	</head>
	<body>
		<h1>AJAX</h1>
		<button type="button" onclick="loadXMLDoc()">请求数据</button>
		<div id="myDiv"></div>
	</body>
</html>
原生AJAX，GET和POST两种请求方式

Guess you like
