xmlhttprequest la gi

Giới thiệu

Từ nghìn xưa, nhằm tiến hành HTTP requests nhập Javascript, người tớ tiếp tục tiến hành một cách thức cổ điển được giữ lại kể từ ai cơ. Phương thức này là XMLHttpRequest. Đây là 1 trong những cách thức được tích hợp ý sẵn nhập trình duyệt nhằm tiến hành những HTTP requests nhằm lấy tài liệu kể từ nơi nào đó cho tới Javascript. Hiện bên trên, cách thức này tiếp tục cũ kĩ và đang được dần dần rớt vào quên lãng vì như thế giờ đây, tiếp tục đem cách thức mới mẻ rộng lớn, xịn rộng lớn, này là fetch. Tuy nhiên, nơi nào đó, một trong những điểm vẫn người sử dụng cách thức cổ điển này với 3 lí do:

Bạn đang xem: xmlhttprequest la gi

1. Hỗ trợ những script cũ được ghi chép kể từ thời rất lâu rồi, Lúc nhưng mà chỉ mất XMLHttpRequest
2. Cần tư vấn trình duyệt cũ
3. Hỗ trợ những loại nhưng mà fetch không tồn tại như thể bám theo dõi quy trình lấy dữ liệu

Căn bản

XMLHttpRequest đem nhị cơ chế nhằm thực thi đua câu lệnh: đồng nhất và bất đồng nhất. Hãy nằm trong mò mẫm hiểu về bất đồng nhất trước. Để rất có thể gọi và lấy tài liệu kể từ request, tất cả chúng ta đem 3 bước cần thiết thực hiện:

1. Tạo rời khỏi instance của XMLHttpRequest

let xhr = new XMLHttpRequest();

2. Config nó, nhập này người sử dụng cách thức open chứ nó ko open vật gì cả nha . Kiểu vừng ơi xuất hiện rời khỏi mang đến sung sướng đoạn nên lấy khóa xe nhằm xuất hiện.

xhr.open(method, URL, [async, user, password])

Giải mến những thông số như sau:

• method: HTTP method như "GET", "POST"
• URL: URL của request, rất có thể là chuỗi hoạc URL object
• async: ra quyết định request bất đồng nhất hoặc đồng nhất, false là đồng nhất còn true hoặc ko phối thìa là sự không tương đồng bộ
• user, password: HTTP auth nếu như có

3. Gửi request về phương xa xăm và nhận về tin tưởng mật

xhr.send([body])

Tham số body là tùy lựa chọn, tiếp tục chứa chấp request toàn thân, thông thường được sử dụng với cách thức POST nhằm gửi tài liệu. Đây được xem là cách thức nhằm banh liên kết và chính thức gửi request cho tới server. 4. Cuối nằm trong là lót dép hóng drama (sự kiện) Thường thì đem 3 loại sự khiếu nại chính:

• load: đấy là hiện trạng Lúc nhưng mà request hoàn thành rồi và response đã và đang được trả về
• error: đấy là hiện trạng Lúc nhưng mà ko thể gửi request như thể URL ko trúng, server cút nghỉ ngơi mát
• progress: bám theo dõi quy trình response được vận tải về, show mang đến mifnnh thấy là từng nào phần đã và đang được vận tải xuống rồi

xhr.onload = function() {
    alert(`Loaded: ${xhr.status} ${xhr.response}`);
};

xhr.onerror = function() {
    alert(`Network Error`);
};

xhr.onprogress = function(event) {
    alert(`Received ${event.loaded} of ${event.total}`);
};

Thực hành

Lí thuyết thiệt là nhiều, giờ tất cả chúng ta nằm trong cút nhập thực hành thực tế này. Trong ví dụ này, bản thân tiếp tục ghi chép một công tác nhằm rất có thể lấy tài liệu của bao nhiêu con cái pokemon. Thứ nhất, chúng ta truy vấn nhập trang https://pokeapi.co/. Sau Lúc nhập trang này thì loài chuột nên lựa chọn inspect. Sau Lúc đoạn thì tất cả chúng ta chính thức code thôi. Đầu tiên là khởi tạo ra instance của XMLHttpRequest:

let xhr = new XMLHttpRequest()

Tiếp bám theo là config:

xhr.open('GET', '/api/v2/pokemon/ditto')

Sau cơ, ghi chép một vài ba cách thức nhằm hóng hớt drama. Trong ví dụ này bản thân tiếp tục ghi chép cả 3 và tế bào mô tả cả 3, tuy nhiên nhưng mà giờ bản thân tiếp tục ưu tiên onload trước tiếp tục.

