Question

我对此非常陌生。我读过书来学习javascript和HTML，所以不幸的是我还没有对此有所了解。

我之前从未使用过AJAX，所以不确定它是如何工作的，在线搜索，但发现所有的例子都太复杂了。

基本上我想要做的是保存一个播放列表（虽然没有使用cookie）。每个人都可以看到和添加的东西（类似于评论部分）。这只是一个例子，我正在做其他事情，但html + js会有点大。只是想知道我将如何做到这一点，以便我能理解它（希望如此）并将其应用到其他地方。

这将是正文，在它下面是我的代码（目前我的所有代码都在[head]中）：

<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>

Answer 1

首先，您必须了解AJAX是什么。 AJAX不是一个＆＃34;工具＆＃34;相反，你可以使用它，它是技术的名称（异步JavaScript + XML）。基本上它意味着从/向服务器获取/发布数据。＆＃34;

在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是一组发送/接收数据的技术，因此有更多方法可以实现＆＃34;相同＆＃34;事情。您可能会意识到上面的代码仅适用于具有相同域（服务器上的页面）的URL。为了绕过这个限制，还有另一种称为JSONP的技术。听起来很奇特，但它意味着简单地使用<script>标签来传递那个限制＆＃34;。当然，jQuery让你满意：

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

以下是使用JSONP从Wikipedia获取内容的简单示例：http://jsfiddle.net/DerekL/dp8vtjvt/
对Wikipedia's server进行正常的XMLHttpRequest调用是行不通的。然而，通过利用script tags are not restricted by the Same-Origin Policy我们可以实现同样的事实。请注意，要使JSONP正常工作，必须在内部对服务器进行编程，以允许返回带有回绕调用的JSON。

不知道如何使用AJAX

1 个答案: