Getting started with AJAX Начало работы с AJAX

This guide provides some background info on Ajax, and then jumps right in and gets you started with examples. Это руководство дает некоторую справочную информацию о Ajax, а затем прыжки право и получает вы начали с примерами.

JavaScript has been the main use for XMLHttpRequest objects for a good number of years now, but only recently did it start to gain some “fame”. JavaScript был главным образом используются для XMLHttpRequest объекты для значительного числа лет, но лишь недавно она начала получать некоторые "слава". A lot of the ruckus has to do with the many advanced web applications having web developers that see it, drool and want their own site to have those same exact advanced applications/features. Много шума приходится делать со многими передовых веб-приложений с веб-разработчиков, которые рассматривают ее, нести чепуху, и хотят, чтобы их собственный сайт, чтобы иметь те же самые точные передовые приложения / функции. But some of it also has to do with the group of people at AdaptivePath who have named this application Ajax Но некоторые из них также связан с группой людей на AdaptivePath, кто назвал этот приложений Ajax

Ajax Beginners: What in the world is Ajax? Ajax для начинающих: Что в мире Ajax?

In a nutshell? В двух словах? Well Ajax is a solution to web interfaces. Хорошо Ajax является решением для веб-интерфейсов.

Commonly, the web user enters some data or makes a simple choice, and clicks a button finalizing that choice or data entry and sends the data over to the server. Как правило, веб-пользователь вводит некоторые данные или делает простым выбором, и нажимает кнопку завершить этот выбор или ввод данных и отправляет данные более чем на сервере. The server hastily observes the data and sends back an entire new web page. Сервер поспешно соблюдает данные и отсылает обратно все новые веб-страницы. Having to reload a page every time you want to do something is very annoying, disjunctive and extremely time-consuming for the user. После перезагрузить страницу каждый раз, когда вы хотите сделать что-то очень раздражает, альтернативное время и чрезвычайно трудоемким для пользователя. XMLHttpRequest resurfaces the browser-server interaction to behind the scenes, so the user can just keep on playing with the same page, even while elements on the page are talking to the server! XMLHttpRequest resurfaces браузер-сервер для взаимодействия позади сцены, так что пользователь может просто держать в игре с той же странице, даже если элементы на странице идет на сервер!

With JavaScript we’ve always been able to server-side script without anything happening in the browser by using a few classic tricks up our sleeves. В JavaScript мы всегда были способны на стороне сервера скрипт, не все происходит в браузере с помощью нескольких классических трюков наши рукава.

Caching form data to a file with JavaScript on a server is good, but this usually doesn’t return any useful information to the JavaScript that calls it, so its effectiveness is very limited. Кэширование данных в виде файла с JavaScript на сервере, это хорошо, но это, как правило, не возвращает никакой полезной информации для JavaScript, которая требует, поэтому его эффективность весьма ограничена. Ajax, however, can get a full parcel of data back from the script it calls. Ajax, однако, может получить полный пакет данных от сценария его звонки. Hence the “XML” part of the name - which really is just there for looks of sorts, kind of like the “Java” part of JavaScript, because the returned data can be plain text or whatever you like, if XML isn’t your preferred choice. Таким образом, "XML" часть названия - которое действительно только там выглядит своего рода, рода, как "Java" часть JavaScript, потому что вернулся данных может быть простой текст или как вам нравится, если XML не является вашим предпочтительного выбора.

This alone opens up so many exciting possibilities. Уже одно это открывает так много интересных возможностей. Every form submission, every JavaScript event, and whatever else application, can now interact with server-side databases and processing power! Каждая форма представления, каждое событие JavaScript, и независимо от остальных приложений, теперь может взаимодействовать с серверной базы данных и обработки власть! Data retrieval, password authentication, image generation - you just name it, Ajax can activate it. Данные поиска, пароль, проверка подлинности, изображение поколение - вы просто назовите его, Ajax можете активировать его.

Putting Ajax Into Practice Установка Ajax на практике

The only thing that limits Ajax-enhanced web application is your imagination and by browser support. Единственное, что ограничивает Ajax-расширение веб-приложений является вашей фантазии и браузере поддержку. Mozilla-based browsers can do it, Safari, and newer versions of Internet Explorer, and Opera 8 but not Opera 7. Mozilla на основе браузеров может это делать, Safari, а также новые версии Internet Explorer, Опера и 8, но не опера 7. It’s best to slot in an alternative way of doing things for users who aren’t as witty as you’d hope for them to be. Лучше слот в альтернативный способ делать вещи для пользователей, которые не столь остроумный, как нужно надеяться на них быть. Also, Internet Explorer does things somewhat differently (most definitely) from all the other browsers, so it’s pretty essential to work the code to account for the irksome 80% of the population who rely on Explorer. Кроме того, Internet Explorer делает вещи несколько иначе (наверняка) из всех других браузерах, поэтому очень важно работать код к ответственности за надоедливый 80% населения, которые полагаются на Explorer.

