JavaScript Ajax之美~

fkdt2134 5年前
   <p>曾经有一段时期,因为开发人员对JavaScript的滥用导致其遭受了一段时间的冷门时期,不被大家看好,后来,到了2005年,Google公司的很多技术都是用了ajax之后,JavaScript才又火热了起来,可以说,是Ajax拯救了JavaScript,就目前来说,熟练使用Ajax已经成为了所有web开发人员必须掌握的技能。那么Ajax又是什么呢? 它的作用是什么呢?</p>    <h2><strong>第一部分:Ajax简介</strong></h2>    <p>Ajax即Asynchronous JavaScript +XML的简写,这一技术能够向服务器请求额外的数据而无需卸载页面,会带来更好地用户体验。Ajax的核心是XMLHttpRequest对象(简称XHR,这一对象受到chrome、safari、FF、opera等主流浏览器的支持),这是由微软首先引入的一个特性,IE 浏览器使用 ActiveXObject,后来浏览器提供商都提供了相同的实现。 XHR对象的存在,意味着当用户点击之后,不必刷新页面也可以从后台取得新数据,也就是说,可以试用XHR对象取得新数据,然后通过DOM方式将新数据插入到页面中,达到对网页的某部分进行更新的效果。 值得注意的是:虽然,Ajax中包含了xml,但是我们在无需刷新页面就得到的数据不一定是xml数据。</p>    <h2><strong>第二部分:XHR对象的创建</strong></h2>    <p>上面讲到,Ajax的核心是XMLHttpRequest对象,那么我们如何创建一个XMLHttpRequest对象呢?</p>    <p>首先,我们应当知道:所有浏览器都支持XMLHttpRequest对象,其中IE5和IE6使用ActiveXObject对象。并且现在所有浏览器(IE7+、FireFox、Chrome、Safari以及Opera)均内建了XMLHttpRequest对象。于是创建XMLHttpRequest对象的语法是:</p>    <pre>  <code class="language-javascript">var xhr = new XMLHttpRequest();</code></pre>    <p>刚刚提到老版本的Internet Explorer(IE5和IE6)使用的是ActiveXObject对象,所以语法是:</p>    <pre>  <code class="language-javascript">var axo = new ActiveXObject("Microsoft.XMLHTTP");</code></pre>    <p>注意:其中传入的“Microsoft.XMLHTTP”是不能改变的。</p>    <p>于是,为了应对所有的现代浏览器(包括IE5和IE6),请首先检查是否支持XMLHttpRequest对象:如果支持,则创建XMLHttpRequest对象;如果不支持,则创建ActiveXObject对象:</p>    <pre>  <code class="language-javascript">var xmlHttp=null;  if(window.XMLHttpRequest)  {         xmlHttp=new XMLHttpRequest();  }  else  {      xlmHttp=new ActiveXObject("Microsoft.XMLHTTP");  }</code></pre>    <p>关于这个应对所有现代浏览器的代码应当注意:</p>    <ul>     <li>我将xmlHttp的值设置为null,是因为null值表示一个空对象指针,而这也正是使用typeof操作符检测null值是会返回“object”的原因,因此:如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为null而不是其他值。</li>     <li>之所以可以试用window.XMLHttpRequest来检测其是否存在,是因为XMLHttpRequest是window对象的属性。</li>    </ul>    <h2><strong>第三部分:XHR对象的用法(属性与方法等)</strong></h2>    <p>上面两部分,我们介绍XHR对象是什么以及怎么创建,这一部分我将谈一谈XHR对象的用法。</p>    <p>⑴.open()方法</p>    <p>既然XHR是一个对象,那么它就一定有自己的属性和方法。在使用XHR对象时,要调用的第一个方法是open()。它接受3个参数:</p>    <ol>     <li>要发送的请求的类型:get、post、put、delete等等。</li>     <li>请求的URL(这个URL既可以是绝对路径,也可以是相对路径)。</li>     <li>是否异步发送请求的布尔值:true表示异步发送请求,false表示同步发送请求。</li>    </ol>    <p>举例如下:</p>    <pre>  <code class="language-javascript">xhr.open("get","example.php",true);</code></pre>    <p>此时,这段代码会启动一个针对example.php的GET请求。 注意:open()方法并不会真正的发送请求而只是启动一个请求以备发送。 那么怎么才能发送特定的请求呢,这是就要用到send()方法了。</p>    <p>⑵. <strong>send()方法</strong></p>    <p>刚刚说到open()方法,只是开启(open),还没有发送,而send才是真正地发送。它接受一个参数:</p>    <ul>     <li><strong>作为请求主体发送的数据 </strong></li>    </ul>    <p>注意:如果不需要通过请求主体发送数据,则必须传入null。一般get请求不需要传入参数,而对于post请求,如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。这一部分会详细介绍,下面举一个简单例子:</p>    <pre>  <code class="language-javascript">xhr.open("get","example.php",true);  xhr.send(null);</code></pre>    <p>(3).XHR对象的几个属性</p>    <p>通过send()发送之后,会接受到响应,响应的数据会自动填充XHR对象的属性。主要有以下几种:</p>    <ul>     <li>responseText:作为响应主体被返回的文本</li>     <li>responseXML:如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着相应数据的XML DOM文档。</li>     <li>status:响应的http状态</li>     <li>statusText:Http状态的说明</li>    </ul>    <p>在接收到响应后,一般是先检查status属性,来确定响应是否成功返回,一般状态代码200表示成功(以2开头即表示成功),这是responseText就可以被访问了。 而状态代码为304表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本, 因此这种响应也是有效的。于是可以通过下面的代码检测这两种状态:</p>    <pre>  <code class="language-javascript">xhr.open("get","example.php",false);   xhr.send(null);   if((xhr.status>=200&&xhr.status<300)||xhr.status==304){    alert(xhr.responseText);   }else{    alert("Request waw unseccessful:"+"xhr.status");   }</code></pre>    <p>XHR对象的readystate属性</p>    <p>使用Ajax我们当然还是希望发送异步请求的:如果发送同步请求,那么一旦网卡住了,这个页面就不会有任何反应而是继续等待响应,但是发送异步请求,即使网卡住,也不用担心,因为它是异步的。 而readystate属性可以检测到请求/响应过程的当前活动阶段 。它有5个取值,分别如下:</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/32b03af35fa1571df29d01bcbf591ac9.png"></p>    <p>关键: 只要readystate的值改变(比如从0变为1,从1变为2等等),那么每次地改变都会触发readystatechange事件。并且可以通过这个时间检测每次状态变化后的readystate的值。 当值为4是最重要的,因为这事所有的数据已经准备就绪。看一个例子:</p>    <pre>  <code class="language-javascript">var xhr=new XMLHttpRequest();   xhr.open("get","example.php",false);   xhr.onreadystatechange=function(){    if(readystate==4){     if((xhr.status>=200&&xhr.status<300)||xhr.status==304){      alert(xhr.responseText);     }else{      alert("Request waw unseccessful:"+"xhr.status");     }    }   };   xhr.send(null);</code></pre>    <p>注意以下几点:</p>    <ul>     <li>xhr.onreadystatechange前面有一个on,这是因为我们使用的是DOM0级方法为XHR对象添加了时间处理程序, 没有利用addEventListener这种DOM2级方法,是因为并非所有的浏览器都支持DOM2级方法 。</li>     <li>这个例子中我们没有使用this对象,是因为onreadystatechange时间处理程序的作用域问题。 如果使用this对象,在有的浏览器中会导致函数执行失败或者导致发生错误。 因此,使用实际的XHR对象实例便利那个是一种较为可靠的方式。</li>    </ul>    <p>(4).abort()方法</p>    <p>在接受到响应之前,我们还可以使用abort()方法来取消异步请求,如下所示:</p>    <pre>  <code class="language-javascript">xhr.abort();</code></pre>    <p>在调用了这个方法之后,XHR对象会停止触发事件,而且也不再允许访问任何与响应有关的对象属性。</p>    <p>(5)setRequestHeader()方法、getResponseHeader()方法、getAllResponseHeader()方法在第四部分介绍完之后讲解</p>    <h2><strong>第四部分:HTTP头部信息</strong></h2>    <p>因为使用Ajax和后台交互,那么就一定离不开http协议了。而HTTP请求和响应都会带有相应的头部信息。</p>    <p>在默认情况下,在发送XHR请求的同时,还会发送以下头部信息。</p>    <ul>     <li>Accept:浏览器能够处理的内容类型</li>     <li>Accept-Charset:浏览器能够显示的字符集</li>     <li>Accept-Encodding:浏览器能够处理的压缩编码</li>     <li>Accept-Language:浏览器当前设置的语言</li>     <li>Connection:浏览器与服务器之间链接的类型</li>     <li>Cookie:当前页面设置的任何Cookie</li>     <li>Host:发出请求的页面所在的域</li>     <li>Referer:发出请求页面的URI</li>     <li>User-Agent:浏览器的用户代理字符串   </li>    </ul>    <p>下面这张图片是我的chrome浏览器开发者工具下的network中截屏所得,大家可以对照参考:</p>    <p><img src="https://simg.open-open.com/show/8a21afd05be576bd70c1c08a310afe53.png"></p>    <p>我们还可以通过 <strong>setRequestHeader()</strong> 方法来设置自定义的请求头部信息。这个方法接收两个参数:头部字段的名称和头部字段的值。并且我们必须在open()方法之后,在send()方法之前来调用setRequestHeader()方法。举例如下:</p>    <pre>  <code class="language-javascript">var xhr=new XMLHttpRequest();    xhr.open("get","example.php",true);    xhr.setRequestHeader("myHeader","myValue");    xhr.send(null);</code></pre>    <p>这里只需要注意: 这里传入的头部字段的名称最好是自定义的,而不要使用浏览器正常发送的字段名称,否则有可能会影响浏览器的响应。 (因为有的浏览器允许开发人员重写默认的头部信息,而有的浏览器是不允许开发人员重写默认的头部信息的)。</p>    <p>除了可以为请求头部增加自定义的头部字段,我们还可以获取头部字段。我们可以调用XHR对象的getResponseHeader()方法并传入一个头部字段名称,便可以获得响应头部信息。还可以调用XHR对象的getAllResponseHeaders()方法取得一个包含所有头部信息的长字符串。</p>    <p>如下所示:</p>    <pre>  <code class="language-javascript">var myHeader=xhr.getResponseHeader("myHeader");    var allHeaders=xhr.getAllResponseHeaders();</code></pre>    <h2><strong>第五部分:GET请求</strong></h2>    <p>get请求用于向服务器查询某些信息。 注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的。  但是,有时候可能会出现问题,即查询字符串的格式有问题。查询字符串的每个参数的名称和值都必须使用 encodeURIComponent() 进行编码,然后才能放到URL的末尾;而且所有的名值对都必须用&分隔。如下所示:</p>    <pre>  <code class="language-javascript">xhr.open("get","example.php?name1=value1&name2=value2",true);</code></pre>    <p>而下面的这个函数可以辅助向现有的URI的末尾添加查询字符串:</p>    <pre>  <code class="language-javascript">function addURIParam(url,name,vaule){     url+=(url.indexOf("?")==-1?"?":"&");     url+=encodeURIComponent(name)+"="+encodeURIComponent(value);     return url;    }    var url="example";    url=addURIParam(url,"name","zzw");    url=addURIParam(url,"sex","male");    xhr.open("get",url,false);</code></pre>    <p>实际上,函数中的第一句是先判断url后面有没有查询字符串,如果没有,就添加?,如果有,就添加&,因此,最终的url为"example.php?name=zzw&sex=male"。</p>    <p>另外,对于get请求需要注意:</p>    <ul>     <li>GET请求可以被缓存</li>     <li>GET请求保留在历史记录中</li>     <li>GET请求可悲收藏为书签</li>     <li>GET请求不应该在处理敏感数据时使用(因为查询字符串是暴露的,任何人都可以看到)</li>     <li>GET请求有长度限制,超过最大长度后一般无法提交</li>     <li><strong>GET请求只应当用于取回数据</strong></li>    </ul>    <h2><strong>第六部分:POST请求</strong></h2>    <p>POST请求的使用频率仅次于GET请求,通常用于向服务器中发送应该被保存的数据。 请注意,查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的。 而GET请求却不是这样的。POST请求的主体可以包含很多的数据,而且格式不限。</p>    <p>默认情况下,服务器对post请求和提交web表单的请求不会一视同仁,因此, 我们可以试用XHR对象和模仿表单提交:首先将Content-Type头部信息设置为application/x-www-form-urlencoded,也就模仿成了表单提交时的内容类型(赞一个!)。 接着需要在以适当的格式创建一个字符串,post数据的格式和查询字符串格式相同,如果需要将页面中表单的数据序列化,在通过XHR发送到服务器,那么就要使用serialize()函数来创建这个字符串。下面举两个例子:</p>    <pre>  <code class="language-javascript">xhr.open("POST","example.php",true);  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  xhr.send("fname=Bill&lname=Gates");</code></pre>    <p>这里我们没有将字符串序列化。</p>    <pre>  <code class="language-javascript">xhr.open("POST","example.php",true);  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  var form=document.getElementById("user-info");  xhr.send(serialize(form));</code></pre>    <p>这里我们使用serialize()函数进行了序列化。</p>    <p>另外,对于post请求需要注意:</p>    <ul>     <li>POST请求不会被缓存</li>     <li>POST请求不会保留在浏览器历史记录中</li>     <li>POST请求不能被收藏为书签</li>     <li>POST请求对数据长度没有要求</li>    </ul>    <p>讲过了POST请求和GET请求,那么它们之间的区别是什么呢?</p>    <p><img src="https://simg.open-open.com/show/084503c85196edcf196a8a659d37db2f.png"></p>    <h2><strong>第七部分:同源策略</strong></h2>    <p>通过XHR实现Ajax通信的一个主要限制,来源于跨域安全策略,又称为同源策略。那么什么使同源策略呢?</p>    <p>同源策略,它是由Netscape提出的一个著名的安全策略,默认情况下,XHR对象只能访问与包含他的页面位于同一个域中的资源,这种安全策略可以预防某些恶意行为。现在所有支持JavaScript的浏览器都会使用这个策略,这种安全策略可以预防某些恶意行为,比如,A网站是一家银行,如果用户登陆了以后,其他的网站可以读取A网站的Cookie,那么其他网站就可以为所欲为了。但是,实现合理的跨域请求对开发某些浏览器的应用程序也是至关重要的。后续的文章我会介绍跨域资源共享的知识。这里仅介绍同源策略。</p>    <p>所谓 <strong>同源</strong> 是指: <strong>协议、域名和端口相同</strong> 。</p>    <p>举例说:http://www.cnblogs.com/dir/page.html这个网址。</p>    <p>协议:http://</p>    <p>域名:www.cnblogs.com</p>    <p>端口:80(默认端口可以省略)。</p>    <p>对于这个网址的同源情况如下:</p>    <ul>     <li>http://www.cnblogs.com/cat/index.html (同源)</li>     <li>http://cnblogs.com/dir/page.html(不同源-域名不同)</li>     <li>https://cnblogs.com/dir/page.html(不同源-协议不同)</li>     <li>http://www.cnblogs.com:81/dir/page.html(不同源-端口不同)</li>    </ul>    <p> </p>    <p> </p>    <p>来自:http://www.cnblogs.com/zhuzhenwei918/p/6083797.html</p>    <p> </p>