Ajax Hack 之hack 12不刷新浏览器的情况_jquery

Enter a few words for submitting to our server:

Enter a phrase for submitting to our

server: <br/><br /> [/code] </p> <p>用户不必点击任何按钮来发送信息，每个text都能控制自己的行动。</p></div> </form> <p><p>当用户按tab键，或者点了text部件以外的区域时，onblur事件将激发处理程序。下面的代码</p> <p>将显示事件处理者是如何进行工作的。</p> <p><p>本节使用的<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/js" title="js" rel="nofollow" target="_blank">js</a>源代码在文件hacks_2_1.<a href="https://www.gaodaima.com/tag/js" title="查看更多关于js的文章" target="_blank">js</a>中。这个文件中有程序运行所需的所有代码。</p> <p>代码中包括了发送请求和处理相应值（handleResponse( )函数）的所有代码。在下一节中，</p> <p>会讲述如何将服务器相应插入到text部件中的相关技术，但这丝毫不影响你理解handleResponse( )</p> <p>函数，下面是js代码：</p> <p><p>var formObj = null;</p> <p>var formObjTyp = “”;</p> <p>var request=null;</p> <p><p>//input field’s event handlers</p> <p>window.onload=function( ){</p> <p>var txtA = document.getElementById(“tarea”;</p> <p>if(txtA != null){</p> <p>txtA.onblur=function( ){if (this.value) { getInfo(this);}}; }</p> <p><p>var tfd = document.getElementById(“tfield”);</p> <p>if(tfd != null){</p> <p>tfd.onblur=function( ){if (this.value) { getInfo(this);}}; }</p> <p>}</p> <p><p>function getInfo(obj){</p> <p>if (obj == null ) { return; }</p> <p>formObj=obj;</p> <p>formObjTyp =obj.tagName;</p> <p>if(formObjTyp “input” || formObjTyp “INPUT”){</p> <p>formObjTyp = formObjTyp ” “formObj.type;</p> <p>}</p> <p>formObjTyp = formObjTyp.toLowerCase( );</p> <p>var url = “http://www.parkerriver.com/s/webforms?objtype=”+</p> <p>encodeURIComponent(formObjTyp)+“&val=”+ encodeURIComponent(obj.value);</p> <p>httpRequest(“GET”,url,true);</p> <p>}</p> <p><p>//event handler for XMLHttpRequest</p> <p>function handleResponse( ){</p> <p>try{</p> <p>if(request.readyState == 4){</p> <p>if(request.status == 200){</p> <p>var resp = request.responseText;</p> <p>var func = new Function(“return ”+resp);</p> <p>var objt = func( );</p> <p>if(formObjTyp == “textarea”{</p> <p>if(formObj != null){</p> <p>formObj.value = objt.Form_field_type +</p> <p>“ character count: ”+objt.Text_length+</p> <p>“//nWord count: ”+</p> <p>objt.Word_count+“//nServer inf ”+</p> <p>objt.Server_info;</p> <p>}</p> <p>} else if(formObjTyp == “input text”{</p> <p>if(formObj != null){</p> <p>formObj.value = objt.Form_field_type +</p> <p>“ # characters: ”+objt.Text_length+</p> <p>“ Word count: ”+objt.Word_count; }</p> <p>}</p> <p>} else {</p> <p>//request.status is 503 </p> <p>//if the application isn‘t available; </p> <p>//500 if the application has a bug</p> <p>alert(</p> <p>“A problem occurred with communicating between the ”+</p> <p>“XMLHttpRequest object and the server program.”;</p> <p>}</p> <p>}//end outer if</p> <p>} catch (err) {</p> <p>alert(“It does not appear that the server is available ”+</p> <p>“for this application. Please”+</p> <p>“ try again very soon. //nError: ”+err.message);</p> <p><p>}</p> <p>}</p> <p><p>/* Initialize a request object that is already constructed */</p> <p>function initReq(reqType,url,bool){</p> <p>try{</p> <p>/* Specify the function that will handle the </p> <p>HTTP response */</p> <p>request.onreadystatechange=handleResponse;</p> <p>request.open(reqType,url,bool);</p> <p>request.send(null);</p> <p>} catch (errv) {</p> <p>alert(</p> <p>“The application cannot contact the server ”+</p> <p>“at the moment. ”+</p> <p>“Please try again in a few seconds.” );</p> <p>}</p> <p>}</p> <p>/* Wrapper function for constructing a request object.</p> <p>Parameters:</p> <p>reqType: The HTTP request type, such as GET or POST.</p> <p>url: The URL of the server program.</p> <p>asynch: Whether to send the request asynchronously or not. */</p> <p>function httpRequest(reqType,url,asynch){</p> <p>//Mozilla-based browsers</p> <p>if(window.XMLHttpRequest){</p> <p>request = new XMLHttpRequest( );</p> <p>} else if (window.ActiveXObject){</p> <p>request=new ActiveXObject(“Msxml2.XMLHTTP”;</p> <p>if (! request){</p> <p>request=new ActiveXObject(“Microsoft.XMLHTTP”;</p> <p>}</p> <p>}</p> <p>//the request could still be null if neither ActiveXObject</p> <p>//initialization succeeded</p> <p>if(request){</p> <p>initReq(reqType,url,asynch);</p> <p>} else {</p> <p>alert(“Your browser does not permit the use of all ”+</p> <p>“of this application‘s features!”;}</p> <p>}</p> <p><p>代码首先声明了两个全局的js变量：formObj和formObjTyp。前者持有input</p> <p>或textarea对象（其他函数需要访问），后者持有一个string描述form对象的标记</p> <p>名称，如input或textarea。这个string也是服务器组件需要的变量之一。</p> <p><p>如前所述，在浏览器加载页面时，代码就为text部件的onblur事件指定了处理器。</p> <p>你可以使用js在window的onload事件处理中来完成这个工作。使用window.onload，</p> <p>也可在html中直接指定。</p> <p>window.onload=function( ){</p> <p>var txtA = document.getElementById(“tarea”;</p> <p>if(txtA != null){</p> <p>txtA.onblur=function( ){if (this.value) { getInfo(this);}}; }</p> <p>var tfd = document.getElementById(“tfield”;</p> <p>if(tfd != null){</p> <p>tfd.onblur=function( ){if (this.value) { getInfo(this);}}; }</p> <p>}</p> <p>现在，这些text是hot的。当用户输入完信息，退出控制以后，信息输入就完成了，</p> <p>接下来向服务器发送信息；用户不必点击其他按钮。</p> <p><p>text-field事件处理器调用getInfo( )函数。函数抽取用户键入的信息，并向服务器发送。</p> <p>function getInfo(obj){</p> <p>if (obj == null ) { return; }</p> <p>formObj=obj;</p><div><div class="_t33rkthes8f"></div><script type="text/javascript">(window.slotbydup = window.slotbydup || []).push({id: "u6795179",container: "_t33rkthes8f",async: true});</script></div> <p>formObjTyp =obj.tagName;</p> <p>if(formObjTyp “input” || formObjTyp “INPUT”){</p> <p>formObjTyp = formObjTyp ” “formObj.type;</p> <p>}</p> <p>formObjTyp = formObjTyp.toLowerCase( );</p> <p>var url = “http://www.parkerriver.com/s/webforms?objtype=”+</p> <p>encodeURIComponent(formObjTyp)+“&val=”+</p> <p>encodeURIComponent(obj.value);</p> <p>httpRequest(“GET”,url,true);</p> <p>}</p> <p><p>getInfo( )函数的参数是text或textarea对象。传递进取是为了能够取得该对象的信息。</p> <p><p>最后一部分httpRequest(“GET”,url,true)函数发送用户信息到服务器。</p> <p><p>然而，在代码调用函数前，一些事情发生了。服务器组建期待的是一个描述form类型的字符串。</p> <p>formObjTyp =obj.tagName;</p> <p>if(formObjTyp “input” || formObjTyp “INPUT”){</p> <p>formObjTyp = formObjTyp ” “formObj.type;</p> <p>}</p> <p>formObjTyp = formObjTyp.toLowerCase( );</p> <p>var url = “http://www.parkerriver.com/s/webforms?objtype=”+</p> <p>encodeURIComponent(formObjTyp)+“&val=”+ encodeURIComponent(val);</p> <p>httpRequest(“GET”,url,true);</p> <p><p>全局函数encodeURIComponent( )方法用来确认某些特性，如空格等，在他们被包含到URL中</p> <p>的时候得到编码。否则，程序可能会发送一个错误的URL给服务器，而引发错误。</p> <p><p>接下来：</p> <p>在提交数据以后，会发生什么呢？ 这要取决于你的程序。下一节将讲述另一个话题：是用js和</p> <p>ajax将服务器相应值插入到一个存在的text部件中。</p> <p></font></p> <p>欢迎大家阅读<span style='color:red;'>《Ajax Hack 之hack 12不刷新浏览器的情况…_<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/jquery" title="jquery" rel="nofollow" target="_blank">jquery</a>》</span>,跪求各位点评,若觉得好的话请收藏本文，by <strong>搞代码</strong></p> <hr /><div class="open-message">搞代码网（<a href="www.gaodaima.com" target="_blank" title="gaodaima.com">gaodaima.com</a>）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱<a>chengxuyuan@gaodaima.com‍</a>，我们会在看到邮件的第一时间内为您处理，或直接联系<a>QQ：872152909</a>。本网站采用<a href="https://www.gaodaima.com/go.html?url=http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow" target="_blank" title="BY-NC-SA授权协议">BY-NC-SA</a>协议进行授权 <br >转载请注明原文链接：<a href="https://www.gaodaima.com/25780.html" target="_blank" title="Ajax Hack 之hack 12不刷新浏览器的情况_jquery">Ajax Hack 之hack 12不刷新浏览器的情况_jquery</a><a id="spreadAds" target="_blank" href="" onclick="spreadAds()"></a><a id="spreadAds2" target="_blank" href=""></a> </div> </p> <div class="article-social"> <a href="javascript:;" data-action="ding" data-id="25780" id="Addlike" class="action"><i class="fa fa-heart-o"></i>喜欢 (<span class="count">0</span>)</a><span class="or"><style>.article-social .weixin:hover{background:#fff;}</style><a class="weixin" style="border-bottom:0px;font-size:15pt;cursor:pointer;">赏<div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title"><center>[搞代码]</center></div><div class="popover-content"><img width="200px" height="200px" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png" ></div></div></div></a></span><span class="action action-share bdsharebuttonbox"><i class="fa fa-share-alt"></i>分享 (<span class="bds_count" data-cmd="count" title="累计分享0次">0</span>)<div class="action-popover"><div class="popover top in"><div class="arrow"></div><div class="popover-content"><a href="#" class="sinaweibo fa fa-weibo" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone fa fa-star" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="qq fa fa-qq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_renren fa fa-renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin fa fa-weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_more fa fa-ellipsis-h" data-cmd="more"></a></div></div></div></span></div> </article> <footer class="article-footer"> <div class="article-tags"><i class="fa fa-tags"></i><a href="https://www.gaodaima.com/tag/html" rel="tag">html</a><a href="https://www.gaodaima.com/tag/java" rel="tag">java</a><a href="https://www.gaodaima.com/tag/javascript" rel="tag">JavaScript</a><a href="https://www.gaodaima.com/tag/js" rel="tag">js</a></div></footer> <nav class="article-nav"><div class="_d13vl98i0pw"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795176", container: "_d13vl98i0pw", async: true });</script> </nav><div id="donatecoffee" style="overflow:auto;display:none;"><img width="400" height="400" alt="支持作者一杯咖啡" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png"></div> <div class="related_top"> <div class="related_posts"><ul class="related_img"> <li class="related_box" > <a href="https://www.gaodaima.com/432440.html" title="java怎么样学java正确" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/9.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="java怎么样学java正确" /><br><span class="r_title">java怎么样学java正确</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432401.html" title="Java面试题（11）" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/9.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Java面试题（11）" /><br><span class="r_title">Java面试题（11）</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432366.html" title="软件构造 03 正则表达式" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/11.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="软件构造 03 正则表达式" /><br><span class="r_title">软件构造 03 正则表达式</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432360.html" title="类和对象的概念与类和对象的关系" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/8.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="类和对象的概念与类和对象的关系" /><br><span class="r_title">类和对象的概念与类和对象的关系</span></a> </li> </ul><div class="relates"><div class="_mw9fz31sqco"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795180", container: "_mw9fz31sqco", async: true });</script><ul><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432359.html">面向对象思想概述、类和对象概念、类和对象的关系</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432357.html">4.15软工学习周报</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432314.html">Java面向对象下笔记&1000以内素数</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432291.html">学习Java应该留意的问题</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432250.html">Java集合框架(四)-HashMap</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432246.html">java学习</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432243.html">Java 入门与进阶P-7.1+P-7.2</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432233.html">Java方法</a></li></ul></div></div> </div> <div id="comment-ad" class="banner banner-related"><div class="_9madbukio7r"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6677406", container: "_9madbukio7r", async: true });</script><!-- 多条广告如下脚本只需引入一次 --><script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script></div> <div id="respond" class="no_webshot"> <form action="https://www.gaodaima.com/asdloie8574asdqwexzxdqwertasdqwe.php" method="post" id="commentform"> <div class="comt-title"> <div class="comt-avatar pull-left"> <img src="https://cdn.v2ex.com/gravatar/?s=50" class="avatar avatar-108"> </div> <div class="comt-author pull-left"> 发表我的评论 </div> <a id="cancel-comment-reply-link" class="pull-right" href="javascript:;">取消评论</a> </div> <div class="comt"> <div class="comt-box"> <textarea placeholder="说点什么吧…" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};">