Ajax

一、form表单传送数据

 

            action            表单提交地址

            method            提交方法

                1、get

                    提交的数据通过地址栏发送，数据添加到地址栏的问号后面

                    数据形式：数据名=数据值&数据名=数据值

                            username=输入的内容&password=输入的内容

                2、post

                    提交的数据通过请求头发送（头部信息，能过控制台可以看到）       

                    <!--name是用来存储数据的，--> 

                <!--没有Ajax以前就用form来把数据传送-->

		<form action="http://baidu.com/" method="get">
			用户名：<input type="text" name="username" />
			密码：<input type="password" name="password" />
			<input type="submit" />
		</form>

 

二、Ajax是什么

             * Ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

             *                     XMLHttpRequest作用和form一样。

             * ajax:Asynchronous JavaScript and XML(异步js和XML)

             *     异步js：js的代码都是至到而下执行的（同步），如果一块代码没有执行完毕，那后面的代码就不会执行。异步就是ajax可以做到不按顺序执行

             *     XML：存储数据的一种格式

             *         <name>陈学辉</name>

             *         <age>18</age>

             *         <qq>356985332</qq>

             *         <email>kaivon@126.com</email>

             * 

             *         ajax不光能够处理XML格式的数据，还可以处理json、数组、字符串类型的数据

             * 

             * ajax到底能干嘛

             *     js与后端进行数据交互的一种技术，通过请求协商好的接口，来获取到想要的数据

             * 

             * 优点

             *     传输数据时候会在本页面请求服务器，不用跳转页面，从而减轻服务器压力。做到实时验证，减少用户返工率并且优化用户体验

三、服务器环境的安装     

             * AJAX是基于http（https）（线上）协议，所以只能在HTTP服务器环境下运行。我们在本地打开的页面，走的是file协议。

             * 本地安装服务器环境用wampserver

             *     1、www目录下的文件夹不能以中文命名，但是文件里面的html文件可以用中文命名

             * 

             *  第三方的软件中的目录就代表了线上的环境了（用本地路径摸你线上）

             *     以后的文件就要放在这个www的文件目录下          

              *    运行的地址（一定要在locallhost下运行才可以）

                    localhost/该页面存放在www的那个文件夹的名称/页面的名字

            

 

 四、Ajax交互流程

            1.XMLHttpRequset（不兼容低版本浏览器IE6）

			//因为XMLHttpRequest是浏览器身上的，如果没有就说明在IE6的环境下了。
			//IE6提供的XMLHttpRequest是在ActiveXObject('Microsoft.XMLHTTP')身下
			var ajax=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject('Microsoft.XMLHTTP');

            2.

             * ajax.readyState        AJAX运行步骤(第一步捕捉不到)

             *     它的值为4的话说明AJAX已经运行完成

             *         0    初始化            还没有调用open()方法

             *        1    载入            已调用send()方法，正在发送请求

             *        2    载入完成        send()方法完成，已收到全部响应内容

             *        3    解析            正在解析响应内容

             *        4    完成            响应内容解析完成，可以在客户端调用了

             * 

             * 

             * ajax.status            服务器对请求的反馈(状态码)

             *         200就是成功的，404就是错误的

            3.

             * onreadystatechange        

             *         readyState的值发生改变时触发的事件，只要这个值有变化就会触发

             * 

             * onload

             *        所有请求成功完成后触发，此时readystate的值为4

             *         （IE678兼容）

            4.* ajax数据交互流程         

             * 1、创建一个ajax对象            买了一个电话

             * 2、填写请求地址                输入号码

             * 3、发送请求                    拨号

             * 4、等待服务器响应                等待

             * 5、接收数据                    通话

  有两种方法，一种用get,一种用post它们的区别是

            get方式

                1、通过地址栏信息进行数据传输，传输的大小有限制

                2、不安全，用户的所有信息都会暴露出来

                3、拼接数据的时候要用encodeURI转一下码，不然有中文就会乱码(在IE6下)

                4、不用设置请求头

                5、数据拼接在open方法里

                6、会有缓存问题

                

            post方式

                1、通过send向服务器传输数据，理论上来说是没有长度或体积限制

                2、相对来说安全，因为不直接暴露用户信息

                3、不用转码，已经通过请求头设置了数据格式，不会有乱码

                4、在send()的前面需要设置一个请求头（不设置要出错）

                    ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

                5、数据要拼接在send方法里

                6、没有缓存问题

