ajax 详解（GET，POST方式传输以其封装）

Dear 丶 2024-04-17 21:29 39阅读 0赞

1，什么是ajax  
2，为什么ajax这么火 特点  
3，Ajax的工作原理  
4，Ajax的工作流程  
5，请求服务器调用方式GET，POST  
6，同源策略，数据传输方式及接口设计原则  
7，ajax操作.txt 格式（详细）  
8，ajax操作php（GET方式和POST方式）以及封装

### 1，什么是ajax ###

Ajax 的全称是 Asynchronous JavaScript and XML，即异步 JavaScript+XML。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它并不是新的编程 语言，而是几种原有技术的结合体。它由以下几种技术组合而成，包括：  
           HTML/XHTML——主要的内容表示语言。  
           CSS——为 XHTML 提供文本格式定义。  
           DOM——对已载入的页面进行动态更新。  
            XML——数据交换格式。  
            XSLT——将 XML 转换为 XHTML（用 CSS 修饰样式）。  
            XMLHttp——用 XMLHttpRequest 来和服务器进行异步通信，是主要的通信代理。

Ajax和XMLHttpRequest 两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。当需要异步与服务器交换数据时，需要 XMLHttpRequest 对象来异步交换。

### 2，为什么ajax这么火 特点 ###

不更新整个网站的情况下，实现局部更新

### 3，ajax工作原理 ###

View层（数据的展示，页面的渲染）-- 中间层（ajax引擎）— 服务器（后台）

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给Ajax引擎自己来做,，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

### 4，ajax的工作流程 ###

举个例子，以追求一个女孩的过程为例，虽然从来没有成功过，但也经历过

Ajax核心：
    	XMLHTTPRequest对象(以下都是它的对象或方法)														//喜欢一个女孩
    	常用的方法（ 准备阶段  ）：				
    		open（‘method’,’url’,async）;	//规定请求的类型、URL 以及是否异步处理请求。 //想要更近一步，联系她
    			method：请求的类型；GET 或 POST
    			url：文件在服务器上的位置
    			async：true（异步）或 false（同步）
    
    		send();		//发送请求, 将请求发送到服务器。 //给她写了一封信
    			null:
    				兼容性问题
    				安全性问题---防止传参
    
    	常用的属性（传输阶段）；												
    		向服务器请求状态的阶段（走进一个女孩的心里）
    			onreadystatechange	//请求改变状态的触发器 //希望改变我们之间的关系
    			readyState 		   //请求状态 //女孩考虑了一下
    				0 - (未初始化)还没有调用 send()方法 
    				1 - (载入)已调用 send()方法，正在发送请求 
    				2 - (载入完成)send()方法执行完成 
    				3 - (交互)正在解析响应内容 
    				4 - (完成)响应内容解析完成，可以在客户端调用
    		服务器的响应阶段														
    			status	服务器的http请求响应 的状态码												//告知你答案,可以或着不可以等等其他说辞
    			
    				201-206都表示服务器成功处理了请求的状态代码，说明网页可以正常访问
    					200请求成功
    					
    				300-307表示的意思是：要完成请求，您需要进一步进行操作。通常，这些状态代码是永远重定向的。
    					304（未修改） 自从上次请求后，请求的网页未被修改过。服务器返回此响应时，不会返回网页内容。
    
    				400-417表示请求可能出错，会妨碍服务器的处理。
    					404（未找到） 服务器找不到请求的网页。
    					413（请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
    
    				500至505表示的意思是：服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。
    					500（服务器内部错误） 服务器遇到错误，无法完成请求。
    					503（服务不可用） 目前无法使用服务器（由于超载或进行停机维护）。通常，这只是一种暂时的状态。
    	
    	responseText——从服务器进程返回数据的字符串形式。
    	responseXML——从服务器进程返回的 DOM 兼容的文档数据对象。 
    	（相当于如果成功之后我可以干什么）

### 5，请求服务器调用方式GET，POST ###

##### 1，数据量 #####

早期：GET少，POST多，就是因为IE限制的url长度（4084k），把参数锥到最后  
现在：没有限制 ；  
浏览器和服务器是通过消息（message）传递的；消息是由两部分组成：  
头（header）=》包含的信息少：url头消息  
身子（content）=》post数据 整体数据

##### 2，安全性 #####

### 6，同源策略，数据传输方式及接口设计原则 ###

ajax只能访问同源接口

同源策略：域名（主机名，IP地址）端口 协议相同

不同的客户端脚本（js，as…）在没有明确授权的情况下 是不能来读取对方资源的  
同源策略的限制范围：  
1，本地缓存（cookie，localstroage，indexDB）  
2，不能互相访问dom节点  
3，ajax不能向外部请求发送

同源判断：url协议，主机名 ，端口三者相同，才能同源

### 7，ajax操作.txt 格式 ###

.txt文件

hello