xhr.onload = function() {
  if (xhr.status != 200) {
    alert(`Error ${xhr.status}: ${xhr.statusText}`);
  } else {
    alert(xhr.response);
  }
};

Nôm mãng cầu, Lúc gọi về phương xa xăm và sẽ có được phúc đáp thì cách thức này tiếp tục nhận phúc đáp cơ và chính thức sinh hoạt. Trong code, trước tiên bản thân kiểm tra coi status của phúc đáp này là gì, nếu trong trường hợp là 200 tức là thành công xuất sắc thì alert rời khỏi loại response, nếu như không thành công xuất sắc thì in rời khỏi lỗi cùng theo với status và status text. Status text là text của status như status 200 thì text của chính nó được xem là OK tuy nhiên không tồn tại con cái dê, còn status 404 thì text của chính nó được xem là Not Found,.... Cuối nằm trong là send request và nhận về response.

• status: HTTP status code: 200, 400, 404, ..., rất có thể là 0
• statusText: HTTP status message là message ứng mang đến status như 200 là OK, 404 là Not Found
• response: Search Engine Results Page kể từ phương xa

xhr.send()

Kết trái ngược các bạn thấy Pokemon tiếp tục trình bày hãy lượt thích, share và subscribe kênh mến học tập của tớ . Đùa thôi, pokemon trình bày như vậy này:

Giờ mình thích gọi lại lần tiếp nữa thì sao? Thì send lại lần tiếp nữa, song state lúc này của xhr tiếp tục không thể open nữa vì như thế tất cả chúng ta tiếp tục tiến hành đoạn request rồi. Để tiến hành lần tiếp nữa thì tất cả chúng ta lại cần thiết config lại rồi gọi lại mệnh lệnh send:

xhr.open('GET', '/api/v2/pokemon/ditto')
xhr.send

Và Pokemon lại nói:

Về Response Type:

• "": đem định hình chuỗi
• "text": dạng chuỗi
• "arraybuffer": dạng ArrayBuffer
• "blob": dạng Blob mang đến tài liệu nhị phân
• "document": dạng XML hoặc HTML document
• "json": tự động parse quý phái loại JSON

Thiệt là ngầu, giờ nối tiếp mò mẫm hiểu onprogress với onerror nhé. Các các bạn thêm thắt function onprogress và onerror nhập như sau:

xhr.onprogress = function(event) {
    console.log(`Received ${event.loaded} of ${event.total}`);
}

xhr.onerror = function() {
    alert('Netwwokr Error');
}

Với onprogress Lúc lấy tài liệu, những các bạn sẽ thấy browser log rời khỏi tài liệu đang rất được truyền. Còn với onerror thì chúng ta test tắt mạng coi từng người dân có trằm trồ, tiếp sau đó gọi lại test thì tiếp tục được trao alert Network Error.

Để thêm thắt param mang đến URL thì bọn chúng thể người sử dụng string hoặc người sử dụng URL object nhập javascript. Để gọi lấy tài liệu kể từ endpoint này pokemon?limit=100000&offset=0 thì với cách sử dụng string

xhr.open('GET', '/api/v2/pokemon?limit=1000$offset=0');
xhr.send();

Còn với cách sử dụng URL object:

Xem thêm: phim vo tong 1972 thuyet minh tieng viet

let url = new URL('https://pokeapi.co/api/v2/pokemon');
url.searchParams.set('limit', 100);
url.searchParams.set('offset', 1);
xhr.open('GET', url);
xhr.send();

Các các bạn chú ý là nãy giờ tất cả chúng ta không tồn tại https://pokeapi.co vì như thế bản thân đang được ở tức thì nhập trang https://pokeapi.co và bản thân nhảy console nhập inspect lên nhằm ghi chép code nên nó sẽ bị tự động hiểu domain name là https://pokeapi.co. Còn với URL thì bản thân nên phối https://pokeapi.co vì như thế nếu như không phối thì nó sẽ không còn valid và ko người sử dụng được URL.

Thử gọi lại với loại JSON nhé, nhớ rằng nên config xhr vì như thế các bạn sẽ ko phối được response type Lúc hiện trạng là LOADING hoặc DONE. Nhớ chỉnh lại onload sự kiện nhé

xhr.onload = function() {
    if (xhr.status != 200) {
        alert(`Error ${xhr.status}: ${xhr.statusText}`);
    } else {
        console.log(xhr.response);
    }
}

xhr.open('GET', url);
xhr.responseType = 'json';
xhr.send();

