Tìm nạp trả về trong PHP là gì?

Có một thuật ngữ ô “AJAX” (viết tắt là JavaScript và XML không đồng bộ) cho các yêu cầu mạng từ JavaScript. Mặc dù vậy, chúng tôi không phải sử dụng XML. thuật ngữ này xuất phát từ thời xa xưa, đó là lý do tại sao từ đó có. Bạn có thể đã nghe thuật ngữ đó rồi

Có nhiều cách để gửi yêu cầu mạng và nhận thông tin từ máy chủ

Phương pháp

let response = await fetch(url);

if (response.ok) { // if HTTP-status is 200-299
  // get the response body (the method explained below)
  let json = await response.json();
} else {
  alert("HTTP-Error: " + response.status);
}

Cú pháp cơ bản là

let promise = fetch(url, [options])

• let response = await fetch(url);
  
  if (response.ok) { // if HTTP-status is 200-299
    // get the response body (the method explained below)
    let json = await response.json();
  } else {
    alert("HTTP-Error: " + response.status);
  }

  5 – URL để truy cập

• let response = await fetch(url);
  
  if (response.ok) { // if HTTP-status is 200-299
    // get the response body (the method explained below)
    let json = await response.json();
  } else {
    alert("HTTP-Error: " + response.status);
  }

  6 – tham số tùy chọn. phương thức, tiêu đề, v.v.

Không có

let response = await fetch(url);

if (response.ok) { // if HTTP-status is 200-299
  // get the response body (the method explained below)
  let json = await response.json();
} else {
  alert("HTTP-Error: " + response.status);
}

let response = await fetch(url);

if (response.ok) { // if HTTP-status is 200-299
  // get the response body (the method explained below)
  let json = await response.json();
} else {
  alert("HTTP-Error: " + response.status);
}

Trình duyệt bắt đầu yêu cầu ngay lập tức và trả về lời hứa rằng mã gọi sẽ sử dụng để nhận kết quả

Nhận phản hồi thường là một quá trình gồm hai giai đoạn

Đầu tiên,

let response = await fetch(url);

if (response.ok) { // if HTTP-status is 200-299
  // get the response body (the method explained below)
  let json = await response.json();
} else {
  alert("HTTP-Error: " + response.status);
}

let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch(url);

let commits = await response.json(); // read response body and parse as JSON

alert(commits[0].author.login);

Ở giai đoạn này, chúng ta có thể kiểm tra trạng thái HTTP, để xem nó có thành công hay không, hãy kiểm tra các tiêu đề, nhưng chưa có phần thân

Lời hứa từ chối nếu

let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch(url);

let commits = await response.json(); // read response body and parse as JSON

alert(commits[0].author.login);

Chúng ta có thể thấy trạng thái HTTP trong thuộc tính phản hồi

• let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
  let response = await fetch(url);
  
  let commits = await response.json(); // read response body and parse as JSON
  
  alert(commits[0].author.login);

  2 – Mã trạng thái HTTP, e. g. 200

• let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
  let response = await fetch(url);
  
  let commits = await response.json(); // read response body and parse as JSON
  
  alert(commits[0].author.login);

  3 – boolean,

  let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
  let response = await fetch(url);
  
  let commits = await response.json(); // read response body and parse as JSON
  
  alert(commits[0].author.login);

  4 nếu mã trạng thái HTTP là 200-299

Ví dụ

let response = await fetch(url);

if (response.ok) { // if HTTP-status is 200-299
  // get the response body (the method explained below)
  let json = await response.json();
} else {
  alert("HTTP-Error: " + response.status);
}

Thứ hai, để lấy nội dung phản hồi, chúng ta cần sử dụng một lệnh gọi phương thức bổ sung

let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch(url);

let commits = await response.json(); // read response body and parse as JSON

alert(commits[0].author.login);

• let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
  let response = await fetch(url);
  
  let commits = await response.json(); // read response body and parse as JSON
  
  alert(commits[0].author.login);

  6 – đọc phản hồi và gửi lại dưới dạng văn bản,

• let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
  let response = await fetch(url);
  
  let commits = await response.json(); // read response body and parse as JSON
  
  alert(commits[0].author.login);

  7 – phân tích phản hồi dưới dạng JSON,

• let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
  let response = await fetch(url);
  
  let commits = await response.json(); // read response body and parse as JSON
  
  alert(commits[0].author.login);

  8 – trả lại phản hồi dưới dạng đối tượng

  let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
  let response = await fetch(url);
  
  let commits = await response.json(); // read response body and parse as JSON
  
  alert(commits[0].author.login);

  9 (được giải thích trong chương tiếp theo),

• fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
    .then(response => response.json())
    .then(commits => alert(commits[0].author.login));

  0 – trả về phản hồi dưới dạng Blob (dữ liệu nhị phân có loại),

• fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
    .then(response => response.json())
    .then(commits => alert(commits[0].author.login));

  1 – trả về phản hồi dưới dạng ArrayBuffer (biểu diễn dữ liệu nhị phân ở mức độ thấp),
• Ngoài ra,

  fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
    .then(response => response.json())
    .then(commits => alert(commits[0].author.login));

  2 là một đối tượng, nó cho phép bạn đọc từng đoạn của phần thân, chúng ta sẽ xem một ví dụ sau

Chẳng hạn, hãy lấy một đối tượng JSON với các cam kết mới nhất từ ​​GitHub

let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch(url);

let commits = await response.json(); // read response body and parse as JSON

alert(commits[0].author.login);

Hoặc, tương tự nếu không có

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json())
  .then(commits => alert(commits[0].author.login));

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json())
  .then(commits => alert(commits[0].author.login));

Để nhận văn bản phản hồi, hãy

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json())
  .then(commits => alert(commits[0].author.login));

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json())
  .then(commits => alert(commits[0].author.login));

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

let text = await response.text(); // read response body as text

alert(text.slice(0, 80) + '...');

Như một trường hợp trưng bày để đọc ở định dạng nhị phân, hãy tìm nạp và hiển thị hình ảnh biểu trưng của thông số kỹ thuật "tìm nạp" (xem chương Blob để biết chi tiết về các hoạt động trên

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json())
  .then(commits => alert(commits[0].author.login));

let response = await fetch('/article/fetch/logo-fetch.svg');

let blob = await response.blob(); // download as Blob object

// create <img> for it
let img = document.createElement('img');
img.style = 'position:fixed;top:10px;left:10px;width:100px';
document.body.append(img);

// show it
img.src = URL.createObjectURL(blob);

setTimeout(() => { // hide after three seconds
  img.remove();
  URL.revokeObjectURL(img.src);
}, 3000);

Quan trọng

Chúng tôi chỉ có thể chọn một phương pháp đọc cơ thể

Nếu chúng tôi đã nhận được phản hồi với

let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch(url);

let commits = await response.json(); // read response body and parse as JSON

alert(commits[0].author.login);

let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch(url);

let commits = await response.json(); // read response body and parse as JSON

alert(commits[0].author.login);

let text = await response.text(); // response body consumed
let parsed = await response.json(); // fails (already consumed)

Các tiêu đề phản hồi có sẵn trong một đối tượng tiêu đề giống như Bản đồ trong

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json())
  .then(commits => alert(commits[0].author.login));

Nó không chính xác là một Bản đồ, nhưng nó có các phương thức tương tự để lấy các tiêu đề riêng lẻ theo tên hoặc lặp lại chúng

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

// get one header
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8

// iterate over all headers
for (let [key, value] of response.headers) {
  alert(`${key} = ${value}`);
}

Để đặt tiêu đề yêu cầu trong

let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch(url);

let commits = await response.json(); // read response body and parse as JSON

alert(commits[0].author.login);

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

let text = await response.text(); // read response body as text

alert(text.slice(0, 80) + '...');

let response = fetch(protectedUrl, {
  headers: {
    Authentication: 'secret'
  }
});

…Nhưng có một danh sách mà chúng ta không thể thiết lập

• let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
  
  let text = await response.text(); // read response body as text
  
  alert(text.slice(0, 80) + '...');

  2,

  let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
  
  let text = await response.text(); // read response body as text
  
  alert(text.slice(0, 80) + '...');

  3

• let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
  
  let text = await response.text(); // read response body as text
  
  alert(text.slice(0, 80) + '...');

  4

• let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
  
  let text = await response.text(); // read response body as text
  
  alert(text.slice(0, 80) + '...');

  5

• let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
  
  let text = await response.text(); // read response body as text
  
  alert(text.slice(0, 80) + '...');

  6

• let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
  
  let text = await response.text(); // read response body as text
  
  alert(text.slice(0, 80) + '...');

  7

• let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
  
  let text = await response.text(); // read response body as text
  
  alert(text.slice(0, 80) + '...');

  8,

  let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
  
  let text = await response.text(); // read response body as text
  
  alert(text.slice(0, 80) + '...');

  9

• let response = await fetch('/article/fetch/logo-fetch.svg');
  
  let blob = await response.blob(); // download as Blob object
  
  // create <img> for it
  let img = document.createElement('img');
  img.style = 'position:fixed;top:10px;left:10px;width:100px';
  document.body.append(img);
  
  // show it
  img.src = URL.createObjectURL(blob);
  
  setTimeout(() => { // hide after three seconds
    img.remove();
    URL.revokeObjectURL(img.src);
  }, 3000);

  0

