美文网首页
HTML5学习小记八

HTML5学习小记八

作者: 涛涛灬灬 | 来源:发表于2017-03-08 19:40 被阅读0次

    关于一些小知识点的总结

    1. GET 和 POST 的区别?
      1、 get是从服务器获取数据 -----"取"; post是向服务器提交数据 -----“发”
      2、 form表单默认的method为"GET"
      3、 get将数据按照variable = value 的形式,加上URL的后面,中间用"?"连接,各个变量之间用"&"连接; post将数据不像get方式那样
      4、 参数上面3的数据传输方式,可以得出:post安全性比get方式要高
      5、
      URL不存在参数上限的问题,HTTP协议没有对URL长度进行限制,限制的是部分浏览器和服务器的限制。
      IE对URL长度的限制为2083KB
      get方式是通过URL传输的数据的,数据量一般在2KB左右,但是执行效率比post高
      理论上post方式没有大小限制,HTTP协议规范也没进行大小限制。post数据没有限制,限制的是服务器处理程序的能力
      2.socket和http的区别:
      socket是网络传输层的一种技术,跟http有本质的区别,http是应用层的一个网络协议。使用socket技术理论上来讲,按照http的规范,完全可以使用socket来达到发送http请求的目的,只要发送的数据包按照http协议来即可

    Socket和http的区别:
    Socket是长连接,http是短连接
    Socket是双向通信,http是单向的,只能客户端向服务器发送数据
    Socket的数据完全由自己组织,http必须按照http协议来发送
    3.display有哪些值?说明他们的作用。position的值relative和absolute定位原点是?absolute与fixed共同点与不同点?

    1、display
    block 象块类型元素一样显示。
    none 缺省值。象行内元素类型一样显示。
    inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
    list-item 象块类型元素一样显示,并添加样式列表标记。

    2、position
    absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
    fixed (老IE不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位。
    relative 生成相对定位的元素,相对于其正常位置进行定位。
    static 默认值。没有定位,元素出现在正常的流中
    inherit 规定从父元素继承 position 属性的值。
    *(忽略 top, bottom, left, right z-index 声明)

    absolute与fixed共同点与不同点
    A、共同点:
    1.改变行内元素的呈现方式,display被置为block;
    2.让元素脱离普通流,不占据空间;
    3.默认会覆盖到非定位元素上;
    B、不同点:
    absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。
    当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。

    display:none和visibility:hidden的区别?
    display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。
    visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。
    3.事件委托---- 优点消耗内存大,处理速度快

    document.onclick,这个示例把事件委托放到了document上,即点击document就直接触发我们相应的事件。
        document.onclick = function(event){             
            var event = event || window.event;         //IE doesn't pass in the event object  
            var target = event.target || event.srcElement; //IE uses srcElement as the target 
            switch(target.id){         
                case "help-btn":                 
                    openHelp();                 
                break; 
    
                case "save-btn":                 
                    saveDocument();                
                break;   
    
                case "undo-btn":                 
                    undoChanges();                
                break;         
                //如果有其元素需要处理点击事件, 只需要在这里添加不同的case分支就行。     
            } 
        };
    

    4.模拟http请求--JavaScript请求一个HTML文件, test.html, 文件的文本内容为"I'm a test.",

    <script type="text/javascript" language="javascript">
                  var http_request = false; 
    
                  function makeRequest(url) {          
                    http_request = false;          
                    if (window.XMLHttpRequest) { // Mozilla, Safari,...            
                        http_request = new XMLHttpRequest();             
                        if (http_request.overrideMimeType) {                
                         http_request.overrideMimeType('text/xml');             
                        }         
                     } else if (window.ActiveXObject) { // IE            
                        try {                 
                            http_request = new ActiveXObject("Msxml2.XMLHTTP");             
                        } 
                        catch (e) {                 
                            try {                     
                                http_request = new ActiveXObject("Microsoft.XMLHTTP");                 
                            }catch(e){}             
                        }         
                    }          
                    if (!http_request) {             
                        alert('Giving up :( Cannot create an XMLHTTP instance');             
                        return false;         
                    }         
                    http_request.onreadystatechange = alertContents;         
                    http_request.open('GET', url, true);         
                    http_request.send(null);      
                }      
                function alertContents() {          
                    if (http_request.readyState == 4) {             
                        if (http_request.status == 200) {                 
                            alert(http_request.responseText);             
                        }else{                 
                            alert('There was a problem with the request.');             
                        }         
                    }      
                }
    </script>
    <style>
                    .testbtn{ cursor: pointer; text-decoration: underline;}
    </style>
    <span class='testbtn' onclick="makeRequest('test.html')">Make a request</span>
    
    

    5.对于js中的数组去重的几种方式

    //方法一
    Array.prototype.unique1 = function () {
      var n = []; //一个新的临时数组
      for (var i = 0; i < this.length; i++) //遍历当前数组
      {
        //如果当前数组的第i已经保存进了临时数组,那么跳过,
        //否则把当前项push到临时数组里面
        if (n.indexOf(this[i]) == -1) n.push(this[i]);
      }
      return n;
    }
    -------------------------------------------------------------------------------
    //方法二
    Array.prototype.unique2 = function()
    {
        var n = {},r=[]; //n为hash表,r为临时数组
        for(var i = 0; i < this.length; i++) //遍历当前数组
        {
            if (!n[this[i]]) //如果hash表中没有当前项
            {
                n[this[i]] = true; //存入hash表
                r.push(this[i]); //把当前数组的当前项push到临时数组里面
            }
        }
        return r;
    }
    -------------------------------------------------------------------------------
    //方法三
    Array.prototype.unique3 = function()
    {
        var n = [this[0]]; //结果数组
        for(var i = 1; i < this.length; i++) //从第二项开始遍历
        {
            //如果当前数组的第i项在当前数组中第一次出现的位置不是i,
            //那么表示第i项是重复的,忽略掉。否则存入结果数组
            if (this.indexOf(this[i]) == i) n.push(this[i]);
        }
        return n;
    }
    

    相关文章

      网友评论

          本文标题:HTML5学习小记八

          本文链接:https://www.haomeiwen.com/subject/zgbbgttx.html