Now to the exciting part! Теперь для захватывающих часть! Let’s generate a straightforward application that can accept input from the user, passes it to some PHP on the server that checks it against a database, and returns the result to the browser in use. Давайте создавать простой приложений, которые могут принимать ввод от пользователя, передает его на некоторых PHP на сервере, который проверяет его с базой данных, и возвращает результат в браузере используется. We assimilate it in three parts. Мы ассимилировать ее в трех частях.

First, we need an HTML form. Во-первых, нам необходимо HTML форме. As you’ can see below: Как вы можете видеть ниже:

 <html> 
  <head> 
  <title>Report</title> <title> отчет </ TITLE> 
  <script type='text/javascript' src='xhr.js'></script> </head> <body> <form action="fallbackpage.php" method="post"> <script type='text/javascript' src='xhr.js'> </ SCRIPT> </ HEAD> <body> <form action="fallbackpage.php" method="post"> 
  <p>Welcome, student. <p> Добро пожаловать, студент. Please enter your essay here:<textarea name="essay" id="essay"> Пожалуйста, введите свой очерк здесь: <textarea name="essay" id="essay"> 
  </textarea> <input type="submit" name="submit" value="Submit" onClick="return </ textarea> <= ввода типа "Submit" NAME = "Submit" ценность = "Отправить" onClick = "возвращение 
  grade(this.form.essay.value);"> классам (this.form.essay.value); "> 
  </p> </ P> 
  </form> </ FORM> 
  </body> </ BODY> 
  </html </ HTML 

