atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>My blog</title>
  
  <link href="/atom.xml" rel="self"/>
  
  <link href="http://yoursite.com/"/>
  <updated>2016-05-31T14:27:57.578Z</updated>
  <id>http://yoursite.com/</id>
  
  <author>
    <name>jiangBiao</name>
    
  </author>
  
  <generator uri="http://hexo.io/">Hexo</generator>
  
  <entry>
    <title>JS中对变量和函数声明的提前</title>
    <link href="http://yoursite.com/2016/05/31/%E5%8F%98%E9%87%8F%E5%A3%B0%E6%98%8E%E6%8F%90%E5%89%8D/"/>
    <id>http://yoursite.com/2016/05/31/变量声明提前/</id>
    <published>2016-05-31T13:36:36.000Z</published>
    <updated>2016-05-31T14:27:57.578Z</updated>
    
    <content type="html">&lt;h2 id=&quot;JS中对变量和函数声明的提前&quot;&gt;&lt;a href=&quot;#JS中对变量和函数声明的提前&quot; class=&quot;headerlink&quot; title=&quot;JS中对变量和函数声明的提前&quot;&gt;&lt;/a&gt;JS中对变量和函数声明的提前&lt;/h2&gt;&lt;h3 id=&quot;一、变量声明“被提前”&quot;&gt;&lt;a href=&quot;#一、变量声明“被提前”&quot; class=&quot;headerlink&quot; title=&quot;一、变量声明“被提前”&quot;&gt;&lt;/a&gt;一、变量声明“被提前”&lt;/h3&gt;&lt;p&gt; 在JS中，JavaScript解析器会将当前作用域内声明的所有变量和函数都会放到作用域的开始处，但是，只有变量的声明被提前到作用域的开始处了，而赋值操作被保留在原处。&lt;br&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;首先看一段代码，如下：  &lt;/p&gt;
&lt;pre&gt;&lt;code&gt;(function() {
  console.log(a);// Uncaught ReferenceError: a is not defined
})();
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;运行上面代码会报错，因为 a 变量根本就没有定义过！&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;再来看看下面的代码：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;(function() {
  console.log(a); //undefined
  var a = &amp;quot;hello world!&amp;quot;;
  console.log(a);//hello world!
})();
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;首先，上面这段代码是正确的，没有任何问题。但是，为什么不报错？为什么居然输出的是 undefined？如下：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;(function() {

    var a;//声明被提前到作用域开始处了！

    console.log(a); 

     a = &amp;quot;hello world!&amp;quot;;//赋值操作还在原地!

    console.log(a);
})();
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;这就是为什么上述代码不报异常的原因！变量和函数经过“被提前”之后，a 变量其实就被放在了调用函数的前面，根据 JavaScript 语法的定义，已声明而未被赋值的变量会被自动赋值为 undefined ，所以，第一次打印 a 变量的值就是 undefined，后面我们对 a 变量进行了赋值操作，所以，第二次再打印变量就会输出”hello world!”。&lt;/p&gt;
&lt;hr&gt;
&lt;h3 id=&quot;二、函数声明“被提前”&quot;&gt;&lt;a href=&quot;#二、函数声明“被提前”&quot; class=&quot;headerlink&quot; title=&quot;二、函数声明“被提前”&quot;&gt;&lt;/a&gt;二、函数声明“被提前”&lt;/h3&gt;&lt;p&gt;前边说的是变量，接下来我们说说函数。函数的“被提前”还要分两种情况，一种是函数声明，第二种是函数作为值赋值给变量。  &lt;/p&gt;
&lt;h4 id=&quot;情况一：&quot;&gt;&lt;a href=&quot;#情况一：&quot; class=&quot;headerlink&quot; title=&quot;情况一：&quot;&gt;&lt;/a&gt;情况一：&lt;/h4&gt;&lt;pre&gt;&lt;code&gt;a();//&amp;quot;hello world!&amp;quot;
function a() {  
    console.log(&amp;quot;hello world!&amp;quot;);
}
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;如上所示，JavaScript 解释器允许你在函数声明之前使用，也就是说，函数声明并不仅仅是函数名“被提前”了，整个函数的定义也“被提前”了！所以上述代码能够正确执行。&lt;/p&gt;
&lt;h4 id=&quot;情况二：&quot;&gt;&lt;a href=&quot;#情况二：&quot; class=&quot;headerlink&quot; title=&quot;情况二：&quot;&gt;&lt;/a&gt;情况二：&lt;/h4&gt;&lt;pre&gt;&lt;code&gt;a();//这是a

b();//Uncaught TypeError: b is not a function

function a() {  
    console.log(&amp;quot;这是a&amp;quot;);
}

