近期前端面试题总结

viewport

CSS3已经的媒体查询@media已经能够解决PC端响应式页面设计，但是在手机端显示的时候，移动端网页会默认网页是为pc的宽屏设计的，所以会缩小整个页面来适应屏幕。这时候就不能满足移动端响应式设计。

为了解决这个问题，我们就可以使用HTML5中的viewport,即视口，设置网页相关显示。

举个栗子

• width=device-width    网页的宽适应设备的宽度  也可设置height
• initial-scale   浏览器初始化页面缩放比例
• maximun-scale   允许用户缩放的最大比例
• minmun-scale   允许用户缩放的最小比例
• user-scalable=no   用户不能手动缩放 yes是可以

怎么理解ajax？全称是什么？

AJAX的全称是Asynchronous JavaScript and XML,也就是异步的JavaScript和XML

1.XML和HTML的区别和联系

• HTML被设计用来显示数据，其焦点是数据的外观
• XML被设计用来传输和存储数据，其焦点是数据的内容

2.AJAX的优点：在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

3.创建XMLHttpRequest对象的语法

var xmlhttp;
if(window.XMLHttpRequest){
   xmlhttp=new XMLHttpRequest();
}else{
   xmlhttp=new ActiveXObject(“Mircrosoft.XMLHttp”);
}

4.向服务器发送请求：使用XMLHttpRequest对象的open( )和send( )方法。 

xmlhttp.open("GET","URL",true);
xmlhttp.send();

xmlhttp.open("POST","URL",true);
xmlhttp.send();

GET和POST请求的区别

• GET-从指定的资源请求数据，一般用于获取/查询资源信息
• POST-向指定的资源提交要被处理的数据，一般用于更新资源信息

1.    提交方式不同：get提交，请求的数据会附在URL之后（就是把数据放在HTTP协议头中），post提交，把提交的数据放置在是HTTP包的包体中，因此get提交的数据会在地址栏显示出来，而post不会；
2. 传输数据的大小：get请求 特定的浏览器和服务器对URL长度有限制，而post没有；
3. 安全性不同：post的安全性比get要高很多；
4. 无法使用缓存文件时，用post

如果是像HTML里的表单那样使用post请求时，请使用setRequestHeader()来添加HTTP头。然后再send方法里规定你希望发送的数据

xmlhttp.send("POST","URL",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("发送的数据");

5.当XMLHttpRequset对象上send方法的async属性为true时，请规定响应处理onreadystatechange事件中就绪状态时执行的函数

xmlhttp.onreadystatechange=function(){
   if(xmlhttp.readyState==4&&xmlhttp.status==200){
      //执行
   }
};
xmlhttp.open("GET","URL",true);
xmlhrrp.send();

XMLHttpRequest对象的状态：五种。存在readyState中，当readyState改变，就会调用onreadystatechange函数

• 0    请求未初始化
• 1    服务器连接已建立
• 2    请求已失败
• 3    请求处理中
• 4    请求处理完成，响应就绪  当readyState==4且状态status==200，表示响应已就绪。

6.服务器响应

var xmldoc=xmlhttp.responseText;