js文件

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>ajax操作.txt</title>
    		<script type="text/javascript">
    			window.onload = function() { 
    				//1,获取a节点,并添加onclick函数
    				document.getElementsByTagName("a")[0].onclick = function(ev) { 
    
    					//3,创建一个xhr对象
    					var request = new XMLHttpRequest;
    
    					//4,准备发送数据:url
    					var url = this.href;//"demo.txt"
    					var method = "GET"
    
    					//5,调用xhr对象的open方法
    					request.open(method, url,true);
    
    					//6,调用xhr对象的send方法
    					request.send(null);
    
    					//在前六步完成之后已经有了响应
    
    					//7,为xhr对象添加onreadystatechange响应函数
    					request.onreadystatechange = function() { 
    						//8,判断响应是否完成,xhr对象的readystate属性值为4的时候
    						if (request.readyState == 4) { 
    							//9,判断响应是否可用,xhr对象status属性值为200
    							if (request.status == 200 || request.status == 304) { 
    								//10,打印响应结果:responseText
    								alert(request.responseText)
    							}
    						}
    					}
    
    					//2，取消默认行为
    					return false;
    					// ev.preventDefault();
    				}
    			}
    		</script>
    	</head>
    	<body>
    
    
    		<p>不跳转的情况下获取数据</p>
    		<a href="demo.txt">接受demo1.txt1</a>
    	</body>
    </html>

### 8，ajax操作php（GET方式和POST方式）以及封装 ###

<?php
    	header('Content-type:text/html;charset=utf-8');
    	// $a=$_GET['user'];
    	// $b=$_GET['pwd'];
    	$a=$_POST['user'];
    	$b=$_POST['pwd'];
    	echo "我是php页面！接受到的user为{ $a},接收到的pwd为{ $b}";
    ?>

<!DOCTYPE html>
    <html>
    
    <head>
    	<meta charset="utf-8" />
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<title>ajax操作.txt</title>
    	<script type="text/javascript">
    		// window.onload = function() { 
    		// var xhr = new XMLHttpRequest();
    		// xhr.open('get', 'demo.php?user=1&pwd=2', true);
    		// xhr.send(null);
    		// xhr.onreadystatechange = function() { 
    		// if (xhr.readyState == 4) { 
    		// if (xhr.status == 200) { 
    		// console.log(xhr.responseText)
    		// }
    		// }
    		// }
    		// }
    
    		// //POST方式
    		// window.onload = function() { 
    		// var xhr = new XMLHttpRequest();
    		// xhr.open('POST', 'demo.php', true);
    		// xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=utf-8");//设置头部信息
    		// xhr.send("user=deo");
    		// xhr.onreadystatechange = function() { 
    		// if (xhr.readyState == 4) { 
    		// if (xhr.status == 200) { 
    		// console.log(xhr.responseText)
    		// }
    		// }
    		// }
    		// }
    
    		//封装ajax
    		window.onload = function() { 
    			Ajax({ 
    				"type": "GET",
    				"url": "demo.php",
    				"data": { 
    					"user": "weiucnbin",
    					"pwd": "532"
    				},
    				"success":function(msg){ 
    					console.log("這是成功後獲取的数据"+msg)
    				},
    				"error":function(msg){ 
    					console.log("这是失败后获取的数据"+msg)
    				}
    			});
    
    
    			function Ajax(obj) { 
    				obj = obj || { };
    				obj.type = obj.type || "GET"
    				obj.url = obj.url || '';
    				obj.data = obj.data || null;
    				obj.async = obj.async || true;
    				obj.success=obj.success||function () { }
    				obj.error=obj.error||function () {   }
     
    				//数据data字符串，以&隔开，即后缀
    				var param = [];
    				for (var key in obj.data) { 
    					param.push(key + '=' + obj.data[key]);
    				}
    				var sendData = param.join("&");
    
    				var xhr = new XMLHttpRequest();
    				//当为GET/POST方式发送请求 
    				if (obj.type.toUpperCase() === "GET") { 
    					xhr.open(obj.type, obj.url + "?" + sendData, obj.async);
    					xhr.send();
    				} else { 
    					xhr.open(obj.type, obj.url, obj.async);
    					xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8"); //设置头部信息
    					xhr.send(sendData);
    				}
    
    				xhr.onreadystatechange = function() { 
    					if (xhr.readyState == 4) { 
    						if (xhr.status == 200) { 
    							obj.success&&obj.success(xhr.responseText)
    						}else{ 
    							obj.error&&obj.error(xhr.responseText)
    
    						}
    					}
    				}
    			}
    
    		}
    
    		/* //调用方式 Ajax({ type:访问方式GET/POST url:访问地址 data：向服务器传输的json{}，即提交的后缀=》参数 success：请求成功的回调函数 error：请求失败的回调函数 }) */
    	</script>
    </head>
    
    <body>
    
    	<form action="" method="get">
    		<input type="text" name='user' placeholder='用户名'><br>
    		<input type="password" name='pwd' placeholder='密码'><br>
    		<input type="submit" value="提交">
    	</form>
    </body>
    
    </html>