var b = function () {  
    console.log(&amp;quot;这是b&amp;quot;);
};
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;我们做了一个对比，a 函数被妥妥的执行了，符合第一种类型；b 变量“被提前”了，但是他的赋值（也就是函数）并没有被提前，从这一点上来说，和前面我们所讲的变量“被提前”是完全一致的，并且，由于“被提前”的变量的默认值是 undefined ，所以报的错误属于“类型不匹配”，因为 undefined 不是函数，所以不能被调用。&lt;/p&gt;
&lt;h3 id=&quot;总结&quot;&gt;&lt;a href=&quot;#总结&quot; class=&quot;headerlink&quot; title=&quot;总结&quot;&gt;&lt;/a&gt;总结&lt;/h3&gt;&lt;p&gt;1.变量的声明被提前到作用域顶部，赋值保留在原地&lt;br&gt;2.函数声明整个“被提前”&lt;br&gt;3.函数作为值赋给变量时只有变量“被提前”了，函数没有“被提前”  &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;作为最佳实践：变量声明一定要放在作用域/函数的最上方！&lt;/strong&gt;&lt;/p&gt;
</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;JS中对变量和函数声明的提前&quot;&gt;&lt;a href=&quot;#JS中对变量和函数声明的提前&quot; class=&quot;headerlink&quot; title=&quot;JS中对变量和函数声明的提前&quot;&gt;&lt;/a&gt;JS中对变量和函数声明的提前&lt;/h2&gt;&lt;h3 id=&quot;一、变量声明“被提前”&quot;&gt;&lt;a href=&quot;#一、变量声明“被提前”&quot; class=&quot;headerlink&quot; title=&quot;一、变量声明“被提前”&quot;&gt;&lt;/a&gt;一、变量声明“被提前”&lt;/h3&gt;&lt;p&gt; 在JS中，JavaScript解析器会将当前作用域内声明的所有变量和函数都会放到作用域的开始处，但是，只有变量的声明被提前到作用域的开始处了，而赋值操作被保留在原处。&lt;br&gt;
    
    </summary>
    
    
      <category term="hoist" scheme="http://yoursite.com/tags/hoist/"/>
    
  </entry>
  
  <entry>
    <title>利用JSONP解决跨域问题</title>
    <link href="http://yoursite.com/2016/05/30/JSONP%E8%AF%A6%E8%A7%A3/"/>
    <id>http://yoursite.com/2016/05/30/JSONP详解/</id>
    <published>2016-05-30T10:37:18.000Z</published>
    <updated>2016-05-30T11:37:47.307Z</updated>
    
    <content type="html">&lt;h2 id=&quot;利用JSONP解决跨域问题&quot;&gt;&lt;a href=&quot;#利用JSONP解决跨域问题&quot; class=&quot;headerlink&quot; title=&quot;利用JSONP解决跨域问题&quot;&gt;&lt;/a&gt;利用JSONP解决跨域问题&lt;/h2&gt;&lt;h4 id=&quot;什么是跨域？&quot;&gt;&lt;a href=&quot;#什么是跨域？&quot; class=&quot;headerlink&quot; title=&quot;什么是跨域？&quot;&gt;&lt;/a&gt;什么是跨域？&lt;/h4&gt;&lt;p&gt;概念：由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。 &lt;/p&gt;
&lt;p&gt;例：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;URL                      说明       是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js     同一域名下   允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js     同一域名，不同端口  不允许
http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名 不允许
&lt;/code&gt;&lt;/pre&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;h4 id=&quot;解决：通过jsonp跨域&quot;&gt;&lt;a href=&quot;#解决：通过jsonp跨域&quot; class=&quot;headerlink&quot; title=&quot;解决：通过jsonp跨域&quot;&gt;&lt;/a&gt;解决：通过jsonp跨域&lt;/h4&gt;&lt;p&gt;JSONP 是 JSON 的一种“使用模式；&lt;br&gt;JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。  &lt;/p&gt;
&lt;p&gt;在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;例如：有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，  假设这个json数据地址
是http://example.com/data.php,那么a.html中的代码就可以这样

&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
function dosomething(jsondata){
    //处理获得的json数据
}
&amp;lt;/script&amp;gt;
&amp;lt;script src=&amp;quot;http://example.com/data.php?callback=dosomething&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;?php
$callback = $_GET[&amp;apos;callback&amp;apos;];//得到回调函数名
$data = array(&amp;apos;a&amp;apos;,&amp;apos;b&amp;apos;,&amp;apos;c&amp;apos;);//要返回的数据
echo $callback.&amp;apos;(&amp;apos;.json_encode($data).&amp;apos;)&amp;apos;;//输出
?&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;最终，输出结果为：dosomething([‘a’,’b’,’c’]);&lt;/p&gt;
&lt;h4 id=&quot;总结：客户端给服务器传送一个函数名，服务器将这函数名与数据拼接成一个大的字符串，再反传给客户端，客户端用eval-执行这个字符串，相当于调用了客户端已有的函数，参数是服务器端返回来的，这种使用JSON的方法就叫JSONP。&quot;&gt;&lt;a href=&quot;#总结：客户端给服务器传送一个函数名，服务器将这函数名与数据拼接成一个大的字符串，再反传给客户端，客户端用eval-执行这个字符串，相当于调用了客户端已有的函数，参数是服务器端返回来的，这种使用JSON的方法就叫JSONP。&quot; class=&quot;headerlink&quot; title=&quot;总结：客户端给服务器传送一个函数名，服务器将这函数名与数据拼接成一个大的字符串，再反传给客户端，客户端用eval()执行这个字符串，相当于调用了客户端已有的函数，参数是服务器端返回来的，这种使用JSON的方法就叫JSONP。&quot;&gt;&lt;/a&gt;总结：客户端给服务器传送一个函数名，服务器将这函数名与数据拼接成一个大的字符串，再反传给客户端，客户端用eval()执行这个字符串，相当于调用了客户端已有的函数，参数是服务器端返回来的，这种使用JSON的方法就叫JSONP。&lt;/h4&gt;&lt;p&gt;如果你的页面使用jquery，那么通过它封装的方法就能很方便的来进行jsonp操作了&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;script type=&amp;quot;text/javascript&amp;quot;&amp;gt;
    $.getJSON(&amp;apos;http://example.com/data.php?callback=?&amp;apos;,function(jsondata){
        //处理获得的json数据
    });
