写在前面：最近做一个前后端结合的项目时，突然发现自己被页面中使用的相对路径搞糊涂了（PS：其实已经不是第一次了。。。之前有一次屡清楚了，但发现又忘记了，瞧我者好记性O(∩_∩)O）。所以我要趁这次好好记一下！

最近产品需要做不少输入框，产品想要的交互效果是：用户可以输入中英文，随着用户输入能实时显示已经输入的字符个数，当超过数量限制时输入框边框变红，同时给用户提示信息。

咱们不搞一开始就一大堆理论知识介绍，怕把人讲懵了...... 咱们换一个思维方式——"从现象看本质"，先说说我们看到了什么，再从看到的现象中提出问题，最后深入寻找答案。

看到标题时，有些同学可能会想：“我已经用xhr成功地发过很多个Ajax请求了，对它的基本操作已经算挺熟练了。” 我之前的想法和你们一样，直到最近我使用xhr时踩了不少坑儿，我才突然发现其实自己并不够了解xhr，我知道的只是最最基本的使用。于是我决定好好地研究一番xhr的真面目，可拜读了不少博客后都不甚满意，于是我决...

最近遇到一个需求：用postMessage来实现跨域通信。其中有一个注意的地方：即接收方来收到消息时需要对发送方的 origin 进行检查，如果不是目标发送方，则什么都不做，这是出于安全考虑推荐的方式。

focus:当focusable元素获得焦点时，不支持冒泡；focusin:和focus一样，只是此事件支持冒泡；blur:当focusable元素失去焦点时，不支持冒泡；focusout:和blur一样，只是此事件支持冒泡；

最近遇到这样一个需求：需要在页面中显示一段第三方文本信息。这些文本完全由第三方自己定义，我们负责显示在页面即可，第三方要求这些文本需要换行显示即可。

前言：最近在工作中做需求时发现了一个诡异的事情，在使用jQuery触发事件时，并不总是先执行默认行为，再执行绑定的事件行为，有时候可能是相反的顺序。于是上网查找了下资料，还真有个外国哥们和我遇到同一个问题！整理下笔记先~ ~

之前做了一个网页，网页中的所有输入框都被设计为“获得鼠标焦点时外边框不变蓝”。突然某一天，产品觉得这样用户体验不好，不能很明显地告诉用户当前鼠标停在哪里，于是要求改为“当输入框获得鼠标焦点时，外边框自动变蓝；失去焦点时外边框恢复原样”。