Недавно я включил много операций Ajax, и я должен делать то, что я должен делать на заднем плане. Функция AJAX, которую я использую сейчас, инкапсулируется фоновым персоналом - но она основана на jQuery Ajax, поэтому она будет бесполезно без jQuery. И я думаю, что метод jQuery Ajax очень полный и может использоваться напрямую. Если есть jQuery, то его Ajax не будет использоваться напрасно. Чего мне не хватает, так это метод AJAX, который можно использовать без jQuery.
Таким образом, я также потратил день, написав один, параметры и метод призыя похожи на AJAX JQUERY. Это называется XHR, потому что xhr = xmlhttprequest.
Кода -копия выглядит следующим образом:
/*
* Имя: XHR, Функция инкапсуляции AJAX
* Описание: класс инкапсуляции вызовов Javax, подражая методу вызова jQuery Ajax
* Автор: десять лет света
*/
var xhr = function () {
вар
ajax = function () {
return ('xmlhttprequest' в окне)? function () {
вернуть новый xmlhttprequest ();
}: function () {
вернуть новый ActiveXObject ("microsoft.xmlhttp");
}
} (),
formatdata = function (fd) {
var res = '';
для (var f in fd) {
res+= f+'='+fd [f]+'&';
}
return res.slice (0, -1);
},
Ajax = function (ops) {
вар
root = это,
req = ajax ();
root.url = ops.url;
root.type = ops.type || 'responseText';
root.method = ops.method || 'ПОЛУЧАТЬ';
root.async = ops.async || истинный;
root.data = ops.data || {};
root.complete = ops.complete || function () {};
root.success = ops.success || function () {};
root.error = ops.error || function (s) {alert (root.url+'-> status:'+s+'error!')};
root.abort = req.abort;
root.setData = function (data) {
для (var d в данных) {
root.data [d] = data [d];
}
}
root.send = function () {
var dataString = formatdata (root.data),
SendString, get = false,
async = root.async,
ulep = root.complete,
метод = root.method,
type = root.type;
if (method === 'Get') {
root.url+= '?'+datastring;
get = true;
}
req.open (метод, root.url, async);
if (! get) {
req.setrequestheader ("контент-тип", "Application/xww-form-urlencoded");
sendString = dataString;
}
// Сбросить метод onreadystateChange Перед отправкой, в противном случае появится новый запрос на синхронизацию, и будет выполнено два успешных обратных вызовов (Chrome и т. Д. Также будет выполняться OnreadyStateChange при синхронизации запроса)
req.onreadystatechange = async? function () {
// console.log ('async true');
if (req.readystate == 4) {
полный();
if (req.status == 200) {
root.success (req [type]);
} еще {
root.error (req.status);
}
}
} : нулевой;
req.send (sendstring);
if (! async) {
//console.log('async false ');
полный();
root.success (req [type]);
}
}
root.url && root.send ();
};
return function (ops) {return new ajax (ops);}
} ();
Описание параметра:
1.URL: адрес запроса. Вы не можете заполнить его, и запрос не будет инициирован. Но если вы не заполняете это и не заставите его отправлять, я не буду винить вас за ошибки.
2.method: «получить» или «пост», все капитализированные, по умолчанию
3. Даты: данные, которые нужно отправлять, являются объектом
4. Async: асинхронно, правда по умолчанию
5.type: возвращаемый тип данных - это только responsextext или responsexml, а responsetext по умолчанию.
6.complete: функции выполняются после завершения запроса
7.success: функции, выполняемые при успешном запросе
8.error: функция выполняется при сбое запроса
ПРИМЕЧАНИЕ. Параметры типа не так богаты, как DataType от JQUERY, только ответ ExplyText или RecsionXML в Native Ajax. Если данные JSON возвращаются, вам нужно обрабатывать их самостоятельно в функции успеха, чтобы преобразовать текст в JSON.
Описание функции:
Есть две функции для использования для создания объекта XHR. Один отправлен. Метод вызова: xhr.send (), без параметров. Его функция заключается в том, чтобы инициировать процесс запроса. Если во время инициализации нет URL -адреса, метод отправки не будет выполнен, поэтому вы можете добавить URL позже и инициировать отправку вручную - если во время отправки нет URL -адреса, запрос не удастся, и я не обработал эту ошибку. Только вы можете найти ошибку самостоятельно.
Другим методом является установленное, метод вызова является xhr.setData (data_obj), а его параметр является объектом. Функция метода SetData заключается в частичной замене значения в атрибуте данных XHR.Data. Например, уже есть страница: 1 в xhr.data. Вы можете использовать XHR.SetData ({Page: 2}), чтобы обновить его значение, не влияя на другие значения атрибутов, которые уже существуют в данных.
Метод вызова:
Кода -копия выглядит следующим образом:
var a1 = xhr ({
URL: '2.php',
данные:{
«Имя пользователя»: 'lix',
«пароль»: '123456',
«Пол»: «Мужчина»,
'Interset': 'Play'
},
асинхрон: ложь,
Метод: 'Get',
Успех: function (data) {
var obj = json.parse (data);
// ...
}
});
Примечание: не нужно писать новый
Показанное введение:
После этого периода опыта проекта я обнаружил, что класс Ajax должен иметь очень распространенную функцию: удобно неоднократно инициировать запросы. Например, когда я пишу страницу Ajax в проекте, я должен отправлять запрос каждый раз, когда я переключаю страницу, но отправленные данные не будут изменяться, за исключением текущего номера страницы и номера каждой страницы. Если вам приходится неоднократно определять эти неизменные параметры, это, несомненно, пустая трата ресурсов.
Таким образом, эта функция XHR уже рассмотрела эту функцию. Возьмите пример страниц. Мы можем инициализировать объект XHR, когда страница загружена, и сохранить его как переменную A1. Когда инициируется запрос на поворот страницы, никакие другие параметры не изменились, но паджник изменился. В настоящее время мы можем вызвать метод SetData XHR, чтобы изменить PageNumber.
Кода -копия выглядит следующим образом:
a1.setdata ({pageNumber: 2});
Примечание. Параметр SetData также является объектом.
Конечно, вы также можете полностью заменить данные:
a1.data = {…};
Не только данные, вы можете внести больше изменений в создательный объект XHR A1, такие как изменение URL -адреса, изменение функции успеха, изменение проведения до поста и изменение синхронного на асинхронное ... после изменения, вызовите метод a1.send (), и он снова инициирует запрос в соответствии с вашими параметрами.
Конечно, если это еще один запрос Ajax, который полностью не связан, нет необходимости заставить этого готового A1. Мы можем создать экземпляр другого XHR под названием A2 или что -то в этом роде.
Если вы не удовлетворены именем XHR, вы можете изменить его только самостоятельно.
Кроме того, он обеспечивает сжатую зашифрованную версию. Несоцененная версия удаляет комментарии о 2 КБ, а сжатая версия составляет 1,00 КБ.
Кода -копия выглядит следующим образом:
var xhr = function () {var e = function () {return "xmlhttprequest" в window? function () {return new xmlhttprequest}: function () {return new activexobject ("microsoft.xmlhttp")}} (), t = funt e) {t+= n+"="+e [n]+"&"} return t.slice (0, -1)}, n = function (n) {var r = this, i = e (); r.url = n.url; r.type = n.type || "responsetext"; r.method = n.method || "get"; r.async = n.async || true; r.data = n.data || {}; r.complete = n.complete || functio n () {}; r.success = n.success || function () {}; r.error = n.error || function (e) {alert (r.url+"-> status:"+e+"ошибка!")}; r.Abort = i.Abort; r.setData = function (e) {for (var t в e) {r.data [t] = e [t]}}; r.send = function () {var e = t (r.data), n, s = false, o = r.async, u = r.complete, a = r.method, f = r.type; if (a === "get") {r.url+= "?"+e; s = tr ue} i.open (a, r.url, o); if (! s) {i.setrequestheader ("content-type", "Application/xww-form-urlencoded "); n = e} i.onreadystateChange = o? function () {if (i.ReadyState == 4) {u (); if (i.Status == 200) {r.Success (i [f ])} else {r.error (i.status)}}}: null; i.send (n); if (! o) {u (); r.success (i [f])}}; r.url && r.send ()}; return function (e) {return new n (e)}} ()
В XHR должна быть некоторая неполнота. Если вы найдете его во время использования в будущем, я исправим его вовремя. Если вы не довольны этим или обнаружите его недостаточным, пожалуйста, дайте предложения для улучшения.