XMLHttpRequest是一个重要的js对象，它是Ajax技术的核心。Ajax全称是Asynchronous JavaScript and XML，中文翻译是异步的JavaScript和XML，它是CSS、HTML、JavaScript、HTTP等多种技术的组合方案，并不是一种新技术。
通过该功能，我们可以在JavaScript脚本中向服务器请求数据，然后更新到DOM中。这一过程无须卸载页面，会带来更好的用户体验。Ajax大致包括四个步骤：创建Ajax对象、发送HTTP请求、接收处理数据、更新DOM。一个典型的Ajax发送json数据的示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function ajax() {
    const person = {
        name: 'jack',
        age: 20
    };
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200 || xhr.status == 304) {
                let time = document.getElementById('time');
                console.log(xhr.responseText);
            }
        }
    }
    xhr.open('post', '/time', true);
    xhr.setRequestHeader("Content-type", "application/json;charset=utf-8");
    xhr.send(JSON.stringify(person));
}

发展历程

Ajax这一名称出现在其技术实现之后，早在1998年，微软Outlook Web Access小组就写成了允许客户端脚本发送HTTP请求(XMLHTTP)的第一个组件，直到2005年该名词才被提出。后来各大浏览器纷纷效仿也提供了这个接口，所以就造成了早期的IE浏览器和其他厂商浏览器对Ajax的实现不一致的情况。后来W3C对其进行了标准化，推出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和Level 2。

JavaScript中处理字符串时，如果目标字符组合情况复杂，引入正则表达式将更加方便有效。比如在查找指定子串或者字符并进行替换时，String原型提供了replace函数，支持字符串或者正则匹配。

语法

1

str.replace(regexp|substr, newSubstr|function)

replace函数会返回替换后的新字符串，但不会改变原字符串的值。这里我们注意到，函数的第二个参数不仅可以传递替换的新字符串，还可以传一个自定义的替换方法。

参数

pattern

如果该参数是一个字符串常量，则str中的存在的这一段字符会被替换成newSubStr，且仅替换第一次出现的字符串。我们也可以使用RegExp对象或者是正则的字面量形式，replace函数会将该规则匹配到的字符串替换成newSubstr或者是自定义替换函数的返回值。如果regexp具有全局标志g，那么replace将替换所有匹配的子串。否则它只替换第一个匹配子串。

replacement

ECMAScript v3规定，replace方法的参数replacement可以是字符串或者。如果传入字符串，每个匹配都将由该字符串替换，它还支持一些以$开头的特殊替换规则。如果传入替换函数，每个匹配都调用该函数并将它返回的字符串作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式匹配的字符串，可以有0个或多个这样的参数。接下来的参数是一个整数，声明了匹配在原字符串中出现的位置。最后一个参数是原字符串本身。

Less的混合机制赋予了CSS继承和函数调用的功能，通过该机制我们可以轻松的将一个已定义的样式引入到另一个样式中，提供了样式抽象和复用的特性，使样式文件具有更好的可读性和可维护性。

普通混合

我们可以通过类选择器或者id选择器定义样式，然后在其他样式中引入：

1
2
3
4
5
6
7
8
9

.mydiv, #div1 {
    color: red;
}
.mixin-class {
    .mydiv();
}
.mixin-id {
    #div1();
}

1
2
3
4
5
6
7
8
9

.mydiv, #div1 {
    color: red;
}
.mixin-class {
    color: red;
}
.mixin-id {
    color: red;
}

在CSS中使用媒体查询，我们可以针对不同的媒体类型定义不同的样式。使用最为广泛的是在设计响应式页面时，针对不同大小的屏幕尺寸，定义不同的高度、宽度、间距等。著名的前端响应式框架Bootstrap就是通过媒体查询来实现响应式布局的。

属性分析

CSS中通过@media规则来实现，语法如下：

1
2
3

@media mediatype and|not|only (media feature) {
    /* css code */
}

1

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystyle.css">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* Nested media query */
@supports (display: flex) {
    @media screen and (min-width: 900px) {
        article {
            display: flex;
        }
    }
}
/* Nested class */
.mydiv {
    position: fixed;
    top: 85px;
    left: 0;
    @media screen and (max-width: 360px) {
        top: 76px;
    }
}

该属性是CSS3中新增的属性，具体作用在于改变容器的盒模型组成方式。由于各种原因很多开发者并不知道该属性的存在，兼容性问题可能是其中的原因之一。常规意义上的盒子模型是指标准w3c盒子模型、IE盒子模型，他们之间的区别也是老生常谈的远古原理了，这里不再赘述。

属性分析

box-sizing语法如下：

1

box-sizing: content-box|border-box|inherit;

content-box

该值将元素盒模型组成方式设置为标准w3c盒子模型，即元素实际占用宽度与高度包括content、padding、border。浏览器会优先根据为元素指定的width、height值来绘制内容部分，之后在其外部绘制元素的内边距和边框，这样就会造成子元素将父元素撑开甚至内容超出的现象。可以将该模型概括为先放内容再扩展盒子，目前现代浏览器多采用这种布局方式。

border-box

该值将元素盒模型组成方式设置为IE盒子模型，即元素实际占用宽度与高度就是为元素指定的width、height属性值。浏览器会先依据该值优先绘制整个盒子，之后在盒子内部绘制元素的内边距和边框，最后剩余的空间放内容部分，不论是否放得下，这种情况下子元素无法撑开父元素，只能在盒模型剩余空间中绘制实际元素内容。但是存在特殊情况，下面将进一步讨论。