tag:blogger.com,1999:blog-58483299165243688952024-02-20T14:49:11.674-08:00What is ajax? ajax code, ajax examplesajax code, ajax examples, ajax tutorialsMark Servanteshttp://www.blogger.com/profile/05785729623197072826noreply@blogger.comBlogger8125tag:blogger.com,1999:blog-5848329916524368895.post-66204849615948241062007-06-11T13:15:00.000-07:002007-06-11T13:17:02.669-07:00Two styles of Ajax<h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Introduction </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Ajax started quietly materet technology, and it has already processed Patterns different approaches, schools (and there are mandatory and holy war). </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In particular, several people have (for example note Frank Sommers, which spodvigla me to write this), I read that shaped two fundamentally different approaches to writing ajax-prilozheny : </span><br><br /><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><i>* A ready HTML on the server automatically implement it in the right place pages</i> </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">* transfer to the only structured data, and change them HTML'a script on the client </span><br><br /><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Though Frank says that the two approaches are incompatible, I discovered that it was their very confusing, and I think that good :-). </span><br><br><br><br /><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">More approaches </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Sending HTML </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The approach to the transfer HTML'a ideal for pages which, in conjunction with the server change slightly. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">For example some form, which after sabmita server again appears on the screen, and with it, or paints a picture that all is well or painted list of mistakes. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The ajax reduces the amount of data transmitted on the network server is not taking any form of display, and only the assay. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The undoubted advantages of this approach include exceptional ease of ideas from which directly follows that on the client side can automate virtually all : </span><br><br /><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><i>* substitution sabmita forms processor javascript'ovym</i> </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">* formation of the scripting processor data in a form suitable for sabmita server (name1 = value1 & name2 = value2) </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">* receive an answer and introducing it into the page </span><br><br /><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Virtually all that remains to be done programmer is : </span><br><br /><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><i>* tknut finger in it is what button he wants "to make ajax" and what block from the then save the result</i> </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">* Server explain SWT, which is part of the answer must be cut to requests ajax'nyh </span><br><br /><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The cons approach, I would include that it is worse than working for "vysokodinamicheskih" page, where one of the changed parts. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">For example a long thread of comments where sabmitu form with the server to be replaced with a new commentary and, perhaps refresh line "N comment, which is quite a different page. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Here, in the automatic model, you should refer to the part, which includes all the necessary pieces, even if there are data that are not expected to change. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In practice, this may mean that the network running nemalenkie amounts of data comparable to the size of the actual page, and the whole purpose ajax'a comes down to lack animation browser icon in the upper right-hand corner. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">And I underline "may", unfortunately, is true more often than I would like to, because this fully automated approach attracts many developers who do not have the time and / or willingness to deal with scripting, and rely on the fact that SWT help them do so small blood. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">They could never say on time or properly correct the problem at a lower level. </span><br><br><br><br /><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Transfer structural data </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The transfer of structured data was essentially ajax'a even when he called the XmlHttpRequest. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">So it is a creation designed to appeal to the server and receive a description of the status of the system, expressed in XML, a language that is convenient for computer processing. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Immediately I say that despite the fact that this was intended, a light wedge at XML-otvetah not Tsiolkovsky, and the structure can be made differently, as a little later. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Plus, this approach to maximize flexibility. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">You can make absolutely any format and dataset, which was requested from the server, which is exactly the type of information that is not enough for the customer, and nothing more. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">At the same customer through Javascript'a page can be changed completely, and as you see fit. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Take the same example with commentary : commentary sent to the server, and the response back like this : </span><textarea name="code" class="css" rows="15" cols="100"> <comment status="ok" quantity="12"/> </textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">What does that comment has been validated and are now on page 12. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Everything else can do for you : pririsovat new unit commentary, there perekopirovat text moulds, fomochku delete, update of the new figures. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The most obvious disadvantage of the transfer is much greater volume and complexity of programming. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">And it is several things. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The first difficulty is to use XML'a. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Although the format of a clear and remarkable, in Javascript'e it can be operated only through DOM. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">That unable to write and very hard to read : too much text for simple things. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Fortunately, this particular flaw in the recent move by JSON format : the data returned from the server in the form of XML, but as a piece of code creates Javascript'ovogo object with your structure : </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">response = (status : 'ok', quantity : 12) </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">He immediately eval'om performed in the script and you get a response facility, which has response.status and response.quantity. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">It is very easy and without </span><br><br /><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">getElementsByTagName ( 'response') [0]. </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The emotions of random XML-otveta remains the second issue : a full HTML manually DOM-metodam that, again, and difficult to raise. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Even worse, that most of these are two very different places, which is defined as pages : HTML-shablon and Javascript'ovy code. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">That means changes to accurately duplicate here and there. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">And it means that for writing HTML'a you now need a person who can write and HTML, Javascript and heavy. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">"Maintenance hell, in other words. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">In fact, when I began with XmlHttpRequest'om played, it seemed very natural to me : every trick able parsit XML, then this is the correct way to use. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The result of the exercises was fairly songs custom ajax-interfeys to chat with many without fenechek. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Then, in 2003, he was terribly technologically advanced, but drilling it into something known, we never spodobilis. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">I was surprised even now that he is still working. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Now here is the link to the history :-) </span><br><br><br><br /><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Combining the best features </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The incompatibility, which said Frank Sommers, present only in terms of programming, which selects the transfer HTML, and does not want to be immersed in scripting at all. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">However, if the programmer is not opposed to this in principle, the transfer of the structure can be combined with the transfer HTML'a. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The principle, in fact, it is very simple : </span><br><br /><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><i>* response from the server goes to JSON-obekta</i> </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">* things, not to generate HTML (eg move something somewhere, hide / open, etc.), performed by the script, using the data from the facility </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">* if you want to change something trivial pieces of HTML, they passed rows in the same facility and which must be inserted </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">* Variable part of HTML on the server are formed as small shablonchiki included, and used to start a page and ajax-otvetah </span><br><br /><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">In other words, all the "great idea" is that the need to abandon dogma "Only XML'om" and enjoy what is convenient. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The only thing that I have not liked this approach is that on the server side, the work of a few. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Without ajax'a code, which serves as POST form, is only two answers - either the same form with errors, or redirecting, when all is well, since ajax'om to each response option is added to the issuance JSON-objects.Mark Servanteshttp://www.blogger.com/profile/05785729623197072826noreply@blogger.com0tag:blogger.com,1999:blog-5848329916524368895.post-67417242563982594682007-06-11T12:53:00.000-07:002007-06-11T13:10:25.804-07:00Using AJAX in ASP.NET technology through Atlas.<br><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>AJAX (Asynchronous JavaScript and XML)</b> is a cross platform technology publish. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This technology allows developers to perform asynchronous requests to the Web, using the markup language of XML. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Technology firms Microsoft code-named "Atlas" enables the use AJAX to create server applications based on ASP.NET 2.0 technology. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">This article focuses on a simple Web-based applications to dynamically on the client side complete data pull-down list and make dynamic loading additional information from the database using ASP.NET 2.0, AJAX and Atlas. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">To begin with the Atlas technology to download an extension to Visual Studio 2005. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">You can do this with the Microsoft site (download). </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">With this expansion should create a new Web project using the template "ASP.NET 'Atlas' Web Site" (Fig. 1) </span><br><br /><center><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><small>Fig.</small> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><small>one window for a new project based on the template</small> </span><br><br></center><br /><center><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><small>Fig.</small> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><small>2 Sozdavaemaya table sprEmployee</small> </span><br><br> </center> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">After setting up a database and fill it Which of you are ready to create web necessary to extract information from the database in XML format. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">To create a web in the window, select "Solution" Exploler up project, and then to me Website select Add New Item. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In the dialog box (Figure 3) choose a template Web Service, a name WebAccess.asmx and remove tick Place code in separate file. </span><br><br /><center><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><small>Fig.</small> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><small>3 window of a new web</small> </span><br><br> </center> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Now add code to our web : </span><textarea name="code" class="VB" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><% @ WebService Language = "VB" Class = "WebAccess"%> Imports System.Web Imports System.Web.Services Imports System.Web.Services.Protocols Imports System.Collections Imports System.Data.SqlClient </span><WebService(Namespace:="http://tempuri.org/")> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">_ </span><WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">_ Public Class WebAccess Inherits System.Web.Services.WebService Public Structure EmployeeLittleRec 'structure to send data on accounts Dim Name As String' Name your ID As Integer Dim 'account Cod End Structure Private Structure EmployeeRec' structure to provide more information about account Dim Name As String 'Account Name Dim Password As String 'Password account Dim DateBegin As Date' Established Dim DateEnd As Date 'Data disposal Dim Comments As String' Comments End Structure'' ' </span><summary> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">" 'The receipt of additional information on the account code''' </span></summary> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">'' 'code account </span></param> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">'' ' </span><returns> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Get HTML code containing the account information </span></returns> <WebMethod()> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">_ Public Function GetFullEmployeeInfo (ByVal IDEmployee As Integer) As String Dim Rec As EmployeeRec Dim ReturnStr As String Dim con As New SqlConnection ( "workstation id = Test; packet size = 4096; Data Source = crash; Initial Catalog = WebAccess; user id = sa ") 'For a connection to the database con.Open ()' Open Connection (here certainly need to intercept exceptions, but this article is not about this) Dim command As New SqlCommand ( "SELECT * FROM WHERE sprEmployee IDEmployee =" & CStr (IDEmployee) con) 'Create a request to our table Dim dbReader As SqlDataReader dbReader = command.ExecuteReader ()' Create a SqlDataReader reading of the table If dbReader.Read Then Rec.Name = CStr (dbReader ( "Name")) Rec.Password = CStr (dbReader ( "Password")) Rec.DateBegin = CDate (dbReader (DateBegin ")) If Not IsDBNull (dbReader (" DateEnd ")) Then Rec.DateEnd = CDate (dbReader (" DateEnd ")) Else Rec.DateEnd = Nothing End If Rec.Comments = CStr (dbReader (" Comments ")) = ReturnStr String.Format ( " </span><p> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Name : (0) </span><br /> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Password : (1) </span><br /> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Date Connection : (2) </span><br /> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Date off : (3) </span><br /> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Comments : (4) </span></p> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">"Rec.Name, Rec.Password, Rec.DateBegin, Rec.DateEnd, Rec.Comments) 'Creating HTML which will be launched immediately to Else ReturnStr =" Error getting' list was not found End If con.Close con.Dispose () () Return ReturnStr End Function'' ' </span><summary> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">" 'The need for a list of accounts''' </span></summary> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">" 'The maximum number of entries </span></param> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">'' ' </span><returns> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">An array of information on records </span></returns> <WebMethod()> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Public Function GetEmployee (ByVal Count As Integer) As Generic.List (Of EmployeeLittleRec) Dim sql As String Dim ListRec As New Generic.List (Of EmployeeLittleRec) 'Creating an array Dim OneRec As EmployeeLittleRec Dim ReturnStr As String = "" Dim con As New SqlConnection ( "workstation id = Test; Packet size = 4096; Data Source = crash; Initial Catalog = WebAccess; User id = sa ") con.Open () 'Connect to the database Dim command As SqlCommand If Count> 0 Then 'Checking whether a number of displayed records sql = String.Format ( "SELECT TOP (0) IDEmployee, Name FROM sprEmployee" Count) Else sql = "SELECT IDEmployee, Name FROM sprEmployee" End If command = New SqlCommand (sql, con) Dim dbReader As SqlDataReader dbReader = command.ExecuteReader Do Not Until dbReader.Read 'Fill array accounts OneRec.ID = dbReader (IDEmployee) OneRec.Name = dbReader ( "Name") ListRec.Add (OneRec) Loop con.Close con.Dispose () () Return ListRec' Check array End Function End Class </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><small>Code Listing 1 Source Code Web</small> </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Now proceed to a web page to access information on the accounts. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">To that end, providing the box "Solution" Exploler up in the draft and selecting a menu item Website Add New Item, ask relevant parameters created a page (Figure 4). : </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Template-Web Form. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Name-AtlasDropDown.aspx. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Similarly Place code in separate file-removed. </span><br><br /><center><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><small>Fig.</small> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><small>4 Create a new web page</small> </span></center> <br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">After creating a web introduce a code necessary for the work. </span><textarea name="code" class="xhtml" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><% @ Page Language = "VB"%> </span><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server"><br /></script> Testing Atlas <script language="javascript" type="text/javascript"><br />// <!CDATA[<br />///////////////////////////////////////////////////////////////////<br />//JavaScript для работы с веб-службой и обработка клиентских событий<br />///////////////////////////////////////////////////////////////////<br />function bttnLoadToDropDown_onclick() //Функция обработки клика по кнопке<br />"Загрузить список"<br />{<br />document.getElementById('SplashScreen').style.display='block';<br />//Показываем "идет загрузка"<br />var Count =document.getElementById('txtCount').value;<br />//Получение кол-ва выводимых записей<br />WebAccess.GetEmployee(Count,OnCallBackResult); //Выполнение запроса к<br />веб-службе, где OnCallBackResult -функция обратного вызова<br />}<br />function OnCallBackResult(result) //Описание функции обратного вызова, в<br />которую возвращается результат<br />{<br />var ddl =document.getElementById('ddlEmployee'); //Объявляем наш<br />выпадающий список<br />var i;<br />for (i=0;i<result.length;i++)<br />{<br />ddl.options[i]=new Option(result[i].Name,result[i].ID);<br />//Добавляем в список загруженные данные<br />}<br />document.getElementById('SplashScreen').style.display='none'; //Скрываем<br />"идет загрузка"<br />}<br />function ddlEmployee_onchange()<br />{<br />document.getElementById('SplashScreen').style.display='block';<br />//Показываем "идет загрузка"<br />WebAccess.GetFullEmployeeInfo(document.getElementById('ddlEmployee').value,On<br />CallBackFullInfo); //Выполнение запроса к веб-службе<br />}<br />function OnCallBackFullInfo(result)<br />{<br />document.getElementById('FullInfo').innerHTML=result //Показываемый<br />полученных HTML пользователю<br />document.getElementById('SplashScreen').style.display='none'; //Скрываем<br />"идет загрузка"<br />}<br />// ]]><br /></script> <form id="form1" runat="server"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><% -- Obyavlyaem of Atlas --%> </span><atlas:ScriptManager ID="ScriptManager1" runat="server"> <Services> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><% -- Obyavlyaem link to our Web services --%> </span><atlas:ServiceReference Path="WebAccess.asmx"<br />Type="text/javascript" /> </Services> </atlas:ScriptManager> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><% -- For an object to display the boot --%> </span><div id="SplashScreen" style="position: absolute; display: none;<br />left: 246px; width: 476px;<br />top: 141px; height: 49px; text-align: justify;"> <h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"></strong></span><strong><span style="font-size: 32pt; color: #ff0066">Is Data</span></strong> </span></h2> </div> <div> <input id="txtCount" style="width: 147px" type="text" value="0" /> <input id="bttnLoadToDropDown" type="button" value="Загрузить список"<br />onclick="return bttnLoadToDropDown_onclick()" /> <br /> </div> </textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><small>Code Listing 2 source code web</small> </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Now start up project implementation. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">If all goes well, you should show that the browser window (Figure 5), and after downloading the list and select a record you will about this type as in Fig.Mark Servanteshttp://www.blogger.com/profile/05785729623197072826noreply@blogger.com0tag:blogger.com,1999:blog-5848329916524368895.post-90683682722021963782007-06-11T12:47:00.000-07:002007-06-11T12:52:15.505-07:00AJAX - A New Approach to Design<h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Home </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">If both can be called "glamurnym" something in the contemporary design of interfaces, it is a web. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">After all, the last time you heard that someone admired interface is not available on the Internet? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">(Ok, except iPod.) All the latest and innovative work on the Web. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">However, the web developers can not do anything to envy from their peers, which desktop-prilozheniya. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">You have all the strength and speed of response, which seem inaccessible to the web. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The same simplicity, which resulted in the rapid spread of a global network now a gap between the user interface, which we can provide, and interaction with the user desktop applications. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The gap is closing. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Take a look at Google Suggest. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Look, the alleged proposal almost continuously updated as you enter text. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Now go to Google Maps. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Increase scale. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Capture the cursor card and its Moving back and forth. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Again, everything happens almost instantly, without waiting reloading the page. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Google Suggest and Google Maps are two examples of a new approach to web design, which we call the company Adaptive Path Ajax. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">It was established as a reduction of <Asynchronous JavaScript + XML> and represents a fundamental breakthrough in our ability on the web. </span><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">What is Ajax </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Ajax</b> is not a technology. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In fact, the number of successful technologies in a decentralized manner, collected in a strong new direction. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Ajax combines : </span><ul><br /><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">standardized presentation using XHTML and CSS; </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">dynamic display and interaction with Document Object Model; </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">sharing and management of data through XML and XSLT; </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">asynchronous data using XMLHttpRequest; </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">and JavaScript, which binds all of this together. </span></ul> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The classical model of Web applications is : most of the user sent back to the HTTP server. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The server performs the necessary processing, receives, processes numbers, interacts with various legacy systems and then provides HTML page to the client. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The model derived from the original application as a web of hypertext, but those who read the book know what makes web suitable for hypertext not necessarily make it good for software applications. </span><br><br /><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><small>Figure 1 : Comparison of the traditional model web (left) with the model Ajax (right).</small> </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">In this approach, many technical sense, but it is not good interaction with the user. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The server does its work, which is the user? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Correct, waiting. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">And with each user to step forward again and again. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Obviously, if we have created a web from scratch, it would not force the user to wait all the time. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">If the page is loaded, why should the user interaction with a halt every time program needs something from the server? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Indeed, why do you see the app connects to the server? </span><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">What is the difference between Ajax </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Annex Ajax preclude interaction type start-stop-start-stop by the introduction of Ajax as the intermediate layer between the user and the server. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">It may seem that adding a new level in the annex can only slow down the reaction, but actually the opposite. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Rather than download page at the beginning of the session custom browser downloads Ajax engine, written in JavaScript and usually concealed in a hidden frame. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This engine is responsible for developing the user interface and interaction with the server on the user's behalf. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Ajax engine allows interaction with the user asynchronously, that is, regardless of interaction with the server. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">So you no longer need to watch a blank browser window and cursor in the form of lost hours in anticipation of the server. </span><br><br /><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><small>Figure 2 : Comparison of the traditional Web interaction diagrams (top) and asynchronous applications Ajax (bottom).</small> </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Each of the user, which usually produces HTTP now instead takes the form JavaScript-vyzova engine Ajax. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Every response to the user who does not require treatment to the server, such as simple data validation, editing data in memory, and even some navigation, engine running independently. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">If the answer requires information from the server, such as loading additional interface code, data processing, or new data, the engine performs the necessary requests asynchronously, usually using XML, without interrupting user interaction with an application. </span><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Who uses Ajax </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Huge investments in the Ajax approach makes Google. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">All the major products announced last year Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps - Ajax applications. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">(For technical details of Ajax read the excellent research Gmail, Google Suggest and Google Maps.) The rest remained behind : many favorite all properties service Flickr rely on Ajax and retrieval A9.com from Amazon use a similar technique. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">These projects demonstrate that Ajax is not only in theory but also in practice for real applications. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This is not ordinary laboratory theory. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Applications Ajax can take any size from a simple and consists of a Google Suggest to a very complex and intricate Google Maps. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Working with Ajax last few months, we Adaptive Path realized that opened only the tip of the iceberg of the wealth of interaction and the speed of response, which provide applications Ajax. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This is an important development web, and its importance will only grow. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">And given the large number of developers who already know how to use the technology, we expect to see a growing number of organizations will follow suit and use Google competitive benefits offered by the Ajax. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">What's next </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The main task of building applications Ajax is not technical. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Indeed, the underlying technology, the Ajax conditioned, stable and well understood. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Rather, the challenge for developers of these applications is to forget about their perceptions of the restrictions web and start thinking more, a wide range of capacities. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">It would be interesting. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Questions and answers. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">March 13, 2005 : After the publication of essays Jesse we got a huge number of letters from readers with questions about Ajax. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Here Jesse answer some of the most common questions. </span><br><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Question.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Is Ajax inventor company Adaptive Path, or did Google? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Attended the company Adaptive Path in a Ajax-prilozheny Google? </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Answer.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Neither Google nor Adaptive Path is not inventing Ajax. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Latest Google simply the best examples of applications Ajax. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Adaptive Path was not involved in the development Ajax-prilozheny Google, but we did for its other customers. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Question.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Is Adaptive Path sells components Ajax is the owner or registered trademark? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Where they can be downloaded? </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Answer.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Ajax is not something that can be downloaded. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This approach, a way of understanding of the architecture of Web using certain technology. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Neither approach nor the name Ajax are not owned by Adaptive Path. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Question.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Is Ajax another name for XMLHttpRequest? </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Answer.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">None. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">XMLHttpRequest only part of the equation Ajax. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">XMLHttpRequest is the technical component that makes asynchronous interaction with the server; Ajax we call the general approach described in the article, which is based not only on XMLHttpRequest, but also the CSS, DOM, and other technologies. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Question.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">What does it give the whole name? </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Answer.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">It was something more than a short <Asynchronous JavaScript + CSS + DOM + XMLHttpRequest> to discuss the approach with customers. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Question.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">How asynchronous interaction with the server has been available for many years. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">What is novel approach Ajax? </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Answer.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The novelty of using these outstanding way to change the basic model of interaction in the real web. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Ajax provides only now because the time required for the development of these technologies and ideas about how best to apply them. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Question.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Ajax is the technological platform, or just the style of design? </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Answer.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Both. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Ajax is a collection of technologies used together in some way. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Question.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">For applications which type is best suited Ajax? </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Answer.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">While we do not really know. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Because of the relative novelty of this approach, our perception of where it is best applied is still in its infancy. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Sometimes the traditional model is the best web solution to a problem. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Question.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Does this mean that Adaptive Path anti-Flash this? </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Answer.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Just no. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Macromedia is a customer of Adaptive Path, and we have long supported Flash-tehnologiyu. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">As specialists in Ajax, we expect that for some specific tasks that Ajax will be the most passing decisions, and sometimes the best solution would be Flash. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Also, we are interested in exploring ways of combining these technologies (as in the case of Flickr, which uses both). </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Question.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Does Ajax restrictive access or compatibility with browsers? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Do disable applications Ajax button <Back>? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Is Ajax with REST? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Are there views on security developments in Ajax? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Can be developed Ajax-prilozheniya to work in the off JavaScript? </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Answer.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">All these questions can only be answered <can be>. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Many developers are already working in this regard. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">We believe that there is still hard to find any restrictions Ajax, and anticipate that the course will meet with the developer many such issues. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Question.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Some of the examples you use Google XML altogether. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Should I use XML and / or XSLT annex Ajax? </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Answer.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">None. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">XML is one of the most advanced ways to input and output data from the client part of Ajax, but nothing prevents you achieve the same effects using such technology structure for the exchange as JavaScript Object Notation or the like. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Question.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Simply Is An annex Ajax compared to the traditional Web? </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Answer.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Not necessarily. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Ajax annex inevitably leads to the launch complex JavaScript code on the client side. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Not so easy to do it that complex code efficient and free of errors, and to the success of this will require better design and development tools. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Question.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Can annex Ajax is a better interaction with the user than traditional Web? </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><b>Answer.</b> </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Not necessarily. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Ajax more flexible interface designers. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">However, the more power we have, the more care is needed to treat it. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">We must be careful to use Ajax to enhance ease of use applications, rather than worsen it.Mark Servanteshttp://www.blogger.com/profile/05785729623197072826noreply@blogger.com0tag:blogger.com,1999:blog-5848329916524368895.post-35380533482189553592007-06-10T13:25:00.000-07:002007-06-10T13:26:16.463-07:00XMLHttpRequest object<h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">First </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">One of the major difficulties faced by developers of web interfaces is that after the page has been in the browser client relationship browser to the server ends. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Any element of the interface requires re-applying to the server to re-boot the new page. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Because of the web loses its elegance and slow. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In this article, I will discuss how this problem can be solved with JavaScript, and XMLHttpRequest object. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">I am sure you know the traditional model of web interface. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">A user requests a page from the server, which is created on a server and then forwarded browser. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">We on this page have HTML-elementy describing the manner in which the user enters data. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The user sends data to the server and obtains a new page based on the data entered, and the process is repeated. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The whole process is determined by the nature of HTTP and different from how we work with conventional applications, which interface is inextricably linked to software logic. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Take a simple example entering the serial number in any Windows application. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">According to the rules, after you finish impose intricate set of numbers and letters in the fields adjacent to a green "check", meaning that you have entered the correct number. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">It appears instantly as a result of the logic of the "pad" in the interface. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Once you have finished typing the number of its program and issue a response. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The Web is a standard of conduct is quite different. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The fields in which you enter the serial number are exactly the same, but at the end of data entry, the user must click, send page on the server, which checks your information. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Back User revert new page, which will appear on the right or the wrong serial number. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">User failing to return to the previous page and then try again. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">And so on ad infinitum. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Certainly not often web requires the user to enter a serial number, but there are countless other examples where rapid reaction of the user interface to be very welcome. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">And because the whole logic of the user, to obtain this result in the traditional web very difficult. </span><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The scene appears JavaScript </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Thanks to a number of JavaScript programming logic can be moved in HTML, allowing a quick response to user actions. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">However, this solution has one major drawback. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The first problem is that as soon as JavaScript is in a user's browser with the page program logic is to see to the naked eye. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">If such verification enter e-mail addresses can not be scared, but when the check is linked with a serial number, checking algorithm is available to everyone who downloaded the page, which is not acceptable. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The second problem is that the major software logic in placing visit is not possible, because the interface simply is not designed to do so. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The logic must be at the level of applications, rather than servers, and that means we again go back to the server. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The problem is complemented by the fact that it is not always safe to expect the availability of JavaScript in the browser client. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">While most people leave JavaScript in their browsers included a large number of users who do not, or have the browser where JavaScript is unavailable or does not need as a class. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Hence the logic that makes JavaScript on the client side, you still have to check on the server, just in case. </span><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">XMLHttpRequest </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The solution can be XMLHttpRequest object. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The site was first implemented by Microsoft in the form of ActiveX, but it is now available as a built object in all Mozilla and Safari. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The site allows JavaScript-u built to the remote server without the need to reload the page. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Indeed built sent and received full support for the "scenes" page, and you do not even notice. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">This is a huge step forward, as it allows web developer to reach the same desired result of a fast user interface, while maintaining the software logic on the server. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Through JavaScript-a data supplied by the user is sent to the server, where it is processed and the user almost immediately receive a response to your information. </span><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Let's start with basics </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Because of the conflicting stories XMLHttpRequest object is not part of a standard (though something similar has been proposed in the specification W3C DOM Level 3 Load and Save). </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">So there are two different methods of the object to call the script code. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In Internet Explorer ActiveX object is this : </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">var req = new ActiveXObject ( "Microsoft.XMLHTTP"); </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">In Mozilla, and Safari it is easier (because there is an object embedded in JavaScript) : </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">var req = new XMLHttpRequest (); </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Of course because of this difference, you need a code branches, each of which will be carried out depending on which browser loaded script. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">There are several ways of doing so (including various saying khaki and the "conditional comment"). </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">But I believe that the best just to check in the code, whether or not a browser facility. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">A good example is the code, taken from the Apple site, which released the documentation on the site. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Let us, and we will enjoy : </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">var req; function loadXMLDoc (url) (/ / branch for native XMLHttpRequest object if (window.XMLHttpRequest) (req = new XMLHttpRequest (); req.onreadystatechange = processReqChange; req.open ( "GET", url, true); req.send (null); / / branch for IE / Windows ActiveX version) else if (window.ActiveXObject) (req = new ActiveXObject ( "Microsoft.XMLHTTP"); if (req) (req.onreadystatechange = processReqChange; req.open ( "GET", url, true); req.send ();))) </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">This code is particularly important to pay attention to onreadystatechange property. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">See how it is assumed to function processReqChange. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This feature is Polo event, which starts whenever there was a change of the facility req. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The designated numbers from 0 (object neinitsializirovan) to 4 (request is complete). </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">It is because our script will not wait for a response from the server to continue their work. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">HTTP will be formed and sent to the server, but the script will be performed next. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Because we have chosen the option of conduct, we can not just at the end of functions return the result set, as we know, we were at that time or not. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">For this we have provided processReqChange function, which will monitor the facility req, and tell us at the right time, the process of getting the document completed, and we can go further. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">This function processReqChange want to check two things. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">One is waiting for the state of the object changes to req 4 (meaning that the process of obtaining documents from the server completed). </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Second, check HTTP-status response. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">You know that code means 404 "file not found" and 500 - "An error occurred on the server." </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">But we need a good old code 200 ( "OK"), which means that our request on the server has been successfully concluded. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">If we received and the 4 and the code 200, we can continue with our script and process the results obtained from the server. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Of course otherwise we must handle all errors, for example, if the response code is 200. </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">processReqChange function () (/ / only if req shows "complete" if (req.readyState == 4) (/ / only if "OK" if (req.status == 200) (/ / ... processing statements go here ... </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">) else (alert ( "There was a problem retrieving the XML data : \ n" + req.statusText);))) </span></textarea><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">In practice, </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">I am going to create a model for a demonstration of the ideas. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Many web is the procedure when a new user logs into the server and select "nickname" for the record. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Very often the "nickname" is to be unique, because once there is a "book" on the server, a check on the database users, it is already a "nickname" or not. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">If you ever recorded on an email server, you remember how tedious search for "nickname", which has remained unused. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">It would be very good if carried out without the need to check each time to update the page. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">To resolve, we will use the four key elements : XHTML-formoy, JavaScript functions, written specially for this situation, our two common functions, which we discussed above, and finally server script, which will go to the database. </span><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Form </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">This is the easiest part of a simple form with a box for typing "book". </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">By onblur events, we tied our script checks. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In order to bring you a message of the test, I placed it in the shape and hid with CSS. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This is a more elegant and polite way than standard dialog box function alert (). </span><textarea name="code" class="css" rows="15" cols="100"> <input id="username" name="username" type="text"<br />onblur="checkName(this.value,'')" /> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"></span><span class="hidden" id="nameCheckFailed">This name is in use, please try another.</span> </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The CSS declared hidden properties of the class, and another class of error, which provides for the withdrawal of error messages. </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">span.hidden (display : none;) span.error (display : inline; color : black; background : pink;) </span></textarea><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Processing of data </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The checkName used to verify data supplied by the user form. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The function is to take the data, decide what the data server script give rise to another feature that will make all the "dirty" work with http and answers, and then process the answer. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">But our role will consist of two parts. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">One part is from the shape, and the other handles response from the server. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">I will explain why this is done, a little later. </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">function checkName (input, response) (if (response! ='') (/ / Response mode message = document.getElementById ( 'nameCheckFailed'); if (response =='1 ') (message.className =' error ';) else (message.className = 'hidden';)) else (/ / Input mode url = 'http://localhost/xml/checkUserName.php? q=' \ \ + input; loadXMLDoc (url);)) </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Answer-treated simply reply that we get from the server code will be either 1 or 0. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">1 means that the "nickname" is already being used by someone. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Depending on the response, our function is changing the name of class, the message is either running or hiding. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">As clear from the code, work on the server performs checkUserName.php script. </span><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Building and HTTP response </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">As you saw above, the work done with HTTP two functions : loadXMLDoc and processReqChange. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The first practically it is not necessary to change, while the latter requires some change to work with DOM-om. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">As you will recall, is the successful result of the request will not be referred to as processReqChange, we can not recover from this as a priority. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Because of this, we need to implement a clear call to another location code to take advantage of the result. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">That is why checkName function is divided into two parts. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Thus, the main task processReqChange function is to handle XML-otvet received from the server and to allocate some of that response functions checkName. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">We do not want to make this function a specific code, since these functions can be used and other elements of the page to access the server. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Therefore, we are not inserted in the function name as processReqChange checkName. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Instead, we decided that the server will be in its response to the title role, which it applied. </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><? xml version = "1.0" encoding = "UTF-8" standalone = "yes"? > <response> <method> checkName </ method> <result> 1 </ result> </ response> </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Parsing The simple answer is no problem. </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">processReqChange function () (/ / only if req shows "complete" if (req.readyState == 4) (/ / only if "OK" if (req.status == 200) (/ / ... processing statements go here ... </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">response = req.responseXML.documentElement; method = response.getElementsByTagName ( 'method') \ \ [0]. firstChild.data; result = response.getElementsByTagName ( 'result') \ \ [0]. firstChild.data; eval (method + '(\' \ ', result)');) else (alert ( "There was a problem retrieving \ \ the XML data : \ n" + req.statusText);))) </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Turning to the properties responseXML XMLHttpRequest object, we get XML-otvet that came from the server, which we will then proceed through DOM. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Taking the name of the response function, which required a response, we know what functions must be transferred to the value. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Once you have finished the test, remove the condition else that you did not bother users more than an error. </span><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Server script </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The last element of our puzzle is a server script, which will receive the request, process it and return the response in the form of XML. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In our example, you would go to the database to determine whether this is "nickname" or not. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">For the sake of brevity, in my example, the script does not use a database, and just check the two names "Drew" and "Fred". </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><? php header ( 'Content-Type : text / xml'); function nameInUse ($ q) (if (isset ($ q)) (switch (strtolower ($ q)) (case 'drew' : return'1 '; break; case 'fred' : return'1 '; break; default : return'0 ';)) else (return'0 ';)) ? > </span></textarea><br /><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><? php echo '<? xml version = "1.0" encoding = "UTF-8" standalone = "yes "?>';? > <response> <method> checkName </ method> <result> <? php echo nameInUse ($ _GET [ 'q'])? > </ result> </ response> </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Of course, the same procedure must be checks and to the server script to be executed when the user clicks "Submit" on the registration form. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This, in the event that he was disabled in your browser JavaScript, or you deliberately introduced "nickname", which is already in use. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In addition to the busiest sites might be the case that in choosing "id", it was clear, but at the time it had already taken one. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">As a next step by expanding the functionality of the script. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">For example the server may return alternative "sources" on the basis of "id", the selected user, but already employed. </span><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Finally </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">This small example only slightly to the topic of XMLHttpRequest object. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Here are some examples of its use : Google Suggest where XMLHttpRequest used to tell search terms, annex Ta-da Lists, which made data on the server via XMLHttpRequest again making the interface is very fast. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The most interesting here is that the code work force, but to find any more interesting ways to use it.Mark Servanteshttp://www.blogger.com/profile/05785729623197072826noreply@blogger.com0tag:blogger.com,1999:blog-5848329916524368895.post-23278462882182165052007-06-10T13:20:00.000-07:002007-06-10T13:21:27.317-07:00AJAX application<h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Introduction </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">This AJAX two years ago was in Turkmenistan (and the word AJAX had not yet invented). </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The web-pages are updated on the fly, of course. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">On the contrary, without AJAX difficult to imagine some services. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">It worked conventional web? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Typically, the event (click on the link or by pressing a button) browser responds simply a request server. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">When the response came from the server, the contents page is updated. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">One of the problems was that when you update the contents of a web page is transferred to the new state. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The information on the previous state is only stored the data provided in the request. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The more accurate information on the same condition of need, the more data must be sent in the request. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Another disadvantage is the need to send duplicate data sets client after each event. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">For example, if a user mistake when filling out the form, instead of short error is again loaded and form, and all information entered previously. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Modern browsers that support standards W3C DOM can bring web to a new level. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The interaction is almost the same. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Here are just queries and receives a response from the server now script on the client side, but instead to update the page is updated, only part of it (instead of updating may be other options, for example, sent the following). </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">WebDAV distributed produced, and is part of the logic on the client side, and some server side. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Such applications, and as the term "AJAX Applications (acronym stands for Asynchronous Javascript And Xml Applications). </span><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">XMLHTTPRequest object </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">For asynchronous requests from the client to the server-side browser is a special object called XMLHTTPRequest. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">What methods and properties of the object that will be used beyond : </span><ul><br /><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">XMLHTTPRequest.open ( "method", "URL", async, "uname", "pswd"), a request to the server. </span><ul><br /><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">method, type of request, such as GET </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">URL - URL, for example http://localhost/file.xml </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">async - if True, it will be used asynchronous request, the implementation of the script will continue after the news. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Otherwise, you would expect a response from the server freezing UI. </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">uname, pswd-ID and password for easy veb-avtorizatsii. </span></ul><br /><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">XMLHTTPRequest.send ( "content"), sends a request to a server. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The content can be data for POST-zaprosa or an empty string. </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">XMLHTTPRequest.onreadystatechange-handler triggering events for each change of the facility. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The facility may be as follows : </span><ul><br /><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">- 0 before the request has been sent (uninitialized) </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">1-object initialized (loading) </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">2-response from the server (loaded) </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">3-connection active (interactive) </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">4-completed facility (complete) </span></ul><br /><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">XMLHTTPRequest.responseText return from the server data as a string. </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">XMLHTTPRequest.responseXML if server response came in the form of a valid XML, returns XML DOM object. </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">XMLHTTPRequest.status return HTTP-otveta status as a number. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">For example, if the requested page 404 has been found on the server. </span></ul> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Consider the use of the facility by the simple AJAX-prilozheniya. </span><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Paul SELECT finding </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Suppose we have a table with a million records. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The user must choose only one entry in the table (a relationship of "one to many"). </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Select the user is only one step in filling a large web. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Naturally, in order to enable the user to select an entry from a million, needed some means of finding this very account. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">For example, a simple text search by name. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">In traditional web for this purpose would have to use a separate page and keep the rest in the form of a user session or break the process of filling forms at several stages. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In AJAX-prilozhenii additional page is not required. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Select entries will be realized through two elements web. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The first element is the text box where the user enters a keyword. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">It is sent to the server, and he returns only rows of tables that meet the search conditions. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Server (a list) is placed in the SELECT, which the user and makes the final choice. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Thus, when sending all forms server gets selected in the SELECT value in the form of ID records from a large table. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">In HTML, it may look like this : </span><textarea name="code" class="css" rows="15" cols="100"> <input type="text"<br />onkeyup="lookup(this.value, 'id_select',<br />'http://localhost/cgi-bin/xmlhttp.cgi')" /> </textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">In any event KeyUp (wheel button) in the text box link lookup ( 'text', 'id-selecta', 'url') </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">function lookup (text, select_id, url) (/ / Get the XMLHTTPRequest object if (! this.http) = (this.http get_http (); this.working = false;) / / query if (! this.working & & this.http) (var = this.http http; / / If in the text box below three / / characters are not doing anything if (text.length <3) return; / / add encrypted text / / in the URL url = url + "? text = "+ encodeURIComponent (text); / / create a query this.http.open ( "GET", url, true); / / attaching to the request funktsiyu-obrabotchik / / events this.http.onreadystatechange = function () (/ / 4-data ready for processing if (http.readyState == 4) (fill (select_id, http.responseText); this.working = false;) else (/ / data reception, / / user can amusement / / reports / / ZHDITE ANSWER)) this.working = true; this.http.send (null);) if (! this.http) (alert ( 'Error creating XMLHTTP object! '))) </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">As can be seen, at the beginning we get XMLHTTP-obekt using get_http (). </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The search text encoded in style and shape GET-zapros URL to the server. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">URL in this case would look something like this : http://localhost/cgi-bin/xmlhttp.cgi?text =... </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The script on the server, receiving important text makes search in the table and sends a customer. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In what events XMLHTTP object that the data received from the server and ready for use, fill link ( 'select_id', 'data'), which fill the SELECT list of scientific data. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The get_http () is the realization of kross-brauzernaya XMLHTTP object (in each browser, it produced its own). </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Its implementation comments you can easily find on the Internet, that is to say, an example of a textbook. </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">get_http function () (var xmlhttp; / * @ cc_on @ if (@ _jscript_version> = 5) try (xmlhttp = new ActiveXObject ( "Msxml2.XMLHTTP");) catch (e) (try (xmlhttp = new ActiveXObject ( "Microsoft.XMLHTTP");) catch (E) (xmlhttp = false;)) @ else xmlhttp = false; end @ @ * / if (! xmlhttp & & typeof XMLHttpRequest! = 'undefined') (try (xmlhttp = new XMLHttpRequest ();) catch (e) (xmlhttp = false;)) xmlhttp return;) </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The fill () gets to enter a value for the ID SELECT list to be filled, and the data retrieved from the server. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">For simplicity, assume that the data from the server, we get a table, fields which are divided tab 't', a symbol of the line-transfer lines' n ': </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">id1tname1n </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">id2tname2n </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">... </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The contents of this table, we will complete the field SELECT OPTION elements. </span><textarea name="code" class="JScript" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">function fill (select_id, data) (/ / SELECT field in the form of variable var select = document.getElementById (select_id); / / purifying select.options.length SELECT = 0; / / if no data is not doing nothing else if (data.length == 0) return; / / in the array arr-line derived tables var arr = data.split ( 'n'); / / for each line for (var i in arr) (/ / in an array of fields val - val = table arr [i]. split ( 't'); / / add a new site to our OPTION SELECT select.options [select.options.length] = new Option (val [1] [0] val, false, false);)) </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Done. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Now for any web application, we can realize the importance of this choice multimillion list, which the user will be like a few keystroke. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The network selection occurs almost instantly. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In the case of unstable or slower connections to the server, it must also notify the user that the loading of data from the server is not yet complete. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Worth and provide funds to respond to sever the connection.Mark Servanteshttp://www.blogger.com/profile/05785729623197072826noreply@blogger.com0tag:blogger.com,1999:blog-5848329916524368895.post-32664066537942925442007-06-10T13:16:00.000-07:002007-06-10T13:17:55.406-07:00Ajax DHTML<span onmouseover="_tipon(this)" onmouseout="_tipoff()">When opportunities become scarce, and improve already existing wall, and then a technological breakthrough. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The breakthrough is AJAX (Asynchronous JavaScript and XML) approach to building Web user interfaces, so that the entire Web page does not have to be reloaded each time the user makes a change. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">AJAX is one of the components of DHTML. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">What gives us the technology. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The development WEB applications seeking to distinguish between client and server, and it comes from the widespread use of templates, such as Smarty and XSLT. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The projects are becoming more complex and bind the different technologies become far too expensive for the developer. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">For example, all formatting styles are made in CSS or XSL files, HTML and XML data stored elsewhere, in the third handler server, database in the fourth. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">And if even 5-6 years ago almost everywhere could see the interlocking whole in a single file, it would become increasingly rare. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">If a more complex projects there is a need for structure and readability of the code. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Do not litter code programmer code Imposer and Imposer code-flattening designer, and so on. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The need to be distinguished work. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">For example, the designer will do its work, its operator, its developer, but no one interfere with each other will not. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">As a result, each project participant will know soon enough, those with whom he had to work. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The group productivity and the quality of the project is more times. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">That problem has now been successfully resolved by the use of templates, but it also poses some difficulties, as to, say, connect Smarty, it is necessary to connect a software module templates, and clearly linked to the structure of the project. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">And this is not always possible and requires certain costs. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Slightly easier to use XML + XSL bundles, as they provide more opportunities, but the alternative is more. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">And what if we look in the direction of something radically new that would combine all the best with the possibility that there? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Try to JavaScript, which has the ability PHP or Perl, including working with graphics and database, which is much more convenient and practical scalability, and the same kross-platformen. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">So what is AJAX? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">For the first time since moving to Ajax in February opened a year article Jesse James Garrett (Jesse James Garrett), "Rethinking the Web." </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Ajax is not independent technologies. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This idea, which is based on two basic principles. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Using DHTML to the dynamic changes of this page. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Using the XMLHttpRequest to contact the server on the fly. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Using these two approaches to create a much more user-friendly WEB-interfeysy page, where interaction with the user. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Using Ajax is the most popular after Google started to use it in their sites like Gmail, Google maps and Google suggest. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The creation of these sites has confirmed the effectiveness of this approach. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">So more : taking classical model WEB-prilozheniya : </span><br><br /><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Customers dial a search, address issues of his life, coming into contact with the server, it makes a request. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The server performs the calculation in accordance with the request, calls to the database, and so on, after which the data are customers and, if necessary inserted in the templates and processed browser. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The result is a page that we see, and that 80% of the population at the WEB called the Internet. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This is a classic model, which has already proved himself and earned an honoured place in the sun. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This is the simplest model of interaction and consequently the most common. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">But it is increasingly becoming insufficient. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Imagine, on-line game "Ships", which played two hard-resident friend of South Africa and a resident of Japan. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">As with the model to make their game the most fun? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In any case sunken ships will be stored on the server, and that would not verify whether the opponent looked like, need to be updated every time the page and podguschat outdated data. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">"But people come caching" - and you will say absolutely right, but more is not going to be. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Caching only accelerate time interaction with the server, but does not eliminate the need to reload the page. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Alternatively, you can put some time itself, but in this case the page will be completely reset. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Now look at the model of interaction AJAX : </span><br><br /><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The sequence of a client and it will likely not understand what would happen, and the word AJAX will be associated only with the name of the football club. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">But on the server side, all is not true. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">When a server generated page, which will show you, and invite them to his interest sequenced. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">When informed (though not necessarily) a choice the client, its request will be treated to AJAX module, which will be of interest to all its computing and the server itself. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">But where is the innovation? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The main difference in terms of this method enables us to dynamically access the server and perform actions interest us. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">For example, we need to appeal to the database and receive data of interest to us then we will use. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The data we store in the XML file to be built dynamically, thus : </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Create a new object of JavaScript : </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">var req = new ActiveXObject ( "Microsoft.XMLHTTP"); (for IE) var req = new XMLHttpRequest (); (For the rest) </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Then write function uses this facility </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">var req; function loadXMLDoc (url) (/ / branch for native XMLHttpRequest object if (window.XMLHttpRequest) (req = new XMLHttpRequest (); req.onreadystatechange = processReqChange; req.open ( "GET", url, true); req.send (null); / / branch for IE / Windows ActiveX version) else if (window.ActiveXObject) (req = new ActiveXObject ( "Microsoft.XMLHTTP"); if (req) (req.onreadystatechange = processReqChange; req.open ( "GET", url, true); req.send ();))) </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Tel HTML file write a script that would : </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">function checkName (input, response) (if (response! ='') (/ / Response mode message = document.getElementById ( 'nameCheckFailed'); if (response =='1 ') (message.className =' error ';) else (message.className = 'hidden';)) else (/ / Input mode url = 'http://localhost/xml/checkUserName.php? q=' \ \ + input; loadXMLDoc (url);)) </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The file localhost / xml / checkUserName.php we are processing data from the command line in this case in your q. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">And by maintaining the structure of XML to store the same file. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">So we can receive and process data from a database, or something else we need. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The server will process only the data that we need to be updated, not the entire page when you restart. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Now back to the two friends, lovers sea battle : the emergence of this innovation, we can do the following : to check over every three seconds XML file, the test involves an audit of the database to a new record, that is, made of the opponent. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">If progress was made, page without rebooting mastering ships, thereby ruining the mood of water battles. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This functionality is achieved using simple Javascript and stylesheets. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This example is illustrative, but not limited to the use of this technology has much to the point. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">But it is not so easy. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Let us now look at negatives. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">First, we can transmit data only method GET respectively large amounts of data to be left alone. </span>Данная проблема уже не раз поднималась в разных источниках, но господа, есть ведь Сookies, которые вполне приемлемы в случаях передачи больших данных, чем может вместить в себя GET запрос, а Javascript в свою очередь имеет функции для работы с ними. <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The second-kross-brauzernost. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">XMLHttpRequest is not part of a standard (though something similar has been proposed in the specification W3C DOM Level 3 Load and Save). </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">So there are two different methods of the object to call the script code. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In Internet Explorer ActiveX object is this : </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">var req = new ActiveXObject ( "Microsoft.XMLHTTP"); </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">In Mozilla, and Safari it is easier (because there is an object embedded in JavaScript) : </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">var req = new XMLHttpRequest (); </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">All modern browsers support this facility and problems arise only 1.8% of the users (according to data of the company SpyLog), which are very old versions of browsers that do not support this facility. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">And finally, security. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The shrink further. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The main problem is that all the data and source code JavaScript functions can be seen by viewing the source code pages, respectively attacker can see the logic queries in a given set of circumstances necessary to implement a set of commands. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This is not a role that we are mere comparison, but what to do in more complex situations, such as authentication, and then send passwords. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">As noted above, the assistance comes Cookies. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The necessary data can be sent through them, just handle them. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Take an example where the user will be authenticated using technology which is devoted to art. </span><br><br /><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Generating pages, we are creating unique values, which then placing variables in the server. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">And Cookies browser, and then when we get authorization username and password that we need to allocate processing module on the server. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Once the user data and clicked Submit his password entered into Cookies, and the user name is a reference <i>open-http://www.mubestajax.com/ajax.php?login=pupkin</i> example, when the data server in the first place a check of the data. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Because the values that we have generated at the beginning of the server and then give them a global server variables and cookies must match, then verify the integrity of data transferred in the event of incompatibility program stops working. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">If all went well, then retrieved all the necessary data and the necessary calculations and work. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This type of protection is fairly simple and effective. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">But for large projects, it did not come. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">When a formulation of a security, better use of more sophisticated and reliable solutions. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">But in most cases, these precautions will be more than enough as the use of more complex modules using a technology that is not always part of the standard software of modern servers, the main feature of which is easy. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This is the technology such as MySQL and PHP have become so prevalent because </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">they provide easy work with its low resource consumption and little credibility. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">And to this software in the best possible approach to the above proposed. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">In conclusion I would like to say that AJAX on the one hand, a huge leap in WEB engineering, but on the other hand this is a long standing stage of evolution, which opened new horizons in the field of software development. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">At the same time, this technology is still "cheese" because of its use at the moment rather pleasant exception. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">But I am sure that it is not yet time to hear everything. </span><br><br>Mark Servanteshttp://www.blogger.com/profile/05785729623197072826noreply@blogger.com0tag:blogger.com,1999:blog-5848329916524368895.post-4056019649646362622007-06-10T13:03:00.000-07:002007-06-10T13:11:00.983-07:00Ajax - To begin<h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">To begin ... </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The pages of your site contains many specialized terms. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">When a user browses the site, it may raise questions regarding these terms. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">How do I get a visitor to a site where there are questions to delay answering questions? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Previously, the terms of pages processed as a reference and the user can choose to click on them and get a window with contextual cues. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This approach is quite awkward, it takes the user too much time to click on the link to await loading window, and then close the window. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In an era of AJAX we can be closer to the wishes of users. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">We can make sure that when you have a mouse on the word immediately appear communication with the display and once with the mouse cursor extended term, the message disappeared. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The presence of this service will not affect the volume of pages. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">When requesting contextual cues Java Script will apply to foreign vocabulary, receive and display its contents. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The method of obtaining information on the implicit request can be applied not only in the dictionary of terms. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Foundation you look for the link with a double emphasis in such projects as hotscripts.com and devarticles.com? </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This contextual advertising based on the engine IntelliTXT company Vibrant Media. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">When you move your mouse over the link that appears in the window advertising the offer on the subject. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This technology has already been dubbed in-text advertising. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Increasingly, the method applies to news portals. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Visitors see on the front page of the portal only headlines. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">But when you move your mouse over the headline news they get their brief description. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Thus, on the front page of the portal can accommodate as much more news. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">A visitor sees the headlines and the portal to get news announcements, it will be enough probezhatsya mouse cursor to the title. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Let us now look at how the contextual help is implemented using AJAX. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Programmer, mastered this technique can be worked out to make news portal comment on the request or write module in-text advertising. </span><br><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">So, obviously we need to take care of the message ever, which will appear every time a visitor makes cursor to the term. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">To window appeared and disappeared overnight, it should be placed in hidden DIV. </span><textarea name="code" class="css" rows="15" cols="100"> <div id="InstantMessage" class="instant_message"> </div> </textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">For a simple experiment, we can make it in the style of MS Windows system messages. </span><textarea name="code" class="css" rows="15" cols="100"> <style><br />.instant_message { padding: 5px; font-size: 12px; font-family: Arial; visibility: hidden;<br />position: absolute; width: 240px; border: outset 2px #FFFFFF; background: #D4D0C8}<br />.instant_message a { width: 240px; padding: 2px 17px; color: black; text-decoration: none;<br />cursor: default}<br />.instant_message a:hover {color: #ffffff; background: #0A246A}<br /></style> </textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The window should appear when the visitor checked your cursor over the term and disappear when the mouse cursor will be outside of the term. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">But at the moment the window should no longer gap, and the text of the definition of the term. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Thus, we need to put the terms in the text and in inline tag, supporting events onMouseOver and onMouseOut. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The first event should appoint the JavaScript, which would be the definition of the term, puts it in the window and displays a message box. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The second event is to appoint a feature that simply leaving the message box. </span><textarea name="code" class="css" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><a onmouseover="getDefinition('термин', event);"<br />onmouseout="hideMessage();">термин</a></span><a onmouseover="getDefinition('термин', event);"<br />onmouseout="hideMessage();">term</a> </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">The parameter function, depicting window (getDefenition) Communications must identify the term. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This term is used to query text of the definition by AJAX. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Since your windows, we need his position under the mouse cursor to support Gecko-bazirovanyh browsers in this function should also be referred parameter event. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The function to hide window (hideMessage) does not require any parameters. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Now our task is to make the function call getDefinition JavaScript position reporting window. </span><textarea name="code" class="JScript" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">adjustMessage function (evt) (MessageObj = document.getElementById ( 'InstantMessage'); if (isThisMozilla) event = evt; var = rightedge document.body.clientWidth-event.clientX; var = bottomedge document.body.clientHeight-event.clientY; if (rightedge <MessageObj.offsetWidth) MessageObj.style.left = document.body.scrollLeft + event.clientX - MessageObj.offsetWidth; else MessageObj.style.left = document.body.scrollLeft + event.clientX; if (bottomedge <MessageObj.offsetHeight) MessageObj.style.top = document.body.scrollTop + event.clientY - MessageObj.offsetHeight; else MessageObj.style.top = document.body.scrollTop + event.clientY; MessageObj.innerHTML = 'Loading ...'; MessageObj.style.visibility = "visible";) </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">So, we have a window of communication, raportuyuschee of downloading data. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Now, you request to the controller for the definition of the term. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">You can write your own functions for AJAX requests. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">But if you are just starting to work with AJAX, I suggest you ready library of Yahoo. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The inquiry will be : </span><textarea name="code" class="JScript" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">getDefinition function (term, evt) (adjustMessage (evt); var request = YAHOO.util.Connect.asyncRequest ( 'POST', 'http://adres_kontrollera', callback, 'term =' + term);) </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">If we ask controller, it is clear we have to write it. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In general, this is the easiest part. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">The controller-back description of the term, according to POST. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">However language we use when writing controller, we simply follow a few simple operations. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">connect to a database with SQL query for the definition of a display on the console, as follows : </span><textarea name="code" class="JScript" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">( "errormsg" : "An error of its code", "content" : "the definition of") </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">This data structure, known as JSON. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">She perceived JavaScript explicitly, as <native>. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">If AJAX-biblioteki YAHOO response service next controller design </span><textarea name="code" class="JScript" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">handleSuccess var = function (o) (if (o.responseText! == undefined) (showMessage (o.responseText);)) ; handleFailure var = function (o) (if (o.responseText! == undefined) (showMessage ( "Connection Error");)) ; var callback = (success : handleSuccess, failure : handleFailure, argument : [ 'foo', 'bar']); </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">We have only describe as showMessage (), which puts the text in the message box definition </span><textarea name="code" class="JScript" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">function showMessage (json) (var respondStructure = eval ( '(' json + + ')'); MessageObj.innerHTML = respondStructure.content; return false;) </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">As you can imagine, to conceal the message will only change the attribute of </span><textarea name="code" class="JScript" rows="15" cols="100"> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">hideMessage function () (var MessageObj = document.getElementById ( 'InstantMessage'); MessageObj.style.visibility = "hidden";) </span></textarea> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">When you try this example, it is unlikely that you will face problems with MS IE browser, but in FireFox you will find blinking the message. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This is because FireFox unique event serves onMouseOver / onMouseOut. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">However, this problem can be overcome by placing flags delays in service functions of these events. </span><br><br> <noindex> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Scripts are given examples can be downloaded <a href="http://www.phpclasses.org/browse/package/3505.html">here</a>.Mark Servanteshttp://www.blogger.com/profile/05785729623197072826noreply@blogger.com0tag:blogger.com,1999:blog-5848329916524368895.post-9483592226087315152007-06-10T07:13:00.000-07:002007-06-10T07:28:00.296-07:00What is xAjax?<h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">What is xAjax? </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">xAjax this open source PHP class library, which lets you easily create powerful, veborientirovannye Ajax applications using HTML, CSS, JavaScript, and PHP. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Applications developed by the library xAjax asynchronously can be located on the server PHP functions and update content without reloading the page. </span><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">How does xAjax? </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Library xAjax create JavaScript functions that are coated with PHP functions that you can call to the server in your application. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">When called JavaScript this function, which is coated for use as PHP XMLHttpRequest object for asynchronous connections xAjax object on the server, which is a function of PHP. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">After the action returned xAjax XML response from the PHP as a result. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Vozraschenny XML contains instructions and data to be analysed by the special functions of JavaScript-ovoy xAjax and used to update the contents of your application. </span><br><br><br /><h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Why you should use xAjax and not another library? </span></h2> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">If you choose this library, as it would satisfy all your needs in the development of your project. </span><br> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">xAjax offers the following opportunities, which together make it a unique and powerful tool : </span><br><br /><ul><br /><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">xAjax's unique system of javaScript, which can analyze vozraschenny XML and automatically handle it according to instructions in this response. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Since </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">xAjax handles all of this, you do not need to separately write some Javascript functions in order to process the returned XML. </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">xAjax an object-oriented development of software code and data storage code hajax separately from the other code. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">As an object code, you can add your own functions in a class xAjaxResponse using the addScript (). </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">xAjax works in Firefox, Mozilla, and perhaps that the rest of the Mozilla family of browsers, Internet Explorer, and Safari. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In addition to updating the value elements (meaning DOM) and innerHTML, xAjax also can be used to update styles, css classes of chekboksov and drop-down boxes, or any of the other properties of the elements. </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">xAjax may use one and multi-dimensional arrays, and associative arrays of javascript in your PHP settings xAjax functions. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">In addition, if you enter the site javascript function xAjax function, the function will receive PHP associative array defining characteristics of the site. </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">xAjax provides easy file handling formp. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Using the method javascript xAjax.getFormValues (), you can easily send data in the form of an array of options for asynchronous functions xAjax : xAjax_processForm(xAjax.getFormValues('f ormId');. </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">If occurrence with the input element forms under the name "checkbox [][]" and" name [first] "in order to create a multi-dimensional and associative arrays such as if you send the form using the $ _GET. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Using xAjax you can dynamically podgruzhat additional javascript to your application so that performance varied properties of DOM. </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">xAjax automatically compares the data returned from PHP functions with the current values of properties that you want to change. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Properties only change if the change is appropriate at this time. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This eliminates blinking, which occurs when an element is updated every time at regular intervals. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Each function will register to be available through xAjax, which have different types of requests. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">All functions default POST use a very small number of GET. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">This is done to improve security needs. </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">If not determined the requested URI xAjax tries to automatically determine the requested URL script. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Algorithm auto xAjax fairly universal, so that it will operate as a safe protocol https : / / and http:// and innovative ports. </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">xAjax recodes all their requests and responses in UTF-8, so it supports a wide range of characters and language. </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">xAjax been tested in various languages in Unicode including Spanish, Russian, Arabic. </span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">Almost all javascript dynamically via javascript has increased. </span><li> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">xAjax can be used in the Smarty template engine for creating a variable in smarty be following code : $ smarty-> assign ( 'xAjax_javascript', $ xAjax-> getJavascript ()); When using xAjax substitute in the title the following tag ($ xAjax_javascript). </span></ul><br><br>Mark Servanteshttp://www.blogger.com/profile/05785729623197072826noreply@blogger.com0