1. Введение в Ajax
Ajax считается аббревиатурой (асинхронного JavaScript и XML), и технология, которая позволяет браузеру общаться с сервером без обновления текущей страницы, называется AJAX.
Например: Поиск Baidu, карта в реальном времени и т. Д. В модели AJAX данные передаются независимо между клиентом и сервером. Сервер может обновить данные без обновления всей страницы;
2. Диаграмма принципа работы AJAX
3. Соответствующие методы отправки и получения AJAX
1. Соответствующий метод отправки запроса
1) Функция обработки событий OneReadyStateChange: эта функция запускается сервером, а не пользователем. Каждый раз, когда будет изменяться свойство готового штата, событие OnreadyStateChange будет вызвано.
2) Открыть (метод, URL, асинхронизированный): open () объекта xmlhttprequest позволяет программе отправлять запросы с сервером вызовов Ajax. Тип запроса метода может быть «Get» или «post», а URL - это строка пути. Sysnchronized указывает, должен ли запрос передаваться асинхронно.
3) Отправить (данные): данные - это строка, которая также будет передана на сервер. Если запрос «GET» выбран, данные являются нулевыми.
2. Получить соответствующий метод
1) ReadyState: представляет текущее состояние AJAX, представленное числовым значением, 0 представляет инициализацию, 1 представляет загрузку, 2 представляет загрузку, 3 представляет сервер, отправляя ответ, 4 представляет ответ, и когда запрос будет завершен, каждый браузер установит значение Queadstate на 4;
2) Статус: Как и в Javaweb, 404 не нашел страницу, 403 запрещает доступ, 500 Ошибка внутреннего сервера, 200 все нормально, 304 не был изменен, в объекте Xmlhttprequest, код состояния, отправленный сервером, сохраняется в атрибуте статуса. Благодаря этому значению мы можем убедиться, что сервер отправил успешный ответ;
3) Ответтекстекс: содержит данные, отправляемые с сервера, который обычно представляет собой HTML, XML или обычный текст. Когда значение reatestate составляет 4, а статус составляет 200, атрибут ответа может использоваться только. На первый взгляд, запрос Ajax закончился. Если сервер возвращает XML, данные будут сохранены в Recasonxml.
4. Демонстрация кода (имитирует поле поиска Baidu)
1. Создайте проект Javaweb (структура каталогов проекта выглядит следующим образом)
2. SearchServlet.java
Пакет Cn.jon.ajax; импортировать java.io.ioexception; импортировать java.util.list; Импорт javax.servlet.servletexception; Импорт javax.servlet.http.httpservlet; Импорт javax.servlet.http.httpservletrequest; Импорт javax.servlet.http.httpservletresponse; Импорт net.sf.json.jsonarray; Импорт cn.jon.ajax.data.datautils; Общественный класс SearchServlet расширяет httpservlet {private static final long long serialversionuid = 1L; Public void Doget (httpservletRequest, httpservletresponse response) бросает ServletException, ioException {// Установить формат вывода запроса и ответ на UTF-8 request.setcharacterencoding («UTF-8»); response.setcharacterencoding ("UTF-8"); String Keyword = request.getParameter ("Keyword"); if (ключевое слово! = null) {dataUtils dataResource = new DataUtils (); List <string> list = dataResource.finddatalist (ключевое слово); //System.out.println (jsonarray.fromobject (list) .toString ()); response.getWriter (). write (jsonarray.fromobject (list) .toString ()); }} public void dopost (httpservletrequest -запрос, httpservletresponse response) throws servletexception, ioexception {Doget (запрос, ответ); }} 3. Datautils.java, прочтите данные в файле ресурса
Пакет cn.jon.ajax.data; Импорт java.io.bufferedReader; импортировать java.io.ioexception; импортировать java.io.inputstream; Импорт java.io.inputStreamReader; импортировать java.util.arraylist; импортировать java.util.list; public Class DataUtils {Private Static List <string> datalist = new ArrayList <string> (); public Static Final String url = "/test.txt"; static {readresource (url); // datalist.add ("aa"); // datalist.add ("ajax"); // datalist.add ("final"); // datalist.add ("bb"); } // public static void readresource (string url) {inputStream Is = null; InputStreamReader ISR = NULL; BufferedReader Br = null; String line = null; try {is = datautils.class.getClassloader (). getResourCeasStream (url); isr = new InputStreamReader (IS); br = new BufferedReader (ISR); line = br.readline (); while (null! = line) {if (! line.isempty ()) {datalist.add (line); } line = br.readline (); } // while} catch (ioException e) {e.printstacktrace (); } наконец {if (null! = br) {try {br.close (); } catch (ioException e) {}} if (null! = isr) {try {isr.close (); } catch (ioException e) {}} if (null! = is) {try {as.close (); } catch (ioException e) {}}}} public list <string> findDatalist (string str) {list <string> data = new ArrayList <string> (); for (string sdata: datalist) {if (sdata.contains (str)) {data.add (sdata); }} // для данных возврата; }} 4. index.jsp, дисплей страницы
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <head> <link rel="stylesheet" href="css/my.css"> <script type="text/javascript" src="js/my.js"> </script> </head> <body> <div id = "mydiv"> <img src = "img/baidu.png"> <!-box ввода-> <input type = "text" size = "50" id = "Keyword" Onkeyup = "getMoreContents ()" onBlur = "KeywordBlur ()" onfocus = "getMoreContents ()"/> <Input ud = "type"/"type"/"infocus =" getMoreContents () "/> <input ID =" "/" "/" <!-- The following is the content display area--> <div id="popDiv"> <table id="content-table" bgcolor="#FFFAFA" cellpacing="0" cellpadding="0"> <tbody id="content_table_body"> <!-- The data that is dynamically queried is displayed here--> </tbody> </table> </div> </body> </html>
5. my.js, основная часть Ajax
var xmlhttp; // 1. Функция функции, чтобы получить связанную информацию функции пользовательского ввода функции getMoreContents () {// сначала получить пользовательский входной контент = document.getElementById ("Keyword"); if (content.value == "") {// Когда входное окно пустое, очистить предыдущие данные clearContent (); возвращаться; } //alert(content.value); // 2. Затем вы хотите отправить пользовательский входной контент на сервер, потому что мы используем Ajax для отправки данных асинхронно, поэтому нам нужно использовать xmlhttp object // xmlhttp = get xmlhttp object; xmlhttp = createxmlhttp (); // alert (xmlhttp); // 3. Чтобы отправить данные на сервер, сначала определите адрес сервера, var url = "search? Keyword ="+Escape (content.value); // true означает, что скрипт JavaScript будет продолжать выполняться после метода Send (), не ожидая ответа с сервера. xmlhttp.open ("Get", url, true); // xmlhttp связывает метод обратного вызова. Этот метод обратного вызовов будет вызван при изменении состояния xmlhttp // xmlhttp Состояние: 0-4, мы заботимся только о 4 (завершении), поэтому важно только вызвать функцию обратного вызова после завершения. xmlhttp.onreadystateChange = обратный вызов; // Параметры уже находятся в URL, поэтому вам не нужно добавлять параметр xmlhttp.send (null); } // Получить xmlhttp объект функции createxmlhttp () {// var xmlhttp, который подходит для большинства браузеров; if (window.xmlhttprequest) {xmlhttp = new xmlhttprequest (); } // Рассмотрим совместимость с браузером if (window.activexobject) {xmlhttp = new activexobject ("microsoft.xmlhttp"); // Если у браузера есть объект ActiveXObject, но не имеет параметра microsoft.xmlhttp if (! Xmlhttp) {xmlhttp = new ActiveXobject ("msxml2.xmlhttp"); }} return xmlhttp; } // Функция функции обратного вызова callback () {// 4 означает завершение if (xmlhttp.readystate == 4) {// 200 означает успешный ответ сервера, 404 означает не найдено, 500 означает внутреннюю ошибку сервера, если (xmlhttp.status == 200) {// взаимодействие успешно, и соответствующие данные получены, что находится в формате текста. var result = xmlhttp.responsetext; // анализ полученных данных var json = eval ("("+result+")"); // После получения этих данных вы можете отобразить данные динамически. Отобразите эти данные под окном ввода. // предупреждение (JSON); SetContent (json); }}} // Установите отображение связанных данных. Параметры представляют связанную функцию данных setContent (contents) {// очистить предыдущие данные clearContent (); // Установить позицию setlocaltion (); // сначала получить длину связанных данных, чтобы определить, сколько <tr> </tr> var size = contents.length; // Установить содержимое для (var i = 0; i <size; i ++) {var nextnode = contents [i]; // Представляет элемент i-th json data var tr = document.createElement ("tr"); var td = document.createElement ("td"); td.setattribute ("Borde", "0"); td.setattribute ("gbcolor", "#fffafa"); // Свяжите два стиля для TD (события, когда мышь входит и выходит в сторону) td.onmouseover = function () {this.classname = 'mouseover'; }; td.onmouseout = function () {this.classname = 'mouseout'; }; td.onclick = function () {// Этот метод реализует, что, когда связанные данные нажимают на мышью, связанные данные автоматически заполняются в поле ввода. }; td.onmouseDown = function () {// Когда мышь нажимает на связанные данные, данные будут автоматически добавлены в поле ввода Document.getElementById ("Ключевое слово"). value = this.InnerText; }; // Когда мышь приостановлена на связанных данных, она будет автоматически добавлена в поле ввода/* td.onmouseover = function () {this.classname = 'mouseover'; if (td.innertext! = null) document.getElementById ("Ключевое слово"). value = this.InnerText; } */// Создать текстовый узел var text = document.createtextnode (nextnode); Td.appendChild (текст); Tr.AppendChild (TD); document.getElementById ("content_table_body"). AppendChild (tr); }} // очистить предыдущую функцию данных clearContent () {var contentatablebody = document.getElementById ("content_table_body"); var size = contentatablebody.childnodes.length; // При удалении удалите снизу вверх для (var i = size-1; i> = 0; i-) {// указать удаление I-Th Kid Node ConttableTableBody.RemoveChild (ContactTableBody.ChildNodes [i]); } // Очистить внешнюю границу связанных данных var popdiv = document.getElementbyId ("popdiv"). Style.border = "none"; } // Когда поле ввода теряет фокус, очистите предыдущую функцию данных KeywordBlur () {clearContent (); } // Установить положение отображения соответствующей информации function setlocaltion () {// Положение отображения связанной информации должна соответствовать использованию блока ввода var content = document.getelementbyid ("Keyword"); var width = content.offsetwidth; // Длина входного окна var left = content ["offsetleft"]; // расстояние до левой границы var top = content ["offsettop"]+content.offsetheight; // Расстояние до вершины (плюс высота самой входной коробки) // Получите Dift Data Data PopDiv = Document.GeteLementementById (");"); popdiv.style.border = "Серый 1px solid"; popdiv.style.left = Left+"px"; popdiv.style.top = top+"px"; popdiv.style.width = width+"px"; popdiv.style.top = top+"px"; popdiv.style.width = width+"px"; document.getElementById ("Content-Table"). Style.Width = Width+"px"; } 6. my.css, стиль управления
#mydiv {позиция: абсолют; Слева: 50%; Верх: 50%; Мяглевая маржа: -200px; маржинальная версия: -120px; } #button {founal-color: #5566ee; } .mouseover {founale: #708090; Цвет: #fffafa; } .mouseout {founale: #fffafa; Цвет: #000000; }Примечание: этот код поступает из изучения MOOC.com и сам сделал улучшения. Я надеюсь, что те, кто заинтересован, могут общаться и учиться вместе.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.