Promise、 promiseAjax、跨域的步骤、接口、栅格布局

Promise实现多个回调函数的嵌套调用

// function f1(){
	// 	console.log("f1");
	// 	let p = new Promise(function(f){
	// 		f();
	// 	});
		
	// 	return p;
	// }
	
	// function f2(){
	// 	console.log("f2");
	// 	let p = new Promise(function(f){
	// 		f();
	// 	});
		
	// 	return p;
	// }
	
	// function f3(){
	// 	console.log("f3");
	// 	let p = new Promise(function(f){
	// 		f();
	// 	});
		
	// 	return p;
	// }
	
	// function f4(){
	// 	console.log("f4");
	// }
    // f1().then(f2).then(f3).then(f4);

注意事项:
promise实际操作中,回调函数一定运行的是异步代码
promise回调函数的两个参数:
发送请求,接收响应
参数1:代表成功时执行的代码,
参数2:代表失败时执行的代码
promise处理响应的三个状态
进行中->成功
进行中->失败

// function fun(){
	// 	let p = new Promise(function(success,failed){
	// 		//不可能两个函数同时执行
	// 		success();
	// 		failed();
	// 	});
		
	// 	return p;
	// }
	
	// fun().then(function(){
	// 	console.log(1);
	// },function(){
	// 	console.log(2);
	// });

 promiseAjax

<script>
	function ajax(type,url,isAsyn,data){
		let xhr = new XMLHttpRequest();
		
		type = type.toLowerCase();
		
		if(type == "get"){
			let urlParams = url;
			if(data != ""){
				//6ajaxFun.php?name=laowang&pwd=666
				urlParams += "?" + data;
			}
			xhr.open(type,urlParams,isAsyn);
			xhr.send();
		}else if(type == "post"){
			xhr.open(type,url,isAsyn);
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xhr.send(data);
		}else{
			console.log("type参数错误");
		}
		
		let p = new Promise(function(success,failed){
			xhr.onreadystatechange = function(){
				if(xhr.status==200 && xhr.readyState==4){
					success(xhr.responseText);
				}else if(xhr.readyState==4){
					failed();
				}
			}
		});
		
		return p;
	}
	
	ajax("GET","2promiseAjax.php",true,"name=laowang&pwd=666").then(fun,fun1);
	//ajax("post","2promiseAjax",true,"name=高少鑫&pwd=999").then(fun,fun1);
	
	function fun(resText){
		console.log(resText);
	}
	
	function fun1(){
		console.log("失败");
	}
</script>

No 'Access-Control-Allow-Origin'
同源策略阻止跨域访问
同源策略:同ip,同端口,同协议

    
跨域的步骤
1.前端和后端约定函数名称
2.前端通过script的src访问后端文件
3.后端模拟前端的函数调用

接口
url:http://suggestion.baidu.com/su
参数:wd=关键字&cb=回调函数名
返回数据的格式:json对象

let oText = document.querySelector("input");
	let oUl = document.querySelector("ul");
	
	oText.oninput = function(){
		let oScript = document.createElement("script");
		oScript.src = `http://suggestion.baidu.com/su?wd=${this.value}&cb=fun`;
		document.body.appendChild(oScript);
	}
	
	function fun(resText){
		let strHtml = "";
		for(let i=0; i<resText.s.length; i++){
			strHtml += `<li>${resText.s[i]}</li>`;
		}
		oUl.innerHTML = strHtml;
	}

栅格布局
     对页面的宽度进行分割,
     页面宽度为12份,可以根据份数来调整元素的宽度

<div class="container">
		<div class="row">
			<div class="col-md-4">.col-md-4</div>
			<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>		</div>
	</div>