&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;摘自博客园&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;
</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;利用JSONP解决跨域问题&quot;&gt;&lt;a href=&quot;#利用JSONP解决跨域问题&quot; class=&quot;headerlink&quot; title=&quot;利用JSONP解决跨域问题&quot;&gt;&lt;/a&gt;利用JSONP解决跨域问题&lt;/h2&gt;&lt;h4 id=&quot;什么是跨域？&quot;&gt;&lt;a href=&quot;#什么是跨域？&quot; class=&quot;headerlink&quot; title=&quot;什么是跨域？&quot;&gt;&lt;/a&gt;什么是跨域？&lt;/h4&gt;&lt;p&gt;概念：由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。 &lt;/p&gt;
&lt;p&gt;例：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;URL                      说明       是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js     同一域名下   允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js     同一域名，不同端口  不允许
http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名 不允许
&lt;/code&gt;&lt;/pre&gt;
    
    </summary>
    
    
      <category term="js跨域" scheme="http://yoursite.com/tags/js%E8%B7%A8%E5%9F%9F/"/>
    
  </entry>
  
  <entry>
    <title>ajax异步刷新技术</title>
    <link href="http://yoursite.com/2016/05/29/ajax%E5%BA%94%E7%94%A8/"/>
    <id>http://yoursite.com/2016/05/29/ajax应用/</id>
    <published>2016-05-29T11:45:30.000Z</published>
    <updated>2016-05-29T15:18:06.302Z</updated>
    
    <content type="html">&lt;h2 id=&quot;异步的HTTP“请求-响应”模型——XMLHttpRequest&quot;&gt;&lt;a href=&quot;#异步的HTTP“请求-响应”模型——XMLHttpRequest&quot; class=&quot;headerlink&quot; title=&quot;异步的HTTP“请求-响应”模型——XMLHttpRequest&quot;&gt;&lt;/a&gt;异步的HTTP“请求-响应”模型——XMLHttpRequest&lt;/h2&gt;&lt;p&gt;  当前页面发起一个异步的请求，为了获取服务器端返回的一小段数据(一般都不是完整的HTML页面)，客户端也不会把当前页面内容清除，而是等待着服务器返回数据片段，把这些片段的内容挂载到当前DOM树上。&lt;br&gt;  &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;优点：客户端不会出现一片惨白；服务器端返回的数据量小多了。&lt;/p&gt;
&lt;h2 id=&quot;一、原生js使用AJAX的基本步骤：&quot;&gt;&lt;a href=&quot;#一、原生js使用AJAX的基本步骤：&quot; class=&quot;headerlink&quot; title=&quot;一、原生js使用AJAX的基本步骤：&quot;&gt;&lt;/a&gt;一、原生js使用AJAX的基本步骤：&lt;/h2&gt;&lt;pre&gt;&lt;code&gt;使用AJAX应用的步骤：
(第一步)
创建XMLHttpRequest对象——注意IE的兼容性问题
    var xhr = null ;
        if(  window.XMLHttpRequest ){   //普通浏览器
            xhr = new XMLHttpRequest( );        
        }else{  //老IE浏览器
            xhr =  new ActiveXObject(&amp;apos;Microsoft.XMLHTTP&amp;apos;);
        }
(第二步)
为XHR对象的onreadystatechange句柄绑定监听函数——监听xhr.readyState属性值的改变
    xhr.onreadystatechange = function(){
            if(xhr.readyState===4){    //接收了所有的响应数据
                if(xhr.status===200){
                    //响应成功，可以处理响应主体数据了...xhr.responseText
                }else{
                    //响应已结束，但并不是成功的响应
                }
            }
        }

(第三步)
使用XHR对象创建一个HTTP请求消息
    xhr.open(请求方法,  URI,  true);  //请求方法：get、post；true是异步
(第四步)
使用XHR对象发送请求消息给服务器
    xhr.send(null/&amp;apos;k1=v1&amp;amp;k2=v2&amp;apos;);

 一、使用AJAX发送GET请求
        (1)创建XHR对象
        (2)绑定监听函数
        (3)创建请求消息
        xhr.open(&amp;apos;GET&amp;apos;, &amp;apos;xxx.php?k1=v1&amp;amp;k2=v2&amp;apos;, true);
        (4)发送请求消息
        xhr.send(null);  //HTTP协议规定：GET没有请求主体

二、使用AJAX发送POST请求
        (1)创建XHR对象
        (2)绑定监听函数
        (3)创建请求消息
        xhr.open(&amp;apos;POST&amp;apos;, &amp;apos;xxx.php&amp;apos;, true);
        (4)发送请求消息——必须设置Content-Type请求头（因为AJAX POST请求默认使用Content-Type: text/plain发送请求主体数据——PHP服务器是无法接收）
        xhr.setRequestHeader(&amp;apos;Content-Type&amp;apos;,  &amp;apos;application/x-www-form-urlencoded&amp;apos;);
        xhr.send(encodeURI(&amp;apos;k1=v1&amp;amp;k2=v2&amp;amp;k3=v3&amp;apos;));//当有中文时需用encodeURI（）
&lt;/code&gt;&lt;/pre&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;h2 id=&quot;二、使用jQuery简化AJAX操作：&quot;&gt;&lt;a href=&quot;#二、使用jQuery简化AJAX操作：&quot; class=&quot;headerlink&quot; title=&quot;二、使用jQuery简化AJAX操作：&quot;&gt;&lt;/a&gt;二、使用jQuery简化AJAX操作：&lt;/h2&gt;&lt;pre&gt;&lt;code&gt;1.使用$(&amp;apos;...&amp;apos;).load(url,  [data],  [fn])函数//参数可以写成{key:value}  
  作用：载入远程 HTML 文件代码片段并插入至当前选中的DOM元素中。
  此方法最大的限制：(1)服务器返回的数据必须是HTML代码片段！(2)且因为底层使用的是（innerHTML=返回值），原有内容都会被清除掉——灵活性不足。
