不知道如何使用AJAX

我很新。我讀過書籍來學習JavaScript和HTML，所以很遺憾我沒有學到太多的東西。不知道如何使用AJAX

我以前從未使用AJAX，所以不知道它是如何工作的，在線搜索，但找到所有例子太複雜。

基本上我想要做的是保存播放列表（雖然不是用cookie）。每個人都可以看到並添加到它（類似於評論部分）。這只是一個例子，我正在做其他事情，但html + js會有點大。只是想知道我會如何做到這一點，以便我能夠理解它（希望）並將它應用到其他地方。

這將是身體和它下面的代碼，我有（目前我所有的代碼是在[主治]）：

<body> 
    <form> 
     <input type="text" id="songInput" size="40" placeholder="Song Name"> 
     <img id="addButton" src="button.png"> 
    </form> 
    <ul id="playlist"></ul> 
</body> 

<script> 
    window.onload = load; 
    function load() { 
     var button = document.getElementById("addButton"); 
     button.onclick = buttonClick; 
    } 
    function buttonClick() { 
     var text = document.getElementById("songInput"); 
     var song = text.value; 
     var button = document.getElementById("addButton"); 
     var add = document.createElement("li"); 
     add.innerHTML = song; 
     var ul = document.getElementById("playlist"); 
     ul.appendChild(add); 
    } 
</script>

來源

2014-08-29 Roberto Chaves

那麼，你嘗試谷歌嗎？有很多使用AJAX的例子 - [lmgtfy]（http://bit.ly/17JgvGE） – Vucko 2014-08-29 06:02:57

所以你有一個背面的某種數據庫？我建議你看看這個：https：//togetherjs.com/。這就像它變得簡單一樣。另一個技巧是使用jQuery進行Ajax和dom操作，因爲它非常簡單易學，而且互聯網充滿了jQuery的技巧和竅門。 – 2014-08-29 06:15:16

通過這個網頁，有很多的例子。請谷歌。 – Leo 2014-08-29 06:17:10

首先，你必須瞭解AJAX是什麼。 AJAX不是您可以使用的「工具」，相反，它是該技術的名稱（異步JavaScript + XML）。基本上這意味着「從/到服務器獲取/發佈數據」。

在Vallina酒店的JavaScript，XMLHttpRequest讓您發送和接收數據，並從服務器：

var xhr = new XMLHttpRequest();   //Create an XMLHttpRequest object 
xhr.open('get', url);     //Set the type and URL 
xhr.onreadystatechange = function(){  //Tell it what to do with the data when state 
             // changes 
    if(xhr.readyState === 4){   //4 is the code for "finished" 
     if(xhr.status === 200){   //Code 200 means "OK" 
      //success 
      var data = xhr.responseText; //Your data 
     }else{ 
      //error      //Deal with errors here 
     } 
    } 
}; 
xhr.send(null);       //After finished setting everything, send the 
             // request. null here means we are not send- 
             // ing anything to the server

它看起來複雜，xhr被重複了很多。更何況we have to deal with when executing in IE的問題。

有解決方案。我們將使用圖書館來簡化流程，並讓它爲我們完成艱苦的工作。

In jQuery，這是你必須做的一個基本XMLHttpRequest什麼：

$.ajax({ 
    url: url, 
    data: { /*data here*/ }, 
    type: /*"GET" or "POST"*/ 
}).done(function(data){ 
    //success 
}).fail(function(){ 
    //error 
}); 
//Not complicated at all with jQuery

由於AJAX是一組技術來發送/接收數據，還有更多的是如何做「相同」事情。您可能會意識到上面的代碼僅適用於具有相同域的URL（服務器上的頁面）。爲了繞過這個限制，還有另一種叫做JSONP的技術。聽起來很花哨，但它意味着什麼只是「使用<script>標籤來通過該限制」。當然，jQuery的一應俱全：

$.ajax({ 
    url: url, 
    data: { /*data here*/ }, 
    type: /*"GET" or "POST"*/, 
    dataType: "JSONP"    //specifying dataType to be JSONP 
}).done(function(data){ 
    //success 
});

這裏是獲得使用JSONP關閉維基百科的內容的一個簡單的例子：http://jsfiddle.net/DerekL/dp8vtjvt/
與正常XMLHttpRequest調用Wikipedia's server是行不通的。然而，通過利用script tags are not restricted by the Same-Origin Policy這個事實，我們可以實現同樣的事情。請注意，要使JSONP正常工作，必須在內部對服務器進行編程，以允許通過包裝回調呼叫返回JSON。

來源

2014-08-29 06:17:41

不知道如何使用AJAX

回答

相關問題