• let response = await fetch('/article/fetch/logo-fetch.svg');
  
  let blob = await response.blob(); // download as Blob object
  
  // create <img> for it
  let img = document.createElement('img');
  img.style = 'position:fixed;top:10px;left:10px;width:100px';
  document.body.append(img);
  
  // show it
  img.src = URL.createObjectURL(blob);
  
  setTimeout(() => { // hide after three seconds
    img.remove();
    URL.revokeObjectURL(img.src);
  }, 3000);

  1

• let response = await fetch('/article/fetch/logo-fetch.svg');
  
  let blob = await response.blob(); // download as Blob object
  
  // create <img> for it
  let img = document.createElement('img');
  img.style = 'position:fixed;top:10px;left:10px;width:100px';
  document.body.append(img);
  
  // show it
  img.src = URL.createObjectURL(blob);
  
  setTimeout(() => { // hide after three seconds
    img.remove();
    URL.revokeObjectURL(img.src);
  }, 3000);

  2

• let response = await fetch('/article/fetch/logo-fetch.svg');
  
  let blob = await response.blob(); // download as Blob object
  
  // create <img> for it
  let img = document.createElement('img');
  img.style = 'position:fixed;top:10px;left:10px;width:100px';
  document.body.append(img);
  
  // show it
  img.src = URL.createObjectURL(blob);
  
  setTimeout(() => { // hide after three seconds
    img.remove();
    URL.revokeObjectURL(img.src);
  }, 3000);

  3

• let response = await fetch('/article/fetch/logo-fetch.svg');
  
  let blob = await response.blob(); // download as Blob object
  
  // create <img> for it
  let img = document.createElement('img');
  img.style = 'position:fixed;top:10px;left:10px;width:100px';
  document.body.append(img);
  
  // show it
  img.src = URL.createObjectURL(blob);
  
  setTimeout(() => { // hide after three seconds
    img.remove();
    URL.revokeObjectURL(img.src);
  }, 3000);

  4

• let response = await fetch('/article/fetch/logo-fetch.svg');
  
  let blob = await response.blob(); // download as Blob object
  
  // create <img> for it
  let img = document.createElement('img');
  img.style = 'position:fixed;top:10px;left:10px;width:100px';
  document.body.append(img);
  
  // show it
  img.src = URL.createObjectURL(blob);
  
  setTimeout(() => { // hide after three seconds
    img.remove();
    URL.revokeObjectURL(img.src);
  }, 3000);

  5

• let response = await fetch('/article/fetch/logo-fetch.svg');
  
  let blob = await response.blob(); // download as Blob object
  
  // create <img> for it
  let img = document.createElement('img');
  img.style = 'position:fixed;top:10px;left:10px;width:100px';
  document.body.append(img);
  
  // show it
  img.src = URL.createObjectURL(blob);
  
  setTimeout(() => { // hide after three seconds
    img.remove();
    URL.revokeObjectURL(img.src);
  }, 3000);

  6

• let response = await fetch('/article/fetch/logo-fetch.svg');
  
  let blob = await response.blob(); // download as Blob object
  
  // create <img> for it
  let img = document.createElement('img');
  img.style = 'position:fixed;top:10px;left:10px;width:100px';
  document.body.append(img);
  
  // show it
  img.src = URL.createObjectURL(blob);
  
  setTimeout(() => { // hide after three seconds
    img.remove();
    URL.revokeObjectURL(img.src);
  }, 3000);

  7

• let response = await fetch('/article/fetch/logo-fetch.svg');
  
  let blob = await response.blob(); // download as Blob object
  
  // create <img> for it
  let img = document.createElement('img');
  img.style = 'position:fixed;top:10px;left:10px;width:100px';
  document.body.append(img);
  
  // show it
  img.src = URL.createObjectURL(blob);
  
  setTimeout(() => { // hide after three seconds
    img.remove();
    URL.revokeObjectURL(img.src);
  }, 3000);

  8

• let response = await fetch('/article/fetch/logo-fetch.svg');
  
  let blob = await response.blob(); // download as Blob object
  
  // create <img> for it
  let img = document.createElement('img');
  img.style = 'position:fixed;top:10px;left:10px;width:100px';
  document.body.append(img);
  
  // show it
  img.src = URL.createObjectURL(blob);
  
  setTimeout(() => { // hide after three seconds
    img.remove();
    URL.revokeObjectURL(img.src);
  }, 3000);

  9

• let text = await response.text(); // response body consumed
  let parsed = await response.json(); // fails (already consumed)

  0

• let text = await response.text(); // response body consumed
  let parsed = await response.json(); // fails (already consumed)

  1

• let text = await response.text(); // response body consumed
  let parsed = await response.json(); // fails (already consumed)

  2

• let text = await response.text(); // response body consumed
  let parsed = await response.json(); // fails (already consumed)

  3

Các tiêu đề này đảm bảo HTTP phù hợp và an toàn, vì vậy chúng được kiểm soát độc quyền bởi trình duyệt