&lt;/code&gt;&lt;/pre&gt;&lt;hr&gt;
&lt;pre&gt;&lt;code&gt;2.使用$.ajax(  )函数
        使用方法：
        $.ajax({
            type:&amp;apos;GET/POST&amp;apos;,
            url: &amp;apos;xxx.php&amp;apos;,
            data: &amp;apos;k1=v1&amp;amp;k2=v2&amp;apos;/{k1:v1, k2:v2},
            dataType: &amp;apos;text/html/script/xml/json/jsonp&amp;apos;
            async: true,
            error: function(){   },
            success: function(){   }
        });
&lt;/code&gt;&lt;/pre&gt;&lt;hr&gt;
&lt;pre&gt;&lt;code&gt;3.使用$.get()、$.post()、$.getScript()、$.getJSON()方法
        $.ajax({ 
            type:  &amp;apos;GET&amp;apos;,
            url: &amp;apos;...&amp;apos;
            data:  ...,
            success: fn
          })
          上述方法可以简写为：  $.get(&amp;apos;url&amp;apos;,  data,  fn);//如果没写dataType，会自动获取服务器端的响应头部，
          根据类型自动解析

        $.ajax({ 
            type:  &amp;apos;POST&amp;apos;,
            url: &amp;apos;...&amp;apos;
            data:  ...,
            success: fn
          })
          上述方法可以简写为：   $.post(&amp;apos;url&amp;apos;,  data,   fn)    

        $.getJSON()是$.ajax({ dataType: &amp;apos;json&amp;apos;})的简写，用于从服务器一段JSON数据，并解析为JS对象。

        $.getScript()是$.ajax({ dataType: &amp;apos;script&amp;apos;})的简写，用于从服务器一段JavaScript脚本，并立即调用eval()函数执行返回的脚本。
