NHẬN dữ liệu XML từ url javascript

React là một thư viện JavaScript phổ biến được sử dụng để tạo các phần tử giao diện người dùng năng động và có thể tái sử dụng một cách hoàn hảo. XML là định dạng tệp lâu đời nhất thường được sử dụng để quản lý dữ liệu cơ sở dữ liệu và chia sẻ qua internet, vì đây là tùy chọn để nhận phản hồi và gửi yêu cầu đến máy chủ

Trong hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng dữ liệu XML từ máy chủ và kết xuất nó vào ứng dụng React

Tìm nạp dữ liệu XML từ máy chủ

React không có cơ chế sẵn có để tìm nạp và hiển thị dữ liệu, nhưng có rất nhiều thư viện phân tích cú pháp XML có sẵn để sử dụng cho việc này. Trước khi bắt đầu hướng dẫn ứng dụng React, bạn phải có dữ liệu XML để hiển thị, bạn có thể cần thu thập dữ liệu này từ máy chủ

Để tìm nạp dữ liệu từ máy chủ, hãy sử dụng HttpClient Axios, được cài đặt bằng lệnh

1componentDidMount() {
2	var self = this;
3	axios
4	.get("https://fakerestapi.azurewebsites.net/api/Authors", {
5		"Content-Type": "application/xml; charset=utf-8"
6	 })
7	.then(function(response) {
8		self.setState({ authors: response.data });
9	})
10	.catch(function(error) {
11		console.log(error);
12	});
13}

1npm install axios 

vỏ bọc quyền lực

Bây giờ bạn đã cài đặt Axios, hãy tạo một thành phần mới, chẳng hạn như

1componentDidMount() {
2	var self = this;
3	axios
4	.get("https://fakerestapi.azurewebsites.net/api/Authors", {
5		"Content-Type": "application/xml; charset=utf-8"
6	 })
7	.then(function(response) {
8		self.setState({ authors: response.data });
9	})
10	.catch(function(error) {
11		console.log(error);
12	});
13}

1componentDidMount() {
2	var self = this;
3	axios
4	.get("https://fakerestapi.azurewebsites.net/api/Authors", {
5		"Content-Type": "application/xml; charset=utf-8"
6	 })
7	.then(function(response) {
8		self.setState({ authors: response.data });
9	})
10	.catch(function(error) {
11		console.log(error);
12	});
13}

1componentDidMount() {
2	var self = this;
3	axios
4	.get("https://fakerestapi.azurewebsites.net/api/Authors", {
5		"Content-Type": "application/xml; charset=utf-8"
6	 })
7	.then(function(response) {
8		self.setState({ authors: response.data });
9	})
10	.catch(function(error) {
11		console.log(error);
12	});
13}

jsx

Trong các dòng mã trên, RestAPI giả lấy dữ liệu XML từ URL này

1https://fakerestapi.azurewebsites.net/api/Authors

Bạn có thể sử dụng bất kỳ dữ liệu API nào mà bạn muốn;

Sau khi nhận được phản hồi từ máy chủ, dữ liệu cần được lưu trữ ở đâu đó trong thành phần và trạng thái cục bộ là lựa chọn chính

1.then(function(response) {
2    self.setState({ authors: response.data });
3})

jsx

Bạn có thể quan sát rằng phản hồi đến từ máy chủ và lưu trữ dữ liệu trong một biến trạng thái có tên là

1componentDidMount() {
2	var self = this;
3	axios
4	.get("https://fakerestapi.azurewebsites.net/api/Authors", {
5		"Content-Type": "application/xml; charset=utf-8"
6	 })
7	.then(function(response) {
8		self.setState({ authors: response.data });
9	})
10	.catch(function(error) {
11		console.log(error);
12	});
13}

Hiển thị dữ liệu XML trong ứng dụng React

Cho đến giờ trong hướng dẫn này, bạn đã sử dụng một HttpClient để tìm nạp dữ liệu XML từ máy chủ. Bước tiếp theo là hiển thị dữ liệu được phân tích cú pháp XML cho khách hàng theo nhiều cách khác nhau

Sử dụng Loại nội dung dưới dạng XML

Khi tìm nạp dữ liệu từ máy chủ, hãy chỉ định loại nội dung là XML

1axios
2.get("https://fakerestapi.azurewebsites.net/api/Authors", {
3	"Content-Type": "application/xml; charset=utf-8"
4})

jsx

Vì vậy, sau khi bạn kích hoạt API, phản hồi sẽ được phân tích cú pháp thành

