Condivisione della tecnologia

Cos'è AJAX? Formato di sintassi nativo? Qual è la differenza tra jQuery che fornisce AJAX in pacchetto?

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Aiace nome e cognome JavaScript e XML asincroni (asincrono Javascript E Formato XML) 

AIACEÈ una tecnologia di sviluppo web per la creazione di applicazioni web interattive.La dipendenza più importante è l'oggetto XMLHttpRequest fornito dal browser. È questo oggetto che consente al browser di emettere HTTP Richiedi e ricevi HTTP risposta. Ottieni l'interazione con il server senza aggiornare la pagina.

Formato della sintassi AJAX nativa:

  1. let xhr = new XMLHttpRequest();
  2. xhr.open('get','js/index.json',true);
  3. xhr.send();
  4. xhr.onreadystatechange = function() {
  5. if (xhr.readyState == 4 && xhr.status == 200) {
  6. let text = xhr.responseText;
  7. console.log(text);
  8. let data = JSON.parse(text);
  9. console.log(data);
  10. }
  11. };
Come usare Ajax:
1. Crea un oggetto XMLHttpRequest
2. Utilizzare il metodo aperto per specificare l'indirizzo, il tipo e il metodo da richiedere.
3. Utilizzare il metodo send per inviare la richiesta. Se è necessario passare i parametri:
Il metodo get richiede l'unione dei parametri alla fine dell'URL e la suddivisione dei parametri. Esempio: 'index.php?name=张三&age=18'
Il metodo post può inserire parametri in send(). Esempio: send('nome=张三&età=18')
4. Associare l'evento onreadystatechange per determinare lo stato di readyState e status.
5. Ricevi dati e usali tramite la conversione json.

 

jQuery fornisce AJAX in pacchetto che è più veloce e adatto all'uso in progetti di sviluppo AJAX nativo è più facile da comprendere.

Formato della sintassi jQuery:

  1. $.ajax({
  2. type: "GET",
  3. url: 'js/exercise.json',
  4. data: {},
  5. headers:'',
  6. datatype:'',
  7. async:'',
  8. success: function(result) {
  9. console.log(result);
  10. data = result;
  11. },
  12. Error: function(e) {
  13. console.log(e.status);
  14. console.log(e.responseText);
  15. },
  16. });