&lt;/code&gt;&lt;/pre&gt;&lt;hr&gt;
&lt;pre&gt;&lt;code&gt;4.jQuery对AJAX的支持——表单输入的序列化
  var stringData = $(&amp;apos;#xxForm&amp;apos;).serialize( );//主要
  var objData = $(&amp;apos;#xxForm&amp;apos;).serializeArray();
  表单序列化：把当前选定的表单中所有的输入域的名和值组成一个大的用&amp;amp;符号拼接的字符串，可以直接用于AJAX请求方法。
&lt;/code&gt;&lt;/pre&gt;&lt;h2 id=&quot;三、Angular-JS里-http：提供异步的AJAX请求服务&quot;&gt;&lt;a href=&quot;#三、Angular-JS里-http：提供异步的AJAX请求服务&quot; class=&quot;headerlink&quot; title=&quot;三、Angular JS里$http：提供异步的AJAX请求服务&quot;&gt;&lt;/a&gt;三、Angular JS里$http：提供异步的AJAX请求服务&lt;/h2&gt;&lt;pre&gt;&lt;code&gt;1.GET请求
    .controller(&amp;apos;名称&amp;apos;, function($http){
        $http.get(&amp;apos;xx.php？k1=v1&amp;amp;k2=v2&amp;apos;).success(fn)
    })

    例：$http.get(&amp;apos;data/dish.php?kw=&amp;apos;+$scope.kw)
            .success(function(data){

            });


2.POST请求——重点且注意（必须设置请求头部，且用jQuery的param()方法解析data）
    var data = {k1: v1,  k2:v2 };
    data = jQuery.param( data );
    $http.post(
        &amp;apos;xx.php&amp;apos;,
        data,
        { 
        headers :{&amp;apos;Content-Type&amp;apos;:&amp;apos;application/x-www-form-urlencoded&amp;apos;}     
        }
    )
    .success(fn);
&lt;/code&gt;&lt;/pre&gt;</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;异步的HTTP“请求-响应”模型——XMLHttpRequest&quot;&gt;&lt;a href=&quot;#异步的HTTP“请求-响应”模型——XMLHttpRequest&quot; class=&quot;headerlink&quot; title=&quot;异步的HTTP“请求-响应”模型——XMLHttpRequest&quot;&gt;&lt;/a&gt;异步的HTTP“请求-响应”模型——XMLHttpRequest&lt;/h2&gt;&lt;p&gt;  当前页面发起一个异步的请求，为了获取服务器端返回的一小段数据(一般都不是完整的HTML页面)，客户端也不会把当前页面内容清除，而是等待着服务器返回数据片段，把这些片段的内容挂载到当前DOM树上。&lt;br&gt;  &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;优点：客户端不会出现一片惨白；服务器端返回的数据量小多了。&lt;/p&gt;
&lt;h2 id=&quot;一、原生js使用AJAX的基本步骤：&quot;&gt;&lt;a href=&quot;#一、原生js使用AJAX的基本步骤：&quot; class=&quot;headerlink&quot; title=&quot;一、原生js使用AJAX的基本步骤：&quot;&gt;&lt;/a&gt;一、原生js使用AJAX的基本步骤：&lt;/h2&gt;&lt;pre&gt;&lt;code&gt;使用AJAX应用的步骤：
(第一步)
创建XMLHttpRequest对象——注意IE的兼容性问题
    var xhr = null ;
        if(  window.XMLHttpRequest ){   //普通浏览器
            xhr = new XMLHttpRequest( );        
        }else{  //老IE浏览器
            xhr =  new ActiveXObject(&amp;apos;Microsoft.XMLHTTP&amp;apos;);
        }
(第二步)
为XHR对象的onreadystatechange句柄绑定监听函数——监听xhr.readyState属性值的改变
    xhr.onreadystatechange = function(){
            if(xhr.readyState===4){    //接收了所有的响应数据
                if(xhr.status===200){
                    //响应成功，可以处理响应主体数据了...xhr.responseText
                }else{
                    //响应已结束，但并不是成功的响应
                }
            }
        }

(第三步)
使用XHR对象创建一个HTTP请求消息
    xhr.open(请求方法,  URI,  true);  //请求方法：get、post；true是异步
(第四步)
使用XHR对象发送请求消息给服务器
    xhr.send(null/&amp;apos;k1=v1&amp;amp;k2=v2&amp;apos;);

 一、使用AJAX发送GET请求
        (1)创建XHR对象
        (2)绑定监听函数
        (3)创建请求消息
        xhr.open(&amp;apos;GET&amp;apos;, &amp;apos;xxx.php?k1=v1&amp;amp;k2=v2&amp;apos;, true);
        (4)发送请求消息
        xhr.send(null);  //HTTP协议规定：GET没有请求主体

二、使用AJAX发送POST请求
        (1)创建XHR对象
        (2)绑定监听函数
        (3)创建请求消息
        xhr.open(&amp;apos;POST&amp;apos;, &amp;apos;xxx.php&amp;apos;, true);
        (4)发送请求消息——必须设置Content-Type请求头（因为AJAX POST请求默认使用Content-Type: text/plain发送请求主体数据——PHP服务器是无法接收）
        xhr.setRequestHeader(&amp;apos;Content-Type&amp;apos;,  &amp;apos;application/x-www-form-urlencoded&amp;apos;);
        xhr.send(encodeURI(&amp;apos;k1=v1&amp;amp;k2=v2&amp;amp;k3=v3&amp;apos;));//当有中文时需用encodeURI（）
&lt;/code&gt;&lt;/pre&gt;
    
    </summary>
    
    
      <category term="ajax" scheme="http://yoursite.com/tags/ajax/"/>
    
  </entry>
  
  <entry>
    <title>jQuery中on()方法</title>
    <link href="http://yoursite.com/2016/05/29/on%E6%96%B9%E6%B3%95/"/>
    <id>http://yoursite.com/2016/05/29/on方法/</id>
    <published>2016-05-29T10:36:53.000Z</published>
    <updated>2016-05-29T11:39:12.359Z</updated>
    
    <content type="html">&lt;h2 id=&quot;jQuery-on-方法使用详解&quot;&gt;&lt;a href=&quot;#jQuery-on-方法使用详解&quot; class=&quot;headerlink&quot; title=&quot;jQuery on()方法使用详解&quot;&gt;&lt;/a&gt;jQuery on()方法使用详解&lt;/h2&gt;&lt;h3 id=&quot;jQuery-on-方法是官方推荐的绑定事件的一个方法&quot;&gt;&lt;a href=&quot;#jQuery-on-方法是官方推荐的绑定事件的一个方法&quot; class=&quot;headerlink&quot; title=&quot;jQuery on()方法是官方推荐的绑定事件的一个方法&quot;&gt;&lt;/a&gt;jQuery on()方法是官方推荐的绑定事件的一个方法&lt;/h3&gt;&lt;h4 id=&quot;selector-on-event-childSelector-data-function-map&quot;&gt;&lt;a href=&quot;#selector-on-event-childSelector-data-function-map&quot; class=&quot;headerlink&quot; title=&quot;$(selector).on(event,childSelector,data,function,map)&quot;&gt;&lt;/a&gt;$(selector).on(event,childSelector,data,function,map)&lt;/h4&gt;&lt;pre&gt;&lt;code&gt;与此相似的有bind() 、live() 、delegate() ，以上三种方法在jQuery1.8之后都不推荐使用，   
官方在1.9时已经取消使用live()方法了，所以建议都使用on()方法；
on()则是整合了之前的三种方式的新事件绑定机制。
&lt;/code&gt;&lt;/pre&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;h2 id=&quot;on方法的优势：&quot;&gt;&lt;a href=&quot;#on方法的优势：&quot; class=&quot;headerlink&quot; title=&quot;on方法的优势：&quot;&gt;&lt;/a&gt;on方法的优势：&lt;/h2&gt;&lt;h3 id=&quot;一、多个事件绑定同一个函数&quot;&gt;&lt;a href=&quot;#一、多个事件绑定同一个函数&quot; class=&quot;headerlink&quot; title=&quot;一、多个事件绑定同一个函数&quot;&gt;&lt;/a&gt;一、多个事件绑定同一个函数&lt;/h3&gt;&lt;pre&gt;&lt;code&gt;$(document).ready(function(){  
    $(&amp;quot;p&amp;quot;).on(&amp;quot;mouseover click&amp;quot;,function(){  
      $(this).show();  
   });  
}); 
&lt;/code&gt;&lt;/pre&gt;&lt;h3 id=&quot;二、多个事件绑定不同函数&quot;&gt;&lt;a href=&quot;#二、多个事件绑定不同函数&quot; class=&quot;headerlink&quot; title=&quot;二、多个事件绑定不同函数&quot;&gt;&lt;/a&gt;二、多个事件绑定不同函数&lt;/h3&gt;&lt;pre&gt;&lt;code&gt;$(document).ready(function(){
      $(&amp;quot;div&amp;quot;).on({
           mouseover:function(){$(&amp;quot;body&amp;quot;).css(&amp;quot;background-color&amp;quot;,&amp;quot;red&amp;quot;);},  
        click:function(){$(&amp;quot;body&amp;quot;).css(&amp;quot;background-color&amp;quot;,&amp;quot;blue&amp;quot;);}, 
        mouseout:function(){$(&amp;quot;body&amp;quot;).css(&amp;quot;background-color&amp;quot;,&amp;quot;yellow&amp;quot;);}  
          });
    });