1componentDidMount() {
2	var self = this;
3	axios
4	.get("https://fakerestapi.azurewebsites.net/api/Authors", {
5		"Content-Type": "application/xml; charset=utf-8"
6	 })
7	.then(function(response) {
8		self.setState({ authors: response.data });
9	})
10	.catch(function(error) {
11		console.log(error);
12	});
13}

________số 8

jsx

Trong ví dụ trên với giá trị trạng thái

1componentDidMount() {
2	var self = this;
3	axios
4	.get("https://fakerestapi.azurewebsites.net/api/Authors", {
5		"Content-Type": "application/xml; charset=utf-8"
6	 })
7	.then(function(response) {
8		self.setState({ authors: response.data });
9	})
10	.catch(function(error) {
11		console.log(error);
12	});
13}

1componentDidMount() {
2	var self = this;
3	axios
4	.get("https://fakerestapi.azurewebsites.net/api/Authors", {
5		"Content-Type": "application/xml; charset=utf-8"
6	 })
7	.then(function(response) {
8		self.setState({ authors: response.data });
9	})
10	.catch(function(error) {
11		console.log(error);
12	});
13}

Sử dụng Thư viện phân tích cú pháp XML của bên thứ ba

Bạn đã học cách tìm nạp dữ liệu XML bằng API và hiển thị cho người dùng. Ngoài ra, bạn có thể sử dụng các thư viện bên thứ ba khác nhau, một số thư viện bao gồm

• xml-để-phản ứng
• xml2js
• xml-to-json
• xml-js

• phản ứng-xml-phân tích cú pháp

Đây là một số thư viện có thể được sử dụng để phân tích cú pháp dữ liệu XML trong ứng dụng React. Hãy thử một trong số chúng

Trước khi sử dụng thư viện, bạn cần cài đặt nó. Tôi sẽ minh họa thư viện ______15 trong hướng dẫn này.

1componentDidMount() {
2	var self = this;
3	axios
4	.get("https://fakerestapi.azurewebsites.net/api/Authors", {
5		"Content-Type": "application/xml; charset=utf-8"
6	 })
7	.then(function(response) {
8		self.setState({ authors: response.data });
9	})
10	.catch(function(error) {
11		console.log(error);
12	});
13}

vỏ bọc quyền lực

Sau khi cài đặt thư viện, hãy triển khai chức năng thư viện

1componentDidMount() {
2	var self = this;
3	axios
4	.get("https://fakerestapi.azurewebsites.net/api/Authors", {
5		"Content-Type": "application/xml; charset=utf-8"
6	 })
7	.then(function(response) {
8		self.setState({ authors: response.data });
9	})
10	.catch(function(error) {
11		console.log(error);
12	});
13}

jsx

Như bạn có thể quan sát trong ví dụ trên, trình phân tích cú pháp được sử dụng là ______16 , khởi tạo hàm trình phân tích cú pháp từ thư viện.

Sau khi khởi tạo trình phân tích cú pháp, bước tiếp theo là cung cấp dữ liệu XML cho trình phân tích cú pháp bằng hàm

1componentDidMount() {
2	var self = this;
3	axios
4	.get("https://fakerestapi.azurewebsites.net/api/Authors", {
5		"Content-Type": "application/xml; charset=utf-8"
6	 })
7	.then(function(response) {
8		self.setState({ authors: response.data });
9	})
10	.catch(function(error) {
11		console.log(error);
12	});
13}

Sau khi bạn thực hiện ví dụ trên, nhật ký giao diện điều khiển sẽ có dạng như bên dưới

Dữ liệu XML được chuyển đổi hoàn toàn thành một đối tượng JavaScript và mỗi phần tử con của XML là phần tử con của đối tượng cha, như bạn có thể thấy trong ảnh chụp màn hình

Đây là cách dữ liệu XML từ một nguồn bên trong hoặc bên ngoài có thể được phân tích cú pháp thành một đối tượng hoặc JSON bằng thư viện của bên thứ ba

Phần kết luận

React là một thư viện JavaScript và mọi thứ trong JavaScript đều là một đối tượng, nhưng đôi khi bạn có thể cần truy cập vào các định dạng khác nhau như XML và JSON, vì vậy khá dễ dàng để phân tích một đối tượng

Trong hướng dẫn này, bạn đã học cách phân tích cú pháp dữ liệu XML và hiển thị dữ liệu đó cho người dùng bằng cách sử dụng loại nội dung của phản hồi và thư viện của bên thứ ba. Tôi hy vọng nó hữu ích cho bạn

Làm cách nào để lấy dữ liệu XML từ URL?

Làm cách nào để trích xuất dữ liệu XML trong JavaScript?

Làm cách nào để truy cập dữ liệu XML trong JavaScript?

Làm cách nào để lấy giá trị XML trong JavaScript?