Ajax является аббревиатурой асинхронного JavaScript и XML, и является механизмом обновления определенной части страницы. Это дает вам возможность обновлять часть страницы после того, как вы получите данные с сервера, избегая обновления всей страницы. Кроме того, реализация обновлений локальной страницы таким образом может не только эффективно создать плавное пользовательское впечатление, но и уменьшить нагрузку на сервер.
Вот анализ основного запроса AJAX:
var xhr = new xmlhttprequest (); xhr.open ('get', 'send-ajax-data.php'); xhr.send (null);Здесь мы создаем экземпляр класса, который может сделать HTTP -запросы на сервер. Затем называется его открытый метод, где первый параметр является методом HTTP -запроса, а второй параметр - URL -адрес страницы запроса. Наконец, мы называем метод отправки с параметром NULL. Если вы используете метод запроса post (мы используем здесь), параметры метода отправки должны содержать любые данные, которые вы хотите отправить.
Вот как мы обрабатываем ответ сервера:
xhr.onreadystateChange = function () {var dod = 4; // readystate 4 означает, что запрос был отправлен на сервер var ok = 200; // Статус 200 означает, что сервер успешно возвращается, если (xhr.readystate === DED) {if (xhr.status === ok) {console.log (xhr.responsetext); // это возвращаемый текст} else {console.log ("error:"+ xhr.status); // произошла ошибка в этом запросе}}}OnreadyStateChange асинхронно, так что это означает, что он будет вызван в любое время. Этот тип функции называется функцией обратного вызова - как только некоторая обработка завершена, она называется. В этом случае эта обработка происходит на сервере.
Пример
Удобный метод Ajax также является причиной, по которой многие люди полагаются на jQuery, но на самом деле API AJAX нативного JavaScript также очень мощный, и основное использование в каждом браузере не сильно отличается. Поэтому вы можете полностью инкапсулировать объект Ajax самостоятельно. Ниже приведено инкапсулированный объект Ajax:
// метод ajax // lazy load create xhr функция функции createxhr () {if ('xmlhttprequest' в window) {createxhr = function () {return new xmlhttprequest (); }; } else if ('activexObject' в Window) {createxhr = function () {return new activexObject ("msxml2.xmlhttp"); }; } else {createxhr = function () {Throw New Error ("Ajax не поддерживается этим браузером"); }; } return createxhr (); } // ajax выполняет запрос функции (ajaxdata) {var xhr = createxhr (); ajaxdata.before && ajaxdata.fefore (); // Обработка асинхронных запросов через события xhr.onreadystatechange = function () {if (xhr.readystate == 4) {if (xhr.status == 200) {if (ajaxdata.datatype == 'json') {// Получить объект json, возвращаемый сервером jsonstrastr.r. json1 = eval ('(' + jsonstr + ')'), json2 = (new Function ('return' + jsonstr)) (); ajaxdata.callback (json2); // ajaxdata.callback (json.parse (xhr.responsetext)); // нативный метод, не поддерживаемый в IE6/7} else ajaxdata.callback (xhr.responsetext); } else {ajaxdata.error && ajaxdata.error (xhr.responsetext); }}}; // Установить параметры запроса xhr.open (ajaxdata.type, ajaxdata.url); if (ajaxdata.nocache == true) xhr.setrequestheader ('if-modified-since', '0'); if (ajaxdata.data) {xhr.setrequestheader ('content-type', 'application/xwww-form-urlencoded'); xhr.send (ajaxdata.data); } еще {? ? xhr.setrequestheader ('x-requested-with', 'xmlhttprequest'); xhr.send (null); } return xhr;} функциональный post (ajaxdata) {ajaxdata.type = 'post'; var _result = request (ajaxdata); return _result;} function get (ajaxdata) {ajaxdata.type = 'get'; ajaxdata.data = null; var _result = request (ajaxdata); вернуть _result;}Вот пример использования:
index.html
<! Doctype html> <html lang = "zh-cn"> <Head> <meta charset = "UTF-8"> <Title> реализация Native JavaScript Ajax </title> <link rel = "stylesheet" type = "text/css" media = "all" href = "./ common. font-family: 'lucida grande', 'microsoft yahei'} #content .btn_ctr {display: block; Ширина: 120px; Высота: 30px; Полевая: 0 Auto 20px; Фон: #53A7BB; Цвет: #fff; шрифт-вес: жирный шрифт; размер шрифта: 14px; высота линии: 30px; Текстовое декорация: нет; граница-радий: 4px; } #test {width: 280px; Высота: 130px; Поле: 0 Авто; Заполнение: 15px; Фон: #fff; граница-радий: 4px; Текст-альбом: слева; } </style> </head> <body> <div id = "header"> <div id = "header-content"> <div id = "header-inside"> <p> <a href = "http://kayosite.com/css3-animation.html" Target = "_ Black Back to Aptice </a> </P> href = "http://kayosite.com" target = "_ blank"> мой блог </a> </p> <p> demo by kayo © Copyright 2011-2013 </p> </div> <h1> css3 анимация </h1> </div> </div> <div id = "> <a href =" Javascript :; onclick = "get ({url: './ajax.html', callback: function (out) {document.getElementById ('test'). innerHtml = out;}})"> ajax Get Content </a> <div id = "test"> </div> </div> <crecipt> // ajax, а не спис. Здесь </script> </body> </html> ajax.html<! Doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> ajax </title> </head> <body> <p> Успешно получил этот текст </p> </body> </html>
Для конкретных эффектов вы можете просмотреть полную демонстрацию.