&lt;/code&gt;&lt;/pre&gt;&lt;h3 id=&quot;三、事件监听的委托——这是重点&quot;&gt;&lt;a href=&quot;#三、事件监听的委托——这是重点&quot; class=&quot;headerlink&quot; title=&quot;三、事件监听的委托——这是重点&quot;&gt;&lt;/a&gt;三、事件监听的委托——这是重点&lt;/h3&gt;&lt;pre&gt;&lt;code&gt;事件监听的委托，利用的是事件冒泡原理，监听点击事件
可以节约性能，使用on函数有一个优点当就是动态添加新的项目进来的时候也会绑定事件
$(document).ready(function(){ 
    var current = null;
    $(&amp;apos;ul&amp;apos;).on(&amp;apos;click&amp;apos;,&amp;apos;li&amp;apos;,
        function (){
            $(this).css(&amp;quot;background-color&amp;quot;,&amp;quot;blue&amp;quot;); //此时this指代当前点击的li
            current = this;
        }
    );
});    
&lt;/code&gt;&lt;/pre&gt;</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;jQuery-on-方法使用详解&quot;&gt;&lt;a href=&quot;#jQuery-on-方法使用详解&quot; class=&quot;headerlink&quot; title=&quot;jQuery on()方法使用详解&quot;&gt;&lt;/a&gt;jQuery on()方法使用详解&lt;/h2&gt;&lt;h3 id=&quot;jQuery-on-方法是官方推荐的绑定事件的一个方法&quot;&gt;&lt;a href=&quot;#jQuery-on-方法是官方推荐的绑定事件的一个方法&quot; class=&quot;headerlink&quot; title=&quot;jQuery on()方法是官方推荐的绑定事件的一个方法&quot;&gt;&lt;/a&gt;jQuery on()方法是官方推荐的绑定事件的一个方法&lt;/h3&gt;&lt;h4 id=&quot;selector-on-event-childSelector-data-function-map&quot;&gt;&lt;a href=&quot;#selector-on-event-childSelector-data-function-map&quot; class=&quot;headerlink&quot; title=&quot;$(selector).on(event,childSelector,data,function,map)&quot;&gt;&lt;/a&gt;$(selector).on(event,childSelector,data,function,map)&lt;/h4&gt;&lt;pre&gt;&lt;code&gt;与此相似的有bind() 、live() 、delegate() ，以上三种方法在jQuery1.8之后都不推荐使用，   
官方在1.9时已经取消使用live()方法了，所以建议都使用on()方法；
on()则是整合了之前的三种方式的新事件绑定机制。
&lt;/code&gt;&lt;/pre&gt;
    
    </summary>
    
    
      <category term="on()方法" scheme="http://yoursite.com/tags/on-%E6%96%B9%E6%B3%95/"/>
    
  </entry>
  
  <entry>
    <title>jQuery选择器</title>
    <link href="http://yoursite.com/2016/04/24/jQuery%E9%80%89%E6%8B%A9%E5%99%A8/"/>
    <id>http://yoursite.com/2016/04/24/jQuery选择器/</id>
    <published>2016-04-24T13:04:16.000Z</published>
    <updated>2016-04-24T14:10:17.965Z</updated>
    
    <content type="html">&lt;h2 id=&quot;jQuery的选择器&quot;&gt;&lt;a href=&quot;#jQuery的选择器&quot; class=&quot;headerlink&quot; title=&quot;jQuery的选择器&quot;&gt;&lt;/a&gt;jQuery的选择器&lt;/h2&gt;&lt;h3 id=&quot;基本内容&quot;&gt;&lt;a href=&quot;#基本内容&quot; class=&quot;headerlink&quot; title=&quot;基本内容&quot;&gt;&lt;/a&gt;基本内容&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;注：jQuery中的选择器源于CSS中的选择器，并进行扩展,jQuery中的选择器是jQuery的根基&lt;/strong&gt;&lt;/p&gt;
&lt;h4 id=&quot;选择器分类&quot;&gt;&lt;a href=&quot;#选择器分类&quot; class=&quot;headerlink&quot; title=&quot;选择器分类&quot;&gt;&lt;/a&gt;选择器分类&lt;/h4&gt;&lt;pre&gt;&lt;code&gt;一、 基本选择器  
    * ID选择器  #id值
    * 元素选择器  element
    * class选择器 .className
    * 通配符选择器  * (匹配当前HTML页面的所有元素)
    * 组合选择器  seletor1,selector2,...

二、层级选择器
    * 祖先 空格 后代
    * 父元素 &amp;gt; 子元素
    * 目标元素 + 下一个兄弟元素
    * 目标元素 ~ 后面所有兄弟元素
