Bagaimana untuk menyambung dengan javascript

JavaScript ialah bahasa skrip yang boleh digunakan untuk pembangunan bahagian hadapan web, aplikasi web dan pembangunan bahagian pelayan. Sebagai bahasa pengaturcaraan peringkat tinggi, ia mempunyai banyak ciri penting dan praktikal. Salah satunya ialah menyambung kepada perisian dan perkhidmatan lain. Dalam artikel ini, kami akan melihat dengan lebih dekat cara JavaScript menyambung kepada perisian dan perkhidmatan lain.

Asas

Sebelum kita bercakap tentang cara menyambung perisian dan perkhidmatan lain, kita perlu memahami beberapa asas.

Protokol HTTP

HTTP (Protokol Pemindahan Hiperteks) ialah protokol komunikasi di Web. Ia adalah protokol pelayan-pelanggan. Pelanggan memulakan permintaan HTTP, dan pelayan bertindak balas dengan respons HTTP. HTTP menggunakan TCP/IP sebagai protokol pengangkutannya, biasanya menggunakan port 80.

Protokol HTTP dibahagikan kepada kaedah permintaan dan kod status respons. Kaedah permintaan biasa ialah: GET, POST, PUT, DELETE, dsb. Kod status respons biasa ialah: 200 (OK), 400 (Permintaan Buruk), 404 (Tidak Ditemui), 500 (Ralat Pelayan Dalaman), dsb.

REST API

REST (Representational State Transfer) ialah gaya reka bentuk yang menggunakan protokol HTTP di Web untuk mencapai interaksi antara klien dan pelayan. RESTful API (RESTful Application Programming Interface) ialah API yang ditulis berdasarkan gaya reka bentuk REST. API RESTful membolehkan pelanggan mengakses perkhidmatan web menggunakan permintaan HTTP.

Ciri RESTful API termasuk URL rasmi, menggunakan kaedah permintaan HTTP, menggunakan JSON sebagai format penghantaran data, dsb.

AJAX

AJAX (Asynchronous JavaScript and XML) ialah teknologi yang digunakan untuk memuatkan data secara tidak segerak pada halaman web. Ia membenarkan halaman web membuat permintaan HTTP melalui JavaScript untuk mengemas kini bahagian kandungan halaman tanpa menyegarkan keseluruhan halaman.

Cara menyambung ke perisian dan perkhidmatan lain

Sambung ke perkhidmatan lain melalui permintaan HTTP

Permintaan HTTP ialah cara biasa untuk menyambung ke perkhidmatan lain. JavaScript menyediakan beberapa kaedah untuk menghantar permintaan HTTP, termasuk: Objek ialah API JavaScript asli yang membolehkan anda menghantar permintaan HTTP dan mendapatkan semula data dengan menerima respons daripada pelayan. Berikut ialah contoh objek XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
  else {
    console.log('Request failed.  Returned status of ' + xhr.status);
  }
};
xhr.send();

Kod di atas boleh menghantar permintaan GET ke 'https://api.example.com/data' dan mencetak kandungan teks respons selepas menerima tindak balas.
• Fetch API
• Fetch API ialah cara yang lebih moden untuk menghantar permintaan HTTP daripada XMLHttpRequest. Berikut ialah contoh Fetch API:

fetch('https://api.example.com/data')
  .then(function(response) {
    return response.text();
  })
  .then(function(text) {
    console.log('Request successful.  Response:', text);
  })
  .catch(function(error) {
    console.log('Request failed.  Error:', error);
  });

Fetch API menggunakan Promise untuk mengendalikan permintaan tak segerak. Ia membolehkan anda menghantar sebarang jenis permintaan, menetapkan maklumat pengepala permintaan dan badan permintaan, dan memproses data yang dikembalikan oleh pelayan.

Gunakan RESTful API untuk menyambung ke perkhidmatan lain

RESTful API ialah API yang menggunakan protokol HTTP untuk interaksi dan JavaScript boleh menggunakannya untuk menyambung ke perkhidmatan lain. Berikut ialah contoh menyambung ke API RESTful:

fetch('https://api.example.com/products', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'iPhone X',
    price: 999.99
  })
})
.then(function(response) {
  return response.json();
})
.then(function(data) {
  console.log('Success:', data);
})
.catch(function(error) {
  console.error('Error:', error);
});

Kod di atas boleh menghantar permintaan POST ke 'https://api.example.com/products' dan menghantar nama serta harga produk kepada pelayan. Respons yang dikembalikan oleh pelayan ialah data dalam format JSON, yang boleh diproses selepas data berjaya dikembalikan melalui panggilan rantai Promise.

Gunakan perpustakaan pihak ketiga untuk menyambung ke perkhidmatan lain

JavaScript mempunyai banyak perpustakaan pihak ketiga yang boleh digunakan untuk menyambung ke perkhidmatan lain, seperti jQuery dan Axios, dsb.

jQuery

jQuery ialah perpustakaan JavaScript popular yang menyediakan banyak ciri berguna, termasuk menyambung ke perkhidmatan lain. Berikut ialah contoh penggunaan jQuery untuk menghantar permintaan HTTP:

$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  success: function(response) {
    console.log(response);
  },
  error: function(error) {
    console.log(error);
  }
});

Kod di atas boleh menghantar permintaan GET ke 'https://api.example.com/data' dan mencetak teks respons apabila permintaan berjaya kandungan.

Axios

Axios ialah perpustakaan JavaScript moden yang boleh digunakan untuk menghantar permintaan HTTP dan menyediakan API yang mudah digunakan. Berikut ialah contoh menggunakan Axios untuk menghantar permintaan HTTP:

axios.get('https://api.example.com/data')
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(error) {
    console.log(error);
  });

Kod di atas boleh menghantar permintaan GET ke 'https://api.example.com/data' dan mencetak data respons selepas berjaya kembali.

Ringkasan

JavaScript menyambung kepada perisian dan perkhidmatan lain dalam pelbagai cara, yang paling biasa adalah dengan menghantar permintaan HTTP. Di samping itu, API RESTful dan perpustakaan pihak ketiga juga boleh digunakan untuk menyambung ke perkhidmatan lain. Tidak kira kaedah yang digunakan, JavaScript berfungsi sebagai penyambung yang berkuasa untuk mengakses perkhidmatan dan data lain.

Atas ialah kandungan terperinci Bagaimana untuk menyambung dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!