Что именно происходит, когда мы используем ajax

Question

Я не понимаю, что именно происходит, когда мы используем ajax.Page не обновляется каждый раз, значит что? связан ли это с методом page_load или с тем, что

Answer 1

Ваш проводник подключается к серверу и извлекает данные. Если соединение поддерживается вживую, он использует живой.

Answer 2

Браузер выполняет http-звонки в фоновом потоке, и вы используете javascript для изменения DOM при возврате результата. Это не позволяет вам обновлять всю страницу и может по желанию изменять детали.

Для получения дополнительной информации ознакомьтесь с определением на wikipedia.

Если вы делаете ajax в asp.net-приложении, страница page_load вызывается для запрашиваемой вами страницы, как обычный вызов. Это рендеринг в браузере, который отличается. ¨ Ключевые понятия: фоновые звонки и скрипты.

Answer 3

Использование JavaScript позволяет совершать звонки на веб-страницы. Кроме того, используя JavaScript, можно заменить содержимое страницы чем-то новым (манипулируя DOM).

Итак, Ajax (асинхронный JavaScript) - это процесс объединения этих двух методов. Вы посещаете какую-то страницу (как правило, на своем собственном сервере), получаете ее результаты, затем берете эти данные и делаете что-то с ней (иногда меняйте страницу).

Это основная идея.

Answer 4

Ajax - это простой код Javascript. , и страница не обновляется сама по себе, вам нужно ее обновить - если вы считаете, что это необходимо (мы обычно основываем ее на результатах вашего сервера после того, как запрос вернулся).

Да, он открывает фоновое соединение из вашего браузера на страницу ASP. и когда вы закончите - вы можете обновить только один объект DOM на своей странице.

Для чего это? Почему мы используем это ? посмотрите на facebook, например, когда вы отклоняете уведомление, игнорируете, одобряете, комментируете свое мнение вашего друга - вы не обновляете страницу - вы (как разработчик) можете изменять свойства клиента (в БД для ex) с/out, давая ему знать.

плюс, вы можете сделать все вышеперечисленное, просто обновив страницу (что очень раздражает клиента), и вам всегда нужно возиться со всеми аргументами, которые необходимо передать каждому новому документу.

Путь ajax позволяет вам сделать одно действие, не перемещаясь никуда. это очень удобно, как разработчик, чтобы использовать его, и клиент наслаждался им больше.

и есть JS-рамки, которые делают его очень простым. , например: (этот пример является примером JQuery ..)

