Analisis terperinci JavaScript permintaan rangkaian dan sumber jauh

Artikel ini membawa anda pengetahuan yang berkaitan tentang javascript, yang terutamanya memperkenalkan isu yang berkaitan dengan permintaan rangkaian dan sumber jauh, termasuk perkongsian sumber silang asal, permintaan pra-penerbangan dan Ambil API Mari kita lihat kandungan di bawah, saya harap ia akan membantu semua orang.

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

1 of Ajax

Pada tahun 2005, Jesse James Garrett menulis artikel "Ajax - A New Approach to Web Applications", yang menerangkan teknologi yang dipanggil Ajax (Asynchronous JavaScript XML) . Teknik ini melibatkan penghantaran permintaan data tambahan kepada pelayan tanpa memuat semula halaman, menghasilkan pengalaman pengguna yang lebih baik. Garrett menerangkan cara teknologi ini mengubah model klik-dan-tunggu tradisional yang berterusan sejak kelahiran Web.
Teknologi utama yang mendorong Ajax ke peringkat sejarah ialah objek XMLHttpRequest (XHR). Sebelum kemunculan XHR, komunikasi gaya Ajax perlu dicapai melalui beberapa teknologi hitam, terutamanya menggunakan anak tetingkap tersembunyi atau anak tetingkap sebaris. XHR menyediakan antara muka yang munasabah untuk menghantar permintaan pelayan dan mendapatkan respons. Antara muka ini boleh mendapatkan data tambahan daripada pelayan secara tidak segerak, yang bermaksud bahawa pengguna boleh mendapatkan data tanpa memuat semula halaman. Selepas mendapatkan data melalui objek XHR, anda boleh menggunakan kaedah DOM untuk memasukkan data ke dalam halaman web.
API objek XHR secara amnya dianggap sukar untuk digunakan, dan API Ambil dengan cepat menjadi standard alternatif yang lebih moden untuk XHR selepas kelahiran automatiknya API Fetch menyokong janji masa depan dan rangkaian perkhidmatan (pekerja perkhidmatan), dan telah menjadi alat pembangunan Web yang sangat berkuasa.

2. Perkongsian sumber silang asal

Had utama komunikasi Ajax melalui XHR ialah dasar keselamatan silang asal. Secara lalai, XHR hanya boleh mengakses sumber dalam domain yang sama seperti halaman yang memulakan permintaan. Sekatan keselamatan ini menghalang tingkah laku berniat jahat tertentu. Walau bagaimanapun, penyemak imbas juga perlu menyokong akses silang asal yang sah.
Perkongsian Sumber Silang Asal (CORS) mentakrifkan cara penyemak imbas dan pelayan melaksanakan komunikasi silang asal. Idea asas di sebalik CORS ialah menggunakan pengepala HTTP tersuai untuk membolehkan penyemak imbas dan pelayan memahami satu sama lain untuk menentukan sama ada permintaan atau respons harus berjaya atau gagal.
Untuk permintaan mudah, seperti permintaan GET atau POST, tiada pengepala tersuai dan kandungan permintaan adalah daripada jenis teks/biasa sahaja akan mempunyai pengepala tambahan yang dipanggil Origin apabila dihantar. Pengepala Origin mengandungi sumber (protokol, nama domain, port) halaman yang menghantar permintaan supaya pelayan boleh menentukan sama ada untuk memberikan respons untuknya.
Penyemak imbas moden secara asli menyokong CORS melalui objek XMLHttpRequst Tingkah laku ini akan dicetuskan secara automatik apabila cuba mengakses sumber daripada sumber yang berbeza. Untuk menghantar permintaan kepada sumber dalam domain lain, anda boleh menggunakan objek XHR standard dan lulus URL mutlak kepada kaedah open(), seperti:

let xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if((xhr.status >= 200 && xhr.status <p>Objek XHR merentas domain membenarkan akses kepada sifat status dan statusText, serta permintaan Segerak, objek XHR merentas domain juga mengenakan beberapa sekatan tambahan atas sebab keselamatan. </p>

• Tidak boleh menggunakan setRequestHeader() untuk menetapkan pengepala tersuai; 🎜>Kaedah getAllResponseHeaders() sentiasa mengembalikan rentetan kosong; URL sumber tempatan, gunakan URL mutlak apabila mengakses sumber jauh, yang boleh membezakan senario penggunaan dengan lebih jelas dan mengelakkan masalah akses terhad kepada maklumat pengepala atau kuki apabila mengakses sumber tempatan.

3. Permintaan prapenerbangan

• CORS membenarkan penggunaan pengepala tersuai, kaedah selain GET dan POST, dan badan permintaan yang berbeza melalui mekanisme pengesahan pelayan yang dipanggil jenis kandungan prapenerbangan. Apabila menghantar permintaan yang melibatkan salah satu daripada pilihan lanjutan di atas, permintaan prapenerbangan pertama dihantar ke pelayan. Permintaan ini dihantar menggunakan kaedah OPTIONS dan mengandungi pengepala berikut:

• Asal: sama seperti permintaan mudah; -Request-Method : Minta kaedah yang anda mahu gunakan;

Access-Control-Request-Headers: (Pilihan) Senarai pengepala tersuai yang dipisahkan koma untuk digunakan;

4. API Ambil

API Ambil boleh melaksanakan semua tugas objek XMLHttpRequest, tetapi lebih mudah digunakan, mempunyai antara muka yang lebih moden dan boleh digunakan dalam web alatan seperti benang pekerja web. XMLHttpRequest boleh memilih untuk menjadi tidak segerak, manakala API Ambil mestilah tidak segerak.

Kaedah fetch() didedahkan dalam skop global, termasuk utas pelaksanaan halaman utama, modul dan utas pekerja. Memanggil kaedah ini menyebabkan penyemak imbas menghantar permintaan ke URL yang diberikan.
• 1. Permintaan penghantaran

  fetch() hanya mempunyai satu input parameter yang diperlukan. Dalam kebanyakan kes, parameter ini ialah URL untuk mendapatkan sumber dan kaedah ini mengembalikan tarikh:

  let r = fetch('/bar');console.log(r);//Promise<pending></pending>

  URL的格式（相对路径、绝对路径等）的解释与XHR对象一样。
  请求完成、资源可用时，期约会解决一个Response对象，这个对象是API的封装，可以通过它取得相应资源。获取资源要使用这个对象的属性和方法，掌握响应的情况并将负载均衡转为有用的形式。
  2、读取响应
  读取响应内容的最简单方式是取得纯文本格式的内容，只要用到text()方法。这个方法返回一个期约，会解决为取得资源的完整内容。
  3、处理状态码和请求失败
  Fetch API 支持通过Response的status和statusText属性检查响应状态。成功获取响应的请求通常会产生值为200的状态码。
  4、常见Fetch请求模式

  • 发送JSON数据

  • 在请求体中发送参数

  • 发送文件

  • 加载Blob文件

  • 发送跨域请求

  • 中断请求

  五、websocket

  套接字websocket的目标是通过一个长时连接实现与服务器全双工、双向的通信。在JavaScript中创建websocket时，一个HTTP请求会发送到服务器以初始化连接。服务器响应后，连接使用HTTP中的Upgrade头部从HTTP协议切换到websocket协议，这意味着websocket不能通过标准HTTP服务器实现，而必须使用支持该协议的专有服务器。
  因为websocket使用了自定义协议，所以URL方案稍有变化，不能再使用http://或https://，而要使用ws://和wss://。前者是不安全的连接，后者是安全连接。在执行websocket URL时，必须包含URL方案，因为将来有可能再支持其他方案。
  使用自定义协议而非HTTP协议的好处是，客户端与服务器质检可以发送非常少的数据，不会对HTTP造成任何负担。使用更小的数据包让websocket非常适合宽带和延迟问题比较明显的移动应用。使用自定义协议的缺点是，定义协议的时间比定义JavaScript API的时间要长，websocket得到了所有主流浏览器的支持。

  六、JavaScript思维导图

  
  

  【相关推荐：javascript视频教程、web前端】

Atas ialah kandungan terperinci Analisis terperinci JavaScript permintaan rangkaian dan sumber jauh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!