JavaScript AJAX XMLHttpRequest

Question

Im bir sunucu yanıtı okumak için ve ben sayfamda stil ekleyebilirsiniz böylece sunucu tarafından verilen bilgilere filtre etmek istiyorum.

http://www.omdbapi.com/?t=pulp+fiction&y=&plot=short&r=json 

Ve bu bilgiyi alır: Aşağıdaki API çağrısı sunulmuştur Sadece bilgi Başlık ve Runtime göstermek için, o yanıttan bilgilere filtre gerekir

{"Title":"Pulp Fiction","Year":"1994","Rated":"R","Released":"14 Oct 1994", 
"Runtime":"154 min","Genre":"Crime, Drama","Director":"Quentin Tarantino", 
"Writer":"Quentin Tarantino (story), Roger Avary (story), Quentin Tarantino", 
"Actors":"Tim Roth, Laura Lovelace, John Travolta, Samuel L. Jackson",...} 

<p id="Title">Movie title!</p> 
<p id="Runtime">Movie runtime!</p> 

api'sine çağrısıdır:

xhttp.open("GET", "http://www.omdbapi.com/?t=pulp+fiction&y=&plot=short&r=json"+str, true); 
xhttp.send(); 

Çok sayıda şey okudum ama istediğim gibi çalışamıyorum, bazı yardımları hak etsin! Teşekkür

Answer 1

Kısa cevap:

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState == XMLHttpRequest.DONE) { 
    // Step 1 below 
    var fullMovie = JSON.parse(xhr.responseText); 
    // Step 2 below 
    var movie = { title: fullMovie.Title, runtime: fullMovie.Runtime }; 
    // Step 3 below 
    document.getElementById('Title').innerText = movie.title; 
    document.getElementById('Runtime').innerText = movie.runtime; 
    } 
} 
xhr.open('GET', 'http://www.omdbapi.com/?t=pulp+fiction&y=&plot=short&r=json', true); 
xhr.send(null); 

Running örnek:

https://jsfiddle.net/mgjyv3q6/1/ Şimdi, "Uzun cevap", temelde var:

1. JSON olarak response veya responseText Ayrıştırma.
2. İstenen alanlara sahip yeni bir nesne oluşturun.
3. UI'de alınan bilgileri render edin.

Ayrıca, DOM manipulasyonu ve AJAX istekleri konusunda size yardımcı olması için jQuery veya başka bir kitaplık kullanmaya başlamayı düşünmelisiniz.