vuex ESpromise XMLHttpRequest

vue下状态管理模式 vuex，ES6新增promise对象，Ajax，XMLHttpRequest-异步请求
小程序首页
首页数据是从仓库里面拿到的
1.vuex
是一个专门为vue.js应用程序开发的状态管理模式。
采用集中式管理应用的所有组件状态，并以相应的规格保证状态以一种可以预测的方式发生变化。
state:共有数据到放在这里
view:以声明方式讲state映射到视图
actions:响应在view上的用户输入导致的状态变化

什么时候使用：大型单页应用 （比如说电商小程序，比如说装修的首页）

2.store模式
状态管理也就是数据状态管理，vue 应用程序的各组件之间经常需要进行通信，
除了 v-on、EventBus 等通信方式外，可以采用数据共享的方式进行通信。这种简单的数据共享模式就是 store 模式。

store 状态管理模式的实现思想很简单，就是定义一个 store 对象，对象里有 state 属性存储共享数据，
对象里还存储操作这些共享数据的方法。在组件中将 store.state 共享数据作为 data 的一部分或全部，
在对 store.state 对象里的共享数据进行改变时，必须调用 store 提供的接口进行共享数据的更改。

3.home.vue里面有一个向上提交的change方法，里面携带的参数是当前商户的数据 （后面需要看这个事件哪里用到了）

4. Promise对象
   ES6提供了promise对象，promise对象代表了未来将要发生的事件，用来传递异步操作的消息
   1.对象的状态不受外界的影响，Promise对象代表一个异步操作，有三种状态：
   pending:初始状态，不是成功或者失败状态
   fulfilled:意味着操作成功完成
   rejected:意味着操作失败
   只有异步操作的结果，可以决定当前是哪一种状态 ，任何其他操作都无法改变这个状态
   这又是promise名字的由来，他的英文意思就是[承诺]，表示其他手段无法改变

   2.状态一旦改变，就不会再改，任何时候都可以得到这个结果，promise对象的状态的改变，只有下面两种情况：
   从pending变成resolved，从pending变成rejected，只要这两种情况发生，状态就凝固了，就不用再变了
   会一直保持这个结果，就算改变已经发生过了，你再对promise对象对象添加回调函数，也会立即得到这个结果，
   这与事件完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的
   promise优缺点
   有了promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数
   此外，promise对象提供统一接口，使得控制异步操作更加容易
   缺点：首先无法取消promise，一旦新建他就会立即执行，无法中途取消
   其次，如果不设置回调函数，promise内部抛出的错误，不会反应在外部，
   第三：当处于pending状态时，无法得知目前进展到哪一个阶段，（刚刚开始还是即将完成）
   3.Promise创建
   要想创建一个Promise对象，可以使用new来调用Promise的构造器进行实例化
   var promise = new Promise(function(resolve,reject){
   包含一个参数和一个带有resolve（解析）和reject（拒绝）两个参数的回调，
   在回调中进行一些操作，（例如异步），如果一切都正常，则调用resolve,失败调用reject
   进行异步处理，
   处理结束后，调用Resolved，reject
   })
   4.promise方法
   对于已经实例化的Promise对象可以调用promsie.then()方法，传递resolve和reject方法作为回调
   Promsie.then()是promise的最常用的方法
   5.new XMLHttpRequest(); XMLHttpRequest对象用于在后台与服务器交换数据
   特点：再不重新加载页面的情况下更新网页， 在页面已加载后从服务器请求数据
   在页面已加载从服务器端接收数据，在后台向服务器发送数据