&lt;/code&gt;&lt;/pre&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;    
&lt;pre&gt;&lt;code&gt;三、过滤选择器 （注：在所有的过滤选择器前，需要增加&amp;quot;:&amp;quot;）
 1、 基本过滤选择器
    * :first - 匹配第一个
    * first()函数
    * :last - 匹配最后一个
    * last()函数
    * :not() - 匹配指定规则之外
    * :even - 匹配偶数 从0开始
    * :odd - 匹配奇数
    * :eq() - 索引值等于
    * 索引值从 0 开始
    * :gt() - 索引值大于
    * :lt() - 索引值小于
    * :header - 匹配h1h2h3h4h5h6标题
    * :animated - 匹配动画（只能匹配jQuery实现的动画效果）

 2、子元素过滤选择器
    * :nth-child() （注：从1开始）
    * :first-child
    * :last-child
    * :only-child - 只有一个子元素

 3、 可见性过滤选择器
    * :hidden - 匹配隐藏元素
    * :visible - 匹配可见元素

 4、 属性过滤选择器
    * [attrName]
    * [attrName=value]
    * [attrName!=value]
    * [attrName^=value]
    * [attrName$=value]
    * [attrName*=value]
    * [][][]（组合）

 5、内容过滤选择器
    * :contains(text) - 含有指定文本的元素
    * :empty - 不包含子元素或文本元素的元素
    * :parent - 包含子元素或文本元素的元素
    * :has(selector) - 包含匹配selector的父元素

 6、表单对象属性过滤选择器
    * :enabled
    * :disabled
    * :checked
    * :selected

 7、表单选择器
&lt;/code&gt;&lt;/pre&gt;</content>
    
    <summary type="html">
    
      &lt;h2 id=&quot;jQuery的选择器&quot;&gt;&lt;a href=&quot;#jQuery的选择器&quot; class=&quot;headerlink&quot; title=&quot;jQuery的选择器&quot;&gt;&lt;/a&gt;jQuery的选择器&lt;/h2&gt;&lt;h3 id=&quot;基本内容&quot;&gt;&lt;a href=&quot;#基本内容&quot; class=&quot;headerlink&quot; title=&quot;基本内容&quot;&gt;&lt;/a&gt;基本内容&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;注：jQuery中的选择器源于CSS中的选择器，并进行扩展,jQuery中的选择器是jQuery的根基&lt;/strong&gt;&lt;/p&gt;
&lt;h4 id=&quot;选择器分类&quot;&gt;&lt;a href=&quot;#选择器分类&quot; class=&quot;headerlink&quot; title=&quot;选择器分类&quot;&gt;&lt;/a&gt;选择器分类&lt;/h4&gt;&lt;pre&gt;&lt;code&gt;一、 基本选择器  
    * ID选择器  #id值
    * 元素选择器  element
    * class选择器 .className
    * 通配符选择器  * (匹配当前HTML页面的所有元素)
    * 组合选择器  seletor1,selector2,...

二、层级选择器
    * 祖先 空格 后代
    * 父元素 &amp;gt; 子元素
    * 目标元素 + 下一个兄弟元素
    * 目标元素 ~ 后面所有兄弟元素
&lt;/code&gt;&lt;/pre&gt;
    
    </summary>
    
    
      <category term="jQuery选择器" scheme="http://yoursite.com/tags/jQuery%E9%80%89%E6%8B%A9%E5%99%A8/"/>
    
  </entry>
  
  <entry>
    <title>jQuery中的隐式迭代--each()用法</title>
    <link href="http://yoursite.com/2016/04/24/each/"/>
    <id>http://yoursite.com/2016/04/24/each/</id>
    <published>2016-04-24T03:30:04.000Z</published>
    <updated>2016-04-24T14:10:31.132Z</updated>
    
    <content type="html">&lt;h3 id=&quot;隐式迭代-只关注迭代的开始和结束-不关注迭代过程&quot;&gt;&lt;a href=&quot;#隐式迭代-只关注迭代的开始和结束-不关注迭代过程&quot; class=&quot;headerlink&quot; title=&quot;隐式迭代 - 只关注迭代的开始和结束,不关注迭代过程&quot;&gt;&lt;/a&gt;隐式迭代 - 只关注迭代的开始和结束,不关注迭代过程&lt;/h3&gt;&lt;h4 id=&quot;方法&quot;&gt;&lt;a href=&quot;#方法&quot; class=&quot;headerlink&quot; title=&quot;方法&quot;&gt;&lt;/a&gt;方法&lt;/h4&gt;&lt;ul&gt;
&lt;li&gt;$(selector).each(callback) (jQuery)对象方法&lt;/li&gt;
&lt;li&gt;$.each(obj,callback) (jQuery)全局函数&lt;ul&gt;
&lt;li&gt;callback 回调函数,function(index,domEle){}&lt;/li&gt;
&lt;li&gt;index 遍历过程中的索引值&lt;/li&gt;
&lt;li&gt;domEle 遍历得到的每个DOM对象(元素)&lt;/li&gt;
&lt;li&gt;obj 需要遍历的对象或数组&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 id=&quot;代码&quot;&gt;&lt;a href=&quot;#代码&quot; class=&quot;headerlink&quot; title=&quot;代码&quot;&gt;&lt;/a&gt;代码&lt;/h4&gt;&lt;pre&gt;&lt;code&gt;$(&amp;quot;ul&amp;gt;li&amp;quot;).each(function(index,domEle){
        if(index%2==0){
        domEle.style.backgroundColor=&amp;quot;skyblue&amp;quot;;
        }
    })