Để thực hiện yêu cầu

let text = await response.text(); // response body consumed
let parsed = await response.json(); // fails (already consumed)

let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch(url);

let commits = await response.json(); // read response body and parse as JSON

alert(commits[0].author.login);

• let text = await response.text(); // response body consumed
  let parsed = await response.json(); // fails (already consumed)

  6 – Phương thức HTTP, e. g.

  let text = await response.text(); // response body consumed
  let parsed = await response.json(); // fails (already consumed)

  4,

• let text = await response.text(); // response body consumed
  let parsed = await response.json(); // fails (already consumed)

  8 – cơ quan yêu cầu, một trong
  • một chuỗi (e. g. được mã hóa JSON),
  • Đối tượng

    let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
    let response = await fetch(url);
    
    let commits = await response.json(); // read response body and parse as JSON
    
    alert(commits[0].author.login);

    9, để gửi dữ liệu dưới dạng

    let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
    
    // get one header
    alert(response.headers.get('Content-Type')); // application/json; charset=utf-8
    
    // iterate over all headers
    for (let [key, value] of response.headers) {
      alert(`${key} = ${value}`);
    }

    0,

  • fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
      .then(response => response.json())
      .then(commits => alert(commits[0].author.login));

    6/

    let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
    
    // get one header
    alert(response.headers.get('Content-Type')); // application/json; charset=utf-8
    
    // iterate over all headers
    for (let [key, value] of response.headers) {
      alert(`${key} = ${value}`);
    }

    2 để gửi dữ liệu nhị phân,
  • URLSearchParams, để gửi dữ liệu dưới dạng mã hóa

    let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');
    
    // get one header
    alert(response.headers.get('Content-Type')); // application/json; charset=utf-8
    
    // iterate over all headers
    for (let [key, value] of response.headers) {
      alert(`${key} = ${value}`);
    }

    3, hiếm khi được sử dụng

Định dạng JSON được sử dụng hầu hết thời gian

Ví dụ: mã này gửi đối tượng

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

// get one header
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8

// iterate over all headers
for (let [key, value] of response.headers) {
  alert(`${key} = ${value}`);
}

let user = {
  name: 'John',
  surname: 'Smith'
};

let response = await fetch('/article/fetch/post/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(user)
});

let result = await response.json();
alert(result.message);

Xin lưu ý, nếu yêu cầu

let text = await response.text(); // response body consumed
let parsed = await response.json(); // fails (already consumed)

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

// get one header
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8

// iterate over all headers
for (let [key, value] of response.headers) {
  alert(`${key} = ${value}`);
}

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

// get one header
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8

// iterate over all headers
for (let [key, value] of response.headers) {
  alert(`${key} = ${value}`);
}

Tuy nhiên, vì chúng tôi sẽ gửi JSON, thay vào đó, chúng tôi sử dụng tùy chọn

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

let text = await response.text(); // read response body as text

alert(text.slice(0, 80) + '...');

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

// get one header
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8

// iterate over all headers
for (let [key, value] of response.headers) {
  alert(`${key} = ${value}`);
}

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

// get one header
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8

// iterate over all headers
for (let [key, value] of response.headers) {
  alert(`${key} = ${value}`);
}

Chúng tôi cũng có thể gửi dữ liệu nhị phân với

let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch(url);

let commits = await response.json(); // read response body and parse as JSON

alert(commits[0].author.login);

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json())
  .then(commits => alert(commits[0].author.login));

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

// get one header
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8

// iterate over all headers
for (let [key, value] of response.headers) {
  alert(`${key} = ${value}`);
}

Trong ví dụ này, có một

let response = fetch(protectedUrl, {
  headers: {
    Authentication: 'secret'
  }
});

let response = await fetch(url);

if (response.ok) { // if HTTP-status is 200-299
  // get the response body (the method explained below)
  let json = await response.json();
} else {
  alert("HTTP-Error: " + response.status);
}

Xin lưu ý, ở đây chúng tôi không đặt tiêu đề

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

// get one header
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8

// iterate over all headers
for (let [key, value] of response.headers) {
  alert(`${key} = ${value}`);
}

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json())
  .then(commits => alert(commits[0].author.login));

let response = fetch(protectedUrl, {
  headers: {
    Authentication: 'secret'
  }
});

let response = fetch(protectedUrl, {
  headers: {
    Authentication: 'secret'
  }
});

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json())
  .then(commits => alert(commits[0].author.login));

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

// get one header
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8

// iterate over all headers
for (let [key, value] of response.headers) {
  alert(`${key} = ${value}`);
}

Tại sao tìm nạp được sử dụng trong PHP?

Làm cách nào để tìm nạp truy vấn trong PHP?

Làm cách nào để tìm nạp dữ liệu từ vòng lặp for trong PHP?

Làm cách nào để tìm nạp một hàng trong PHP?