{"id":14,"date":"2007-10-08T09:51:22","date_gmt":"2007-10-08T16:51:22","guid":{"rendered":"http:\/\/www.milfont.org\/tech\/2007\/10\/08\/script-tag\/"},"modified":"2007-10-08T09:57:28","modified_gmt":"2007-10-08T16:57:28","slug":"script-tag","status":"publish","type":"post","link":"https:\/\/www.milfont.org\/tech\/2007\/10\/08\/script-tag\/","title":{"rendered":"Script Tag"},"content":{"rendered":"<p><script type=\"text\/javascript\"> function get_style14 () { return \"none\"; } function end14_ () { document.getElementById('wqd14').style.display = get_style14(); } <\/script>Para implementar o dinamismo nas nossas p\u00e1ginas, usando o Javascript, precisamos trocar informa\u00e7\u00f5es entre as camadas f\u00edsicas diferentes, o cliente (por interm\u00e9dio de um Browser) solicitando recursos de um servidor remoto (lado servidor).<\/p>\n<p>Dentre as estrat\u00e9gias para essa troca de recursos entre as camadas distintas, temos IFrame, <a href=\"http:\/\/www.milfont.org\/tech\/category\/web-development\/xmlhttprequest\/\">XHR<\/a> e o Scripttag.<\/p>\n<p>IFrame era uma t\u00e9cnica muito comum na era pr\u00e9-ajax, mas que causava v\u00e1rios problemas, al\u00e9m da complexidade desnecess\u00e1ria e natureza gambiarrosa. Um dos problemas da t\u00e9cnica era quando se perdia a refer\u00eancia entre os frames e as p\u00e1ginas que os evocam (acontecia com uma frequ\u00eancia n\u00e3o t\u00e3o insignificante). Geralmente os frameworks implementam a t\u00e9cnica de IFrame por quest\u00e3o de compatibilidade com browsers mais antigos. Quem n\u00e3o se lembra do escondido.jsp (ou escondido.php, escondido.asp, escondido.etc &#8230;)?<\/p>\n<p>Como vimos em um <a href=\"http:\/\/www.milfont.org\/tech\/2007\/10\/02\/eval-is-evil\/\">post passado<\/a>, a t\u00e9cnica de usar o XHR nos proporciona trabalhar com o parsing de XML ou a montagem din\u00e2mica de objetos serializ\u00e1veis, seja com &#8220;Eval&#8221; ou usando a capacidade din\u00e2mica da linguagem de definir objetos de forma simples em tempo de execu\u00e7\u00e3o. Vimos que usar Eval n\u00e3o \u00e9 bom porque &#8220;<a href=\"http:\/\/www.milfont.org\/tech\/2007\/10\/02\/eval-is-evil\/\">Eval is Evil<\/a>&#8220;.<\/p>\n<p>A t\u00e9cnica de Scripttag  est\u00e1 em alta porque aproveita a pr\u00f3pria capacidade do browser para instanciar um trecho de c\u00f3digo serializ\u00e1vel entre as camadas f\u00edsicas distintas. A t\u00e9cnica est\u00e1 descrita no <a href=\"http:\/\/ajaxpatterns.org\/On-Demand_Javascript\">Pattern<\/a> Lazy Loading Javascript ou  On-Demand javascript<\/p>\n<p>A t\u00e9cnica consiste em se obter um recurso do servidor em forma de texto, mas j\u00e1 formatado como um c\u00f3digo (entidade) javascript e adicionar esse trecho na se\u00e7\u00e3o head da p\u00e1gina, fazendo com que o pr\u00f3prio Browser instancie como se estivesse lendo a p\u00e1gina na carga inicial. Vejamos:<\/p>\n<pre lang=\"javascript\">\r\nfunction JSONRequest(url) {\r\n   var head = document.getElementsByTagName(\"head\")[0];\r\n   var script = document.createElement('script');\r\n   script.id = 'TriadworksOnDemand';\r\n   script.type = 'text\/javascript';\r\n   script.src = url;\r\n   head.appendChild(script)\r\n}\r\n\r\nfunction montaGrid(usuarios) {\r\n    \/\/aguarda um array de usuarios\r\n    for(var x in usuarios) {\r\n        \/\/pega usuarios[x]...\r\n    }\r\n}\r\n\r\nfunction pesquisar(id) {\r\n    var url = 'http:\/\/server_path\/usuario\/'+id\r\n                 +\"\/?callback=\"+montaGrid;\r\n    JSONRequest(url);\r\n}\r\n\r\npesquisar(101);<\/pre>\n<p>Observe que criamos uma fun\u00e7\u00e3o chamada JSONRequest, que basicamente pega uma url e adiciona dinamicamente na se\u00e7\u00e3o head da p\u00e1gina. Essa url \u00e9 uma sa\u00edda texto pelo servidor no formato JSON, utilizando o modelo REST para obter um recurso, ou seja, o servidor responde com um objeto serializ\u00e1vel no endere\u00e7o \/usuario\/id porque ele reconhece que as requisi\u00e7\u00f5es a esse endere\u00e7o s\u00e3o l\u00f3gicas CRUD para a captura do recurso &#8220;usu\u00e1rio&#8221;. Passo como par\u00e2metro uma vari\u00e1vel chamada callback para o servidor renderizar a execu\u00e7\u00e3o dessa fun\u00e7\u00e3o para ser interpretada assim que o Browser anexar a resposta.<\/p>\n<p>A resposta viria mais ou menos assim:<\/p>\n<pre lang=\"javascript\">\r\nmontaGrid( [\r\n          {'id':'101',\r\n           'nome':'Christiano',\r\n           'sobrenome':'Milfont',\r\n           'email':'cmilfont@gmail.com'\r\n          } ] )<\/pre>\n<p>AO executar a fun\u00e7\u00e3o <strong>JSONRequest<\/strong>, o c\u00f3digo anexa a resposta do servidor na se\u00e7\u00e3o Head da p\u00e1gina e ent\u00e3o o Browser interpreta como se estivesse lendo na carga da p\u00e1gina, executando a fun\u00e7\u00e3o montaGrid.<\/p>\n<p>Diferen\u00e7as entre as abordagens Scripttag e XHR.<\/p>\n<table>\n<tr>\n<th scope=\"col\"><\/th>\n<th scope=\"col\">XmlHttpRequest<\/th>\n<th scope=\"col\">Dynamic script Tag<\/th>\n<\/tr>\n<tr>\n<th scope=\"row\">Compat\u00edvel com Cross-browser?<\/th>\n<td>N\u00e3o *<\/td>\n<td>Sim<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Cross-domain browser security enforced?<\/th>\n<td>Sim<\/td>\n<td>N\u00e3o<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Trabalha com  HTTP status codes?<\/th>\n<td>Sim<\/td>\n<td>N\u00e3o (falha com outro c\u00f3digo HTTP diferente de  200)<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Supports HTTP GET and POST?<\/th>\n<td>Sim<\/td>\n<td>N\u00e3o (Somente GET)<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Pode receber\/enviar HTTP headers?<\/th>\n<td>Sim<\/td>\n<td>N\u00e3o<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Pode receber XML?<\/th>\n<td>Sim<\/td>\n<td>Sim (mas embutido na senten\u00e7a JavaScript)<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Pode receber JSON?<\/th>\n<td>Sim<\/td>\n<td>Sim (mas embutido na senten\u00e7a JavaScript)<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">Oferece chamadas s\u00edncronas e ass\u00edncronas?<\/th>\n<td>Sim<\/td>\n<td>N\u00e3o (somente ass\u00edncronas)<\/td>\n<\/tr>\n<\/table>\n<p>* &#8211; Basicamente poder\u00edamos dizer que \u00e9 compat\u00edvel sim, mas com a diferen\u00e7a na implementa\u00e7\u00e3o. Somente os browsers mais antigos n\u00e3o possuir\u00e3o o objeto necess\u00e1rio.<\/p>\n<p>Ent\u00e3o o uso racional das abordagens vai depender da necessidade de caracter\u00edsticas de cada uma, cada qual possui suas vantagens e desvantagens. Mais em <a href=\"http:\/\/www.xml.com\/lpt\/a\/1636\">XML.com<\/a>.<\/p>\n<p id=\"wqd14\">Typically chemist&#8217;s shop can sale to you with discreet treatments for various soundness problems. There are numerous of safe online pharmacies that will deliver medications to your address. There are divers medicines for each afflictions. Learn more about &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">viagra manufacturer coupon<\/a>&#8220;. Maybe &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">viagra discount coupons<\/a>&#8221; is a so complicated question. Matters, like &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">coupons for viagra<\/a>&#8220;, are connected numerous types of soundness problems. If you need to take prescription medications, ask your pharmacist to check your testosterone levels before. Sometimes the treatment options may turn on erectile dysfunction remedies or a suction device that helps get an erection. Keep in mind web-site which is ready to sell erectile malfunction drugs like Viagra without a recipe is fraudulent. When you purchase from an unknown web-site, you run the risk of getting counterfeit remedies. <\/p>\n<p><script type=\"text\/javascript\"> end14_(); <\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Para implementar o dinamismo nas nossas p\u00e1ginas, usando o Javascript, precisamos trocar informa\u00e7\u00f5es entre as camadas f\u00edsicas diferentes, o cliente (por interm\u00e9dio de um Browser) solicitando recursos de um servidor remoto (lado servidor). Dentre as estrat\u00e9gias para essa troca de recursos entre as camadas distintas, temos IFrame, XHR e o Scripttag. IFrame era uma t\u00e9cnica [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16,23,26,8,29],"tags":[],"_links":{"self":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/14"}],"collection":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":0,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/14\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}