function call_my_page() { 
    $.post("/get_list.asp", { 
     param1: "a", 
     param2: "b" 
    }, function (server_response) { 
     alert(server_response); 

     if (server_response == 1) {  window.location.refresh;  } 
    } 
} 

call_my_page(); 

get_list.php - это файл на сервере, который будет размещен ($ .post)

param1, param2 - это vars, которые вы передаете на свой сервер.

, и если файл страницы сервера вернет ответ «1» , тогда - ваша страница будет обновлена.(или только DIV/SPAN/TABLE будет заменен новым HTML)

jQuery. является лучшим.

Answer 5

Перейти к любому SO post с более чем несколькими комментариями, и вы увидите ссылку, которая говорит что-то вроде , еще 99 комментариев ниже этого. Теперь, если вы нажмете на него, вы увидите, что указанные 99 комментариев загружаются за секунду или две, а оставшаяся страница остается без изменений. Это происходит из-за того, что страница не обновляется. Это потребовало бы более длительного обновления страницы, поскольку это означало бы перезагрузку всего содержимого html.

Вместо повторной отправки всей страницы html (включая другие сообщения в том же потоке) сервер отправляет только запрошенные данные (только эти 99 комментариев в нашем примере).

Возможности огромны. Сервер может возвращать любые данные - html или текст или xml или json или что угодно. Вы можете отображать полученные данные с помощью javascript.

Код на стороне сервера обрабатывает запрос AJAX так же, как он обрабатывает обычный HTTP-запрос (вы можете переопределить это, используя заголовок HTTP_X_REQUESTED_WITH).

Answer 6

Чтобы объяснить AJAX, вам нужно понять способ, отличный от AJAX, и увидеть разницу, поэтому я приведу тот же пример в обычном почтовом режиме и пути AJAX.

В сценарии у вас есть список номеров телефонов, в которые вы хотите добавить любое количество телефонных номеров для клиента, каждая запись имеет два поля, тип и номер. Тип - это описание, например. Мобильная домашняя работа.

Традиционная

Пользователь просмотреть список телефонных номеров, с последним из которых является пустым и редактирования. Они хотят добавить еще один номер телефона, чтобы заполнить пустые поля и нажать кнопку «Добавить». Форма отправляется, поэтому данные переносятся в сообщение http и отправляются на сервер, код сервера добавляет запись телефона в базу данных и начинает конструировать html для новой страницы, поэтому он начинается с htm, head, весь скрипт включает в себя, а затем таблицу с данными, включая новую строку с новым номером телефона и еще одно пустое поле.

Запрос

POST /addPhoneNumberForm Http 1.1 
HOST:www.host.com 
USER-AGENT:... 
... 
newPhoneType=Home&newPhoneNumber=00649123456 

Response

<DOCTYPE ....> 
<html> 
    <head> 
     <title="..."> 
     <link type="text/css" href="standard.css" /> 
     <script type="text/javascript" src="jQuery1.4.js"></script> 
     ... 
    </head> 
    <body> 
     <div id="headerAndNav"> 
     .... 
     </div> 
     <div id="content"> 
      .... 
      <table id="addPhoneRecords" class="dataentry"> 
       <tr><th>Description</th><th>Number</th></tr> 
       <tr><td>Mobile</td><td>0044987654331</td></tr> 
       <tr><td>Work</td><td>0044987654332</td></tr> 
       <tr><td>Holiday</td><td>0044987654333</td></tr> 
       <!-- Newly Added --> 
       <tr><td>Home</td><td>00649123456</td></tr> 
       <tr><td><input type=text .../></td><td><input type=text .../></td></tr> 
      </table> 
      .... 
     </div> 
     <div id="footer"> 
     ... 
     </div> 
    </body> 
</html> 

После того, как браузер пользователей получает этот ответ он отбрасывает все, пользователь может увидеть это заменяет с белым, пустым экраном. И начните синтаксический анализ html, полученный как совершенно новая страница. Любые файлы изображений/Css/Javascript должны быть повторно отображены (или, по крайней мере, проверить, действительно ли кеш). Любые файлы javascript должны быть запущены, и все сопровождающие события DOM должны записываться (document.onLoad и т. Д.).

Так что произошло, пользователь предоставил данные, и сервер ответил совершенно новой страницей. Было затрачено столько времени на сетевую активность, время и циклы процессора как на сервере, так и на клиенте, поскольку они должны были генерировать, и проанализировать полную страницу html.

на основе AJAX Путь

Пользователь просмотреть список телефонных номеров, с последним из которых является пустым и редактирования. Они хотят добавить еще один номер телефона, чтобы заполнить пустые поля и нажать кнопку «Добавить». Этот бит был тем же, что и традиционный, отныне он становится другим. Когда пользователь нажимает кнопку вместо формы, отправляющей кусок javascript, собирает информацию, полученную из формы, и делает запрос AJAX серверу с помощью XMLHttpRequest, это отправляет запрос, похожий на сообщение формы, но результат будет возвращен как строка javascript не как веб-страница.

Запрос

POST /addPhoneNumberAJAX Http 1.1 
HOST:www.host.com 
USER-AGENT:... 
... 
newPhoneType=Home&newPhoneNumber=00649123456&ajax=true&type=json 

Есть большое количество вариантов того, что сервер может вернуть я выбрал один пример Response

{phoneType:"home",phoneNumber:"00649123456"}; 

Это в формате JavaScript Object Notation (JSON) и представляет объект с двумя типами phoneType и numberNumber. Как только это будет получено, JavaScript используется для динамического добавления новой строки в существующую таблицу. Javascript будет выглядеть примерно так.

addPhoneViaAjax(type, number, reqObj, xmlhttp){ 
    // Construct url and declare parameters for our request 
    xmlhttp.open("POST","addPhoneNumberAJAX?newPhoneType="+type ...,false); 
    // Send the request and wait for the response 
    xmlhttp.send(null); 
    // For example assume response successful 
    // Get the response as text 
    var responseStr = xmlhttp.responseText; 
    // Convert the response to object, preferably using one of the JSON parsing libaries 
    var responseObj = eval(responseStr); // Please use one of the JSON parsing libaries look at Jquery.forms plugin 
    // Use jquery javascript libary to update the table in place. 
    // by finding the last row of the table and instering html before it. 
    jQuery("table#addPhoneRecords tr:last-child").before(
     "<tr><td>" + responseObj.phoneType + 
     "</td><td>" + responseObj.phoneNumber + 
     "</td></tr>"); 
} 

Резюме Так с традиционным методом браузер считает отклик в целом новая страница и должен сделать все необходимое, чтобы сделать новую страницу. При использовании подхода ajax браузер остается на одной странице, и вы используете javascript для изменения одного очень маленького фрагмента страницы.