将li中索引值为偶数的颜色变为天蓝（偶数从0开始）
&lt;/code&gt;&lt;/pre&gt;</content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;隐式迭代-只关注迭代的开始和结束-不关注迭代过程&quot;&gt;&lt;a href=&quot;#隐式迭代-只关注迭代的开始和结束-不关注迭代过程&quot; class=&quot;headerlink&quot; title=&quot;隐式迭代 - 只关注迭代的开始和结束,不关注迭代过程&quot;&gt;&lt;/a&gt;隐式迭代 - 只关注迭代的开始和结束,不关注迭代过程&lt;/h3&gt;&lt;h4 id=&quot;方法&quot;&gt;&lt;a href=&quot;#方法&quot; class=&quot;headerlink&quot; title=&quot;方法&quot;&gt;&lt;/a&gt;方法&lt;/h4&gt;&lt;ul&gt;
&lt;li&gt;$(selector).each(callback) (jQuery)对象方法&lt;/li&gt;
&lt;li&gt;$.each(obj,callback) (jQuery)全局函数&lt;ul&gt;
&lt;li&gt;callback 回调函数,function(index,domEle){}&lt;/li&gt;
&lt;li&gt;index 遍历过程中的索引值&lt;/li&gt;
&lt;li&gt;domEle 遍历得到的每个DOM对象(元素)&lt;/li&gt;
&lt;li&gt;obj 需要遍历的对象或数组
    
    </summary>
    
    
      <category term="each()" scheme="http://yoursite.com/tags/each/"/>
    
  </entry>
  
  <entry>
    <title>ready()与onload的区别</title>
    <link href="http://yoursite.com/2016/04/15/ready/"/>
    <id>http://yoursite.com/2016/04/15/ready/</id>
    <published>2016-04-15T14:12:38.586Z</published>
    <updated>2016-05-30T10:46:38.806Z</updated>
    
    <content type="html">&lt;h3 id=&quot;1-onload没有简写形式-ready具有简写形式，简写形式如下&quot;&gt;&lt;a href=&quot;#1-onload没有简写形式-ready具有简写形式，简写形式如下&quot; class=&quot;headerlink&quot; title=&quot;1.onload没有简写形式,ready具有简写形式，简写形式如下:&quot;&gt;&lt;/a&gt;1.onload没有简写形式,ready具有简写形式，简写形式如下:&lt;/h3&gt;&lt;pre&gt;&lt;code&gt;$(document).ready(function(){})   
$().ready(function(){}) 
$(function(){})
&lt;/code&gt;&lt;/pre&gt;&lt;h3 id=&quot;2-nbsp-onload必须等待HTML页面中所有内部都加载完毕后才执行；ready是等待DOM节点树的内容加载完毕后就执行&quot;&gt;&lt;a href=&quot;#2-nbsp-onload必须等待HTML页面中所有内部都加载完毕后才执行；ready是等待DOM节点树的内容加载完毕后就执行&quot; class=&quot;headerlink&quot; title=&quot;2.&amp;nbsp;onload必须等待HTML页面中所有内部都加载完毕后才执行；ready是等待DOM节点树的内容加载完毕后就执行&quot;&gt;&lt;/a&gt;2.&amp;nbsp;onload必须等待HTML页面中所有内部都加载完毕后才执行；ready是等待DOM节点树的内容加载完毕后就执行&lt;/h3&gt;&lt;a id=&quot;more&quot;&gt;&lt;/a&gt;
&lt;h3 id=&quot;3-nbsp-一个HTML页面只能编写一个onload；但是一个HTML页面允许编写多个ready&quot;&gt;&lt;a href=&quot;#3-nbsp-一个HTML页面只能编写一个onload；但是一个HTML页面允许编写多个ready&quot; class=&quot;headerlink&quot; title=&quot;3.&amp;nbsp;一个HTML页面只能编写一个onload；但是一个HTML页面允许编写多个ready&quot;&gt;&lt;/a&gt;3.&amp;nbsp;一个HTML页面只能编写一个onload；但是一个HTML页面允许编写多个ready&lt;/h3&gt;</content>
    
    <summary type="html">
    
      &lt;h3 id=&quot;1-onload没有简写形式-ready具有简写形式，简写形式如下&quot;&gt;&lt;a href=&quot;#1-onload没有简写形式-ready具有简写形式，简写形式如下&quot; class=&quot;headerlink&quot; title=&quot;1.onload没有简写形式,ready具有简写形式，简写形式如下:&quot;&gt;&lt;/a&gt;1.onload没有简写形式,ready具有简写形式，简写形式如下:&lt;/h3&gt;&lt;pre&gt;&lt;code&gt;$(document).ready(function(){})   
$().ready(function(){}) 
$(function(){})
&lt;/code&gt;&lt;/pre&gt;&lt;h3 id=&quot;2-nbsp-onload必须等待HTML页面中所有内部都加载完毕后才执行；ready是等待DOM节点树的内容加载完毕后就执行&quot;&gt;&lt;a href=&quot;#2-nbsp-onload必须等待HTML页面中所有内部都加载完毕后才执行；ready是等待DOM节点树的内容加载完毕后就执行&quot; class=&quot;headerlink&quot; title=&quot;2.&amp;nbsp;onload必须等待HTML页面中所有内部都加载完毕后才执行；ready是等待DOM节点树的内容加载完毕后就执行&quot;&gt;&lt;/a&gt;2.&amp;nbsp;onload必须等待HTML页面中所有内部都加载完毕后才执行；ready是等待DOM节点树的内容加载完毕后就执行&lt;/h3&gt;
    
    </summary>
    
    
      <category term="read()" scheme="http://yoursite.com/tags/read/"/>
    
  </entry>
  
</feed>