面试题(6)手写promise封装ajax请求,在地址栏输入网址敲回车发生了什么?,什么是BFC?什么情况下触发BFC

(1)手写promise封装ajax请求

	<script type="text/javascript">
		var ajaxOptions = {
    
    
			url: 'url', //发送到服务器端的url
			method: 'GET', //GET/POST
			async: true, //异步为true,同步为false
			data: null, //数据
			dataType: 'text', //数据类型
		}

		function ajax(protoOptions) {
    
    
			//定义空对象,并在循环中赋值
			var options = {
    
    };
			for (var i in ajaxOptions) {
    
    
				options[i] = protoOptions[i] || ajaxOptions[i];
			}
			//返回一个异步回调
			return new Promise(function(resolve, reject) {
    
    
				var xhr = new XMLHttpRequest(); //XMLHttpRequest 对象用于在后台与服务器交换数据
				//XMLHttpRequest.open()方法用于初始化一个HTTP请求参数
				//第一个参数是请求方式
				//第二个参数是请求地址
				//第三个参数是是否异步
				xhr.open(options.method, options.url, options.async);
				xhr.onreadystatechange = function() {
    
     //每当readyState的值变化,onreadystatechange函数会自动执行
					if (this.readyState === 4 && this.status === 200) {
    
    
						//服务器响应的状态信息
						//0:请求未初始化
						//1:服务器连接已建立
						//2:请求已接收
						//3:请求处理中
						//4:请求已完成且响应已就绪
						//status是接口返回的状态码,200为请求成功
						resolve(this.responseText, this); //请求成功后返回数据
					} else {
    
    
						var resJson = {
    
    
							code: this.status,
							response: this.response
						}
						reject(resJson, this)
					}
				}
				xhr.send()
				//XMLHttpRequest.send()方法用于发送HTTP请求
				//如果是异步请求(默认为异步请求),则此方法会在请求发送后立即返回
				//如果是同步请求,则此方法直到响应到达后才返回
			})
		}
	</script>[添加链接描述](https://www.jianshu.com/p/7f1411317295)


(2)在地址栏输入网址敲回车发生了什么?

文章描述

(3)什么是BFC?什么情况下触发BFC

  • html根元素
  • float 不为 none
  • 绝对定位元素 也就是 position 为 absolute 和 fixed
  • 行内快元素 display 为 inline-block
  • display 为 table-cell inline-block flex inline-flex grid inline-grid table-caption(表格标题)
  • overflow 不为 visible
    BFC

猜你喜欢

转载自blog.csdn.net/Sunshine_GirlXue/article/details/103190633