Note: For users without proper support for our script ( named xhr.js ), the form will just simply submit to the fallback page at fallbackpage.php . Ok, this is where the JavaScript comes in, we’ll take it slow. Примечание: Для пользователей без надлежащей поддержки наших скриптов (наименование xhr.js), форма будет просто представить запасного страницу на fallbackpage.php. Ок, это когда приходит на JavaScript, мы будем считать, медленно.

 function grade(essay) { функция класса (эссе) ( 

The first thing we have to do is initialize the object. Первое, что мы должны делать это инициализировать объект. There are two ways we must do this, for different browsers. Есть два пути мы должны сделать это, для различных браузеров.

 // Mozilla version / / Mozilla версии 
     if (window.XMLHttpRequest) { если (window.XMLHttpRequest) ( 
         xhr = new XMLHttpRequest(); xhr новый XMLHttpRequest = (); 
     } ) 
     // IE version / / IE версии 
     else if (window.ActiveXObject) { остальное, если (window.ActiveXObject) ( 
         xhr = new ActiveXObject("Microsoft.XMLHTTP"); xhr = новый ActiveXObject ( "Microsoft.XMLHTTP"); 
     } ) 

We then escape the user input to make it URL-safe: Мы тогда бежать, вводимого пользователем чтобы сделать его URL-сейф:

     essay=encodeURIComponent(essay); = encodeURIComponent очерк (эссе); 

and use the open method of the object to open a new connection to the PHP script: и использования открытого метода объекта, чтобы открыть новое соединение с PHP скрипт:

     xhr.open("POST","grade.php"); xhr.open ( "POST", "grade.php"); 

The method requires two arguments: first, the HTTP method (GET or POST) ; second, the URL of the script. A quick HTTP header asserts the script for what it’s getting, and then the send method conveys the actual request: Этот метод требует два аргумента: во-первых, метод HTTP (GET или POST), во-вторых, адрес скрипта. Быстрой HTTP заголовок утверждает, что сценарий для его получения, а затем отправить метод передает фактического запроса:

  xhr.setRequestHeader( xhr.setRequestHeader ( 
       'Content-Type', "Content-Type ', 
       'application/x-www-form-urlencoded; charset=UTF-8'); xhr.send(essay); "Применение / X-WWW-форма-urlencoded; = кодировка UTF-8 '); xhr.send (эссе); 

This last step isn’t necessary for GET requests, wherein all the data can be contained in the query string of the URL. Этот последний шаг не является необходимым для GET запросов, в котором все данные могут быть включены в строку запроса в URL.

Obtaining Final Results Получение окончательных результатов

We’re finally ready to see if the HTTP request we made worked. Мы, наконец, готов ли HTTP запроса мы работали. The readyState property counts up from zero during the request, and shows 4 when the server page has been loaded successfully. ReadyState собственности насчитывает деятельность с нуля в течение запроса, а также показано, 4 сервера, когда страница была загружена успешно.

  xhr.onreadystatechange=function() { Xhr.onreadystatechange = функция () ( 
       if (xhr.readyState==4) { если (xhr.readyState == 4) ( 

If indeed the actual request worked, then we can get the output of the server-side script by querying the responseText property, which contains a string. Если фактический запрос работал, то мы можем получить результаты на стороне сервера скрипт, запрашивая responseText собственности, в котором содержится строка. For more of a complex server script output, a responseXML property, which can hold a full document object of XML data, is an option also accessible. Для более сложных сервер скрипт вывода, responseXML собственности, которые могут провести полный документ объекта XML данные, опции также доступны.

      grade = xhr.responseText; Класс = xhr.responseText; 
       alert ("Nice essay. Your grade is " + grade); оповещение ( "Ницца эссе. Ваша оценка является" + класс); 
     } ) 
     return false; возвращение ложным; 
  } ) 

In conclusion, the third component consist of PHP script, which basically lives on the server and waits patiently for the JavaScript to pass it some juicy data so it can thrive. В заключение следует отметить, что третий компонент состоит из PHP скрипт, который в основном проживает на сервере и терпеливо ждет на JavaScript передать ей некоторые данные, сочная с тем чтобы она могла процветать. This example uses some PHP, but any language you like — Ruby, Perl, C, ASP — can address your needs as well. Этот пример использует PHP, но и на любом языке вы хотели - Ruby, Perl, C, ASP - могут решать ваши потребности, как хорошо. The core of this example script is a natural-language function called grade_essay() that grades student essays from 1 to 100, but I will redact that part to conserve space. Суть этого примера сценария является естественным языком функция называется grade_essay (), что классы студенческие эссе от 1 до 100, но я буду redact этой части с целью сохранения пространства.

  <?php <? PHP 
  function grade_essay($essay) { Функция grade_essay ($ эссе) ( 
       return strlen($essay); вернуться strlen ($ эссе); 
  } ) 
  $essay = urldecode(implode(file('php://input'))); $ эссе = urldecode (взрывать (файл ( 'PHP: / / ввод'))); 
  $grade = grade_essay($essay); $ класс = grade_essay ($ эссе); 
  echo $grade; эхо $ классов; 
  ?> 

The php://input grabs the POST data, which gets put into a string, decoded and passed to the clever grading algorithm. PHP: / / ввод хватает POST данные, которые получает введен в строку, декодируются и передаются умный алгоритм сортировки. The algorithm returns a numeric grade. Алгоритм возвращает числовое класса. Lastly, we just output the grade with echo - ordinarily, this would display in the browser, but since the PHP script is running “behind the scenes,” the string output is simply returned to the JavaScript that called it. Наконец, мы просто вывод классов с эхо - обычно, это будет отображаться в браузере, но поскольку PHP скрипт работает "за кулисами", строка выходного просто вернулась к JavaScript, что назвал его. If you need structured data, an XML document would be output with an echo statement in just the same way, but the content-type of the output page basically must be set to text/xml . Если вам нужно структурированных данных, XML документ должен быть выход с эхо заявление только в тот же путь, но содержание-типа вывода страниц в основном должны быть установлены в текст / XML.

What the user sees is this: She/He types their essay into the text area in the browser, clicks Submit, and within instants an alert box pops up giving him/her a final grade on the essay. То, что пользователь видит это так: он их видов в эссе, текст области в браузере, клики Добавить, и в мгновение готовности всплывающее окно дает ему / ей окончательный класс по эссе. Invisibly, the essay has been sent to the server, read and evaluated by a team of PHP elves, and inevitably returned with a grade, without ever having to reload the page. Невидимо, эссе были отправлены на сервер, читать и оценивать команды PHP эльфов, и неизбежно вернулась в класс, без никогда не перезагрузить страницу. The user can modify her essay and resubmit it continuously. Пользователь может изменить ее эссе и повторите это постоянно.

And that’s the general substance of the almost magical XMLHttpRequest object! И это общее содержание почти магический объект XMLHttpRequest! The example is pretty simple and straight forward, but the uses of the object can be highly, multi clever . Примером является довольно простой и прямой вперед, но использование объекта может быть высокой, многолетних умный.

For further inspiration and great examples of ingenious Ajax applications you can momentarily steer away from SimpleHelp.Net and visit Для дальнейшего вдохновения и великих примеров гениального Ajax приложений вы можете направить на мгновение от SimpleHelp.Net и посетить iGoogle iGoogle , , Pageflakes Pageflakes , , Netflix Netflix and и Netvibes Netvibes . .

However, the data and functions that Ajax sends and acts out is simply up to you. Тем не менее, данные и функции, что Ajax отправляет и акты, является просто до вас.