6.AJAX：向服务器发送请求 （XMLHttpRequest是AJAX的基础）
就是在不刷新界面的情况下，向服务器发送请求拿到数据，处理数据进行展示
1.XMLHttpRequest对象用于和服务器交换数据
2.向服务器发送请求：需要使用XMLHttpRequest对象的open()和send()
(1) open(method,url,async):规定请求的类型，URL以及是否异步处理请求
method:GET,POST,请求的类型，
url：文件在服务器上的位置，
async：true（异步）或false（同步）
eg:xmlObj.open(“GET”,“demo.asp?t=xxx”,true); xmlObj.send();

	(2) send(string):仅用于POST请求  
		eg:xmlhttp.open("POST","demo_post.asp",true); xmlObj.send();
	如果需要像HTML表单那样POST数据，请使用setRequestHeader()来设置请求头，然后在send方法中规定发送的数据
		setRequestHeaer(header,value):向请求添加HTTP头
		header:规定头的名称，value：规定头的值
	eg: xmlhttp.open("POST","ajax_test.asp",true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send("fname=Bill&lname=Gates");
	与POST相比 ，GET更简单也更快，并且在大部分情况下都可以用
	在以下情况，请使用POST：
		无法使用缓存文件（更新服务器上的文件或数据库）
		向服务器发送大量数据（POST没有数量限制）
		发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
3. 服务器响应
	如果需要获得服务器的响应，需要使用XMLHttpRequest对象的ResponseText或responseXML属性
	responseText:获得字符串形式的响应数据
	eg:document.getElementById('myDiv').innerHTML = xmlhttp.responstText;
	responseXML:获得XML形式的响应数据
	拿到后端返回XML数据，进行处理，拿到需要的数据进行展示
	xmlDoc=xmlhttp.responseXML;
	txt="";
	x=xmlDoc.getElementsByTagName("ARTIST");
	for (i=0;i<x.length;i++)
	  {
	  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
	  }
	document.getElementById("myDiv").innerHTML=txt;
4.onreadaystatechange事件
	当请求被发送到服务器时，我们需要执行一些基于响应的任务（业务逻辑代码） 
	每当readyState改变时，就会触发onreadystatechange事件
	下面是XMLHttpRequest的状态信息
	 onreadystatechange:存储函数（函数名），每当redaystate属性改变时，就会调用这个函数
	 readyState:存有XMLHttpRequest的状态。从0到4发送变化
		0:请求未初始化；1:服务器连接已建立；2：请求已接收
		3：请求处理中；4：请求已完成，且响应已就绪
	 status:200:“OK”; 404:未找到页面
	 在onreadystatechange事件中，我们规定当服务器响应已经做好被处理的备注时所执行的任务
	 当readystate等于4 且状态为200时，表示响应已就绪
	 eg: xmlhttp.onreadystatechange=function(){
		   if (xmlhttp.readyState==4 && xmlhttp.status==200)
			 {
			 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
			 }
		   }
	callback函数：就是以参数形式传给另一个函数
	 如果网站上存在多个AJAX任务，那么应该为创建XMLhttpRequest对象编写一个标准的函数，这样每个AJAX任务写的
	 时候直接调用这个函数，不用每次写创建对象，发送请求等代码，也就是封装一个函数的意思
		var xmlhttp; // 封装创建对象，发送请求成一个函数 调用的时候把参数传进去
		function loadXMLDoc(url,cfunc){
			if (window.XMLHttpRequest)
			  {// code for IE7+, Firefox, Chrome, Opera, Safari
			  xmlhttp=new XMLHttpRequest();
			}else{// code for IE6, IE5
			  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=cfunc; 状态改变监听事件
			xmlhttp.open("GET",url,true);
			xmlhttp.send();
		}
		
		function myFunction(){
			loadXMLDoc("/ajax/test1.txt",function(){
			  if (xmlhttp.readyState==4 && xmlhttp.status==200){
				document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
				}
			});
		}
	拿到后端数据，进行处理
<script type="text/javascript">
function loadXMLDoc(url){
	var xmlhttp;
	var txt,x,xx,i;
	if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	}else{// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function(){
	  if (xmlhttp.readyState==4 && xmlhttp.status==200){
		txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
		x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
		for (i=0;i<x.length;i++){
		  txt=txt + "<tr>";
		  xx=x[i].getElementsByTagName("TITLE");
			{
			  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
			}
		  txt=txt + "</tr>";
		  }
		txt=txt + "</table>";
		document.getElementById('txtCDInfo').innerHTML=txt;
		}
	  }
	xmlhttp.open("GET",url,true);
	xmlhttp.send();
}
</script>

7.HTML DOM
childNodes 属性返回节点的子节点集合，以 NodeList 对象。