Chạy tính năng này thì chúng ta nhằm ý console của browser tiếp tục thấy log rời khỏi thành quả lấy được của pokemons .

Chuyện mặt mũi lề

Ready states

Nãy giờ nghe state LOADING, DONE đồ dùng, nó là vật gì vậy, câu vấn đáp nó là state . Quay quay trở lại thời rất lâu rồi của thời rất lâu rồi, khi cơ cũng có thể có XMLHttpRequest rồi, nhưng mà chưa xuất hiện sự kiện load, error và bao nhiêu loại sự kiện không giống. Lúc bấy giờ, người tớ người sử dụng Ready states, tất cả chúng ta đem những state như sau:

• UNSENT = 0
• OPENED = 1
• HEADERS_RECEIVED = 2
• LOADING = 3
• DONE = 4

Flow thông thường chạy như sau: 0->1->2->3, cho tới bước thì 3 thì vô điệp khúc tức là tiếp tục ở state 3 again again and again nhập khoản thời hạn nhận packet kể từ mạng cho tới Lúc nhận đoạn thì chuyển sang state 4. Để bám theo dõi những state này thì tất cả chúng ta rất có thể người sử dụng sự khiếu nại readystatechange:

xhr.onreadystatechange = function() {
  if (xhr.readyState == 0) {
    // unsent
  }
  if (xhr.readyState == 1) {
    // opened
  }
  if (xhr.readyState == 2) {
    // headers received
  }
  if (xhr.readyState == 3) {
    // loading
  }
  if (xhr.readyState == 4) {
    // request finished
  }
};

Timeout

Ngoài rời khỏi bản thân rất có thể phối timeout, timeout tức là trong vòng thời hạn cơ, nếu như request ko thành công xuất sắc thì nghỉ ngơi phẻ và gọi sự kiện timeout rời khỏi.

xhr.timeout = 1000; // timeout được xem vì như thế ms, 1000ms là 1s, ví dụ này tiếp tục timeout sau 1s

Aborting request

Để bỏ quăng quật điều gọi cho tới phương xa xăm, ví dụ tình huống đang được gọi cho tới server pokemon nhằm lấy tài liệu về thì u gọi về kêu ăn cơm trắng thì dùng

xhr.abort()

Để bỏ quăng quật request. Với cách thức này tiếp tục gọi cho tới sự kiện thương hiệu abort và xhr.status thời điểm hiện nay được xem là 0

Synchronous requests

Để gọi request một cơ hội đồng nhất thì thêm thắt false vào sinh sống thông số loại tía khi sử dụng cách thức open.

let xhr = new XMLHttpRequest();

xhr.open('GET', '/api/v2/pokemon?offset=101&limit=10', false);

try {
  xhr.send();
  if (xhr.status != 200) {
    alert(`Error ${xhr.status}: ${xhr.statusText}`);
  } else {
    alert(xhr.response);
  }
} catch(err) { 
  alert("Request failed");
}

Mà tính năng này người sử dụng khá không nhiều vì như thế nó rất có thể thực hiện đứng browser Lúc ngóng tài liệu trả về với ko người sử dụng những tác dụng nâng lên như timeout, request kể từ domain name không giống,...

HTTP headers

Trong XMLHttpRequest, tất cả chúng ta rất có thể gửi custom headers cũng như thể hiểu headers kể từ tài liệu trả về.

Để phối header tất cả chúng ta thực hiện như sau:

xhr.setRequestHeader(name, value);

Ví dụ:

xhr.setRequestHeader('Content-Type', 'application/json');

Để lấy header trả về:

xhr.getRessponseHeader(name);

Ví dụ:

xhr.getResponseHeader('Content-Type');

Để lấy toàn bộ header trả về:

Xem thêm: service pack là gì

xhr.getAllResponseHeaders()

Kết trái ngược trả về rất có thể như vậy này:

Cache-Control: max-age=31536000
Content-Length: 4260
Content-Type: application/json
Date: Sat, 30 Jul 2022 00:53:16 GMT

Cross-origin requests

let xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.open('POST', 'http://www.example.com/endpoint');

Ứng dụng pokemon

Các các bạn coi video clip nhằm rất có thể luyện tập cơ hội dùng XMLHttpRequest nhằm gọi API, lấy tài liệu kể từ pokemon api và render rời khỏi browser nhé.

Kết luận

Mong là sau bài bác này, những các bạn sẽ hiểu rộng lớn cũng như thể biết phương pháp dùng XMLHttpRequest.