用get的方法

			window.onload=function(){
				var inputs=document.querySelectorAll("input");
				
				inputs[2].onclick=function(){
					var val=inputs[0].value;
					
					//1、创建一个ajax对象
					var ajax=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
					
					//2、填写请求地址  方法用get还是post是看后端文件的   ？后面的就是发送的数据，而这个存数据的变量名字也要和后端文件里的名字对应才可以
					ajax.open('get','php/get.php?user='+encodeURI（val),true);
					    //.php为后台的文件
					//3、发送请求
					ajax.send();
					
					//4.等待服务器响应
					if(typeof ajax.onload=='undefined'){
						ajax.onreadystatechange=result;
					}else{
						ajax.onload=result;
					}
					
					//5、接收数据
					function result(){
						if(ajax.readyState==4){
							if(ajax.status==200){
								var span=document.querySelector("span");
								span.innerHTML=ajax.responseText;
							}else{
								alert('返回数据失败')
							}
						}
						
					}
				};
			};
		用户名：<input type="text" name="username" /><span></span><br /><br />
		密码：<input type="password" name="password" />
		<input type="button" value="提交" />

用post的方法

 

			window.onload=function(){
				var inputs=document.querySelectorAll("input");
				
				inputs[2].onclick=function(){
					var val=inputs[0].value;
					
					//1、创建一个ajax对象
					var ajax=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
					
					//2、填写请求地址  方法用get还是post是看后端文件的   ？后面的就是发送的数据，而这个存数据的变量名字也要和后端文件里的名字对应才可以
					//open里面的true和false是决定其执行模式， true是异步 false是同步
					ajax.open('post','php/post.php',true);
					    //.php为后台的文件
					//3、发送请求
					//post的方法要在send之前设置表头
					ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
					ajax.send('user='+val);
					
					
					
					//4.等待服务器响应
					if(typeof ajax.onload=='undefined'){
						ajax.onreadystatechange=result;
					}else{
						ajax.onload=result;
					}
					
					
					//5、接收数据
					function result(){
						if(ajax.readyState==4){
							if(ajax.status==200){
								var span=document.querySelector("span");
								span.innerHTML=ajax.responseText;
							}else{
								alert('返回数据失败')
							}
						}
						
					}
				};
			};
		用户名：<input type="text" name="username" /><span></span><br /><br />
		密码：<input type="password" name="password" />
		<input type="button" value="提交" />

五、Ajax上传

			/*		//ajax的上传配合表单input type='file'这个控件  和progress
			 * 上传只能用post的方式，并且后台需要处理中文
			 * ajax.upload.onprogress		上传的进度事件  
			 * 	ev.loaded	已经上传文件的大小
			 * 	ev.total	总文件的大小
			 * 
			 * FormData		用来创建与表单格式相同的数据，它是由XMLHttpRequest 2级定义。获取到的是一个二进制数据
			 * 		//其里面会拼接数据
			 * 	FormData.append(文件名,文件值)
			 * 
			 * files		上传选中的所有文件列表，放在type为file的表单控件中
			 * 	这里包括：最后修改的时间、大小、类型等等
			 */
			
			window.onload=function(){
				var inputs=document.querySelectorAll("input");
				var progress=document.querySelector("progress");
				inputs[1].onclick=function(){
					var ajax=new XMLHttpRequest();
					
					ajax.open('post','php/post_file.php',true);
					//上传进度监听的事件
					ajax.upload.onprogress=function(ev){
						progress.value=ev.loaded/ev.total*100;
					};
					
					//console.log(inputs[0].files);
					//input type='flie' 身上有files事件，文件信息储存在这里面
					//把上传的数据拼接然后发送给后台， 以下就是拼接数据
					var formadata=new FormData();
					for(var i=0;i<inputs[0].files.length;i++){
						//这里就是拼接数据
						formadata.append('file',inputs[0].files[i]);
					}
					
					ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
					ajax.send(formadata);
					ajax.onload=function(){
						
					};
				};
			};
		<!--progress是H5新增的    显示进度条-->
		<progress value="0" max="100"></progress>
		<!--multiple是可以多选文件的意思-->   			<!--accept决定上传文件的格式-->
		<!--<input type="file" multiple="multiple" accept="application/pdf" />-->
		
		<input type="file" multiple="multiple" />
		<input type="button" value="提交" />

null