Ничего не говори, просто поддержи Хуавей и все. Дядя Сэм - это слишком. Я верю, что Хуавей выживет.
Сейчас моя очередь!
Ах, Джекс? ? ? Друзья, которые занимаются фронтендом, не могут этого не знать, если вы действительно не знаете этого слова, то я не думаю, что вас можно назвать фронтенд-разработкой 🙄
Этот Jax не то же самое, что Jax. Внешний интерфейс сказал, что Jax - это аббревиатура от Asynchronous javaScript + XML. Ajax в значительной степени ускорил разработку внешнего интерфейса. Говорят, что его появление и использование являются историей интерфейс.
Родился Ajax. Когда взаимодействие между интерфейсом и сервером нарушено, страницу необходимо перезагрузить, то есть обновить всю страницу. Мы можем использовать технологию Ajax, чтобы напрямую сделать запрос без обновления страницы, получить возвращенные данные, а затем манипулировать Домом через js, чтобы изменить содержимое страницы.
Также после появления «Аякса» он внес свой вклад в будущее.Разделение передней и задней части, внешний интерфейс больше не отвечает только за вырезание изображений, а только предоставляет шаблоны для внутренних студентов, а затем данные добавляются внутренними учениками. Отныне наш внешний интерфейс больше не может полагаться на данные набора шаблонов одноклассников внутреннего интерфейса, и мы можем сделать это сами.
Итак, как нам добиться этого сбора данных без обновления, основанного на объекте————XMLHttpRequest
Давай сражаться! Давай сражаться!
Грубо говоря, Ajax — это не новая технология, а решение, похожее на jsonp, основанное наXMLHttpRequestСхема получения back-end данных для объектов, далее посмотрим как это написать (данная статья не предполагает совместимость с некоторыми браузерами типа ie и идет в мейнстрим)
получить запрос
(() => {
// 获取页面上需要发请求的按钮
let btn = document.querySelector('.getAjaxBtn');
// 添加事件
btn.addEventListener('click', createXHR)
// 我们ajax的主体函数
function createXHR() {
// new一个XMLHttpRequest实例
var xhr = new XMLHttpRequest();
// 第一步使用open方法，接收三个参数
// 第一个参数是请求方法名（get，post等）
// 第二个参数是需要请求的接口地址
// 第三个参数是设置请求是否是异步，一般都是都是发送异步请求，同步请求可能会阻塞页面
// 我们先来看同步请求
xhr.open('get', '/api/get', false);
// open方法只是设置参数，并不会发送请求
// 而请求是由send()方法发送的，并且接收一个参数，就是需要发送到服务端的数据
// 如果没有需要发送到服务端的数据，必须传入null，因为有些浏览器不许要这个参数
xhr.send(null)
}
})()
Таким образом, мы привязываем метод для отправки запроса на получение к кнопке. Пока мы нажимаем кнопку, запрос будет отправлен, поэтому давайте посмотрим, каков эффект.
На самом деле это очень просто, да, так что мы действительно отправили запрос на получение, так почему же мы отправляем запрос, конечно, на получение данных, тогда мы видим, что интерфейс вернул строку'恭喜你，你发送了一个get请求，真棒！', то как мы можем получить эти данные, см. ниже
получить данные возврата
Фактически, когда мы получаем ответ от сервера, мы уже получили данные, и данные ответа будут автоматически заполнены в XHR-объект, но когда мы узнаем, что данные были заполнены в XHR-объект? ? На данный момент нам нужно событие, похожее на функцию слушателя————событие readystatechange, z Это событие будет выполнено один раз при изменении состояния готовности. Нам также нужно свойство, которое знает статус отправляемого запроса ------readystate, также есть атрибут кода статуса запроса ——status
Коды состояния 200, 404 и 500. Я не буду здесь вдаваться в подробности, но в основном расскажу о состоянии готовности:
- 0: Не инициализирован. метод open() не был вызван
- 1: Старт. Метод open() был вызван, но метод send() не был вызван
- 2: Отправить. Метод send() был вызван, но ответа не получено
- 3: Получить. были полученычастьСоответствующие данные
- 4: Готово. были полученывсеДанные ответа, и он уже доступен на стороне клиента
Посмотрев на следующее состояние, кажется, что сейчас нам нужно состояние 4. Получив все данные, мы проведем логическую обработку.Вышеприведенный запрос является синхронным запросом.Теперь давайте его изменим.
(() => {
// 获取页面上需要发请求的按钮
let btn = document.querySelector('.getAjaxBtn');
// 添加事件
btn.addEventListener('click', createXHR)
// 我们ajax的主体函数
function createXHR() {
// new一个XMLHttpRequest实例
var xhr = new XMLHttpRequest();
// 第一步使用open方法，接收三个参数
// 第一个参数是请求方法名（get，post等）
// 第二个参数是需要请求的接口地址
// 第三个参数是设置请求是否是异步，一般都是都是发送异步请求，同步请求可能会阻塞页面
// 我们先来看同步请求
xhr.open('get', '/api/get', true);
// 我们为xhr添加一个readyState值改变就执行的监听事件
// 这个事件还必须写在send()方法前面
xhr.onreadystatechange = function () {
// 当readyState值为4就是接收到了全部返回数据，并且http状态码是200多的成功，或者是304的缓存，这时候就判断已经是成功拿到了应该返回的数据
if (xhr.readyState === 4 ) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 ) {
// 输出数据。responseText是作为响应主体被返回的文本
alert(xhr.responseText)
} else {
alert('请求不成功')
}
}
}
// open方法只是设置参数，并不会发送请求
// 而请求是由send()方法发送的，并且接收一个参数，就是需要发送到服务端的数据
// 如果没有需要发送到服务端的数据，必须传入null，因为有些浏览器不许要这个参数
xhr.send(null)
}
})()
Таким образом, мы успешно получаем возвращенные данные и выводим их на экран.Мы можем не только заставить всплывающие данные, но и выполнить более мощную логическую обработку или изменить содержимое страницы.
Конечно, возможно, вам нужно отправить некоторые данные на сервер, когда вы получите запрос, это может быть номер страницы или количество фрагментов данных, необходимых странице, и т. д. В настоящее время нам нужно только указать это в URL-адресе. передается в методе open(), что-то вроде/api/get?pageNum=1&pageSize=20такой адрес.
Сервер, который мы написали, должен вернуть данные в запросе, и мы также можем видеть, что мы также получили возвращенные данные.
отправить запрос
Для почтовых запросов мы должны были связаться с отправкой формы, и данные, передаваемые нашим почтовым запросом, должны быть переданы черезencodeURIComponentПерекодировано, и когда мы получаем объект json, нам нужно его преобразовать
(() => {
let btn = document.querySelector('.getAjaxBtn');
btn.addEventListener('click', createXHR);
// 我们需要转换的数据，真实场景我们应该是传进来的，或者是获取到的用户输入的数据
let data = {
method: 'post',
a: 'a',
b: 123,
}
function createXHR() {
var xhr = new XMLHttpRequest();
xhr.open('post', '/api/post', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 ) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 ) {
alert(xhr.responseText)
} else {
alert('请求不成功')
}
}
}
// 模仿表单提交，设置content-type，我们需要重新设置请求头，让服务端能知道我们传的是个什么数据
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// send()方法需要传入的数据应该经过处理
xhr.send(transformData(data))
}
// 处理传入json对象转换格式
/**
* 例如这个样的json
* {
method: 'post',
a: 'a',
b: 123,
}
*/
// 转换格式为
// method=post&a=a&b=123
// 这样
function transformData(data) {
let newData = [];
for (let key in data) {
newData.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
}
return newData.join('&')
}
})()
Выше приведен почтовый запрос, который мы сделали.Мы видим, что мы отправили данные формы, а затем сервер получил данные, и мы получили данные, которые будут возвращены, то есть данные, которые мы отправили на сервер.
Кто еще!
Конечно, помимо некоторых атрибутов и методов, упомянутых выше, в XHR есть много методов и атрибутов, которые я не представил. Вот несколько наиболее часто используемых.
- XMLHttpRequest.timeout:Это нужно, чтобы установить время ожидания запроса, установить время в миллисекундах, если время запроса превышает установленное время, исключение будет выбрано напрямую.
- XMLHttpRequest.withCredentials:Этот атрибут зависит от того, нужно ли нам отправлять куки, потому что если это междоменный запрос, общий запрос не принесет куки, нам нужно вручную установить этот атрибут
- XMLHttpRequest.abort():Этот метод мы используем для завершения запроса, конечно, когда запрос отправлен и не возвращен
- XMLHttpRequest.setRequestHeader():Это мы использовали только сейчас, это установить заголовок запроса и изменить некоторые настройки, которые нам нужны
Их тоже считайте!
Если мы напишем так, нам покажется это громоздким, а если мы не вдумчивы, то этот метод запроса будет ужасен, скрывая какие-то неизвестные проблемы
Технологии всегда разрабатывались для повышения эффективности или, можно сказать, разрабатывались для ленивых.
Теперь есть хорошие и зрелые библиотеки с открытым исходным кодом, которые инкапсулируют для нас метод запроса ajax, такие как «jQuery of Shang Nengfan» и «Axios», которые сияют модулями фреймворка, их методы использования относительно просты, а также у нас нет решать некоторые логические задачи и граничные проблемы самостоятельно.
jQuery & Axios
Давайте посмотрим, насколько просто реализовать эти два
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Ajax</title>
</head>
<body>
<button class="postAxiosBtn">发送axios post请求</button>
<button class="getAxiosBtn">发送axios get请求</button>
<button class="postJqueryBtn">发送jQuery post请求</button>
<button class="getJqueryBtn">发送jQuery get</button>
<script>
var postAxiosBtn = $('.postAxiosBtn'),
getAxiosBtn = $('.getAxiosBtn'),
postJqueryBtn = $('.postJqueryBtn'),
getJqueryBtn = $('.getJqueryBtn');
postAxiosBtn.click(() => {
axios.post('/api/post', {
data: {
method: 'post',
a: 'a',
b: 123,
}
}).then(res => {
console.log(res)
})
})
getAxiosBtn.click(() => {
axios.get('/api/get', {
params: {
pageNum: 1,
pageSize: 20
}
}).then(res => {
console.log(res)
})
})
postJqueryBtn.click(() => {
$.post('/api/post', {method: 'post', a: 'a', b: 123}, function (data, status) {
console.log(data)
console.log(status)
})
})
getJqueryBtn.click(() => {
$.get('/api/get', {pageNum: 1, pageSize: 20}, function (data, status) {
console.log(data)
console.log(status)
})
})
</script>
</body>
</html>
Пользоваться библиотекой-оболочкой так просто! ! !
Хм, нет никого, кто может драться!
fetch
Я думаю, что все знают api fetch, новый API из js, целью является XMLHttpRequest, но по сравнению с XMLHttpRequest использование fetch очень удобно для пользователя, и оно поставляется с синтаксисом обещания, нам не нужно использовать какой-либо обратный вызов Да, но между fetch и axios, библиотекой, которая инкапсулирует XMLHttpRequest, все еще существует большой разрыв.
Но я верю, что в будущем будет все больше и больше библиотек, инкапсулирующих выборку, хотя сейчас они есть, я чувствую, что люди, которые их используют, не использовали axios до такой степени 😜
Суммировать
Сейчас редко кто использует чисто рукописный нативный Ajax, и будет использована написанная библиотека пакетов.Однако на собеседовании многие столкнутся с рукописным почерком, что является головной болью.
Ответ You Da не является необоснованным, но люди, которые могут говорить или писать на родном Ajax вручную, определенно одержимы просто
Я знаю причину и знаю причину.Чувствую, что писать псевдокод тоже в прошлом.Как минимум нужно понять большую идею.Не беда, если какие-то API не подцепишь.Есть и так много атрибутов и методов в js и css.Если вы их запишете, это должно быть Impossible, но вы все равно можете знать о существовании этой штуки, и это легко проверить, когда вы это проверите, верно?🤠
Я первопроходец войны пятерки, ученик начальной школы в мире фронтенда.