XMLHttpRequest VS. JSONP

来源：互联网发布：软件著作权代理费编辑：程序博客网时间：2024/05/24 07:38

当我们利用XMLHttpRequest对象从本地服务器获取数据时是可以的。

假设我们使用的数据格式为JSON(JavaScript Object Notation)，并且我们在本地服务器上部署了一个样本数据data.json:

[plain] view plain copy
{  
"completed_in":0.044,  
"max_id":306750251744784385,  
"max_id_str":"306750251744784385",  
"page":1,  
"query":"hfhtml5",  
"refresh_url":"?since_id=306750251744784385&q=hfhtml5",  
"results":[],  
"results_per_page":15,  
"since_id":0,  
"since_id_str":"0"  
}  

好了，有了数据，我们试着编写一个简单的页面文件来获取该数据：（该页面文件和data.json位于同一目录下）

[html] view plain copy
<!doctype html>  
<html lang="en">  
<head>  
    <title>Using Canvas</title>  
    <meta charset="utf-8" />  
    <script>  
          
        function createList(attribute) {  
            var element = document.createElement("li");  
            element.innerHTML = attribute;  
            var list = document.getElementById("list");  
            list.appendChild(element);  
        }  
        var request = new XMLHttpRequest();  
        request.open("GET", "data.json");  
        request.onload = function() {  
            if(request.status == 200) {  
                  
                var text = request.responseText;  
                var object = JSON.parse(text);  
                createList("completed_in:" + object.completed_in);  
                createList("max_id:" + object.max_id);  
                createList("max_id_str:" + object.max_id_str);  
                createList("page:" + object.page);  
                createList("refresh_url:" + object.refresh_url);  
                createList("results:" + object.results);                  
            }  
        };  
        request.send(null);  
    </script>  
</head>  
<body>      
    <ul id="list">  
      
    </ul>  
</body>  
</html>  

页面确实返回了我们从本地服务器获取的数据，我们对其进行了解析。（我们从XMLHttpRequest对象的属性responseText是json字符串，如果需要将其封装成对象，可以使用JSON.parse方法，如果想将对象字符串化，可以使用parse的对称方法JSON.stringnify。)

现在Web Services很流行，它们可以为我们提供需要的数据，比如实时天气信息，比如公交信息，比如其它用户感兴趣的内容。

好了，Twitter为我们提供了一个数据源URL: http://search.twitter.com/search.json?q=hfhtml5 (有些地方需要翻墙。需要的密我)

其实它的内容和data.json文件一样:

现在我们来修改一下页面文件，我们使用外部服务器(相对本地服务器而言)来获取数据：

其实只需要修改open方法的第二个参数url：

[javascript] view plain copy
request.open("GET", "http://search.twitter.com/search.json?q=hfhtml5");  

重新加载该页面：

咦？页面怎么是空白的。到底怎么回事呢？如果你用的是Google Chrome浏览器的话，可以借助自带的JavaScript控制台(Ctrl+Shift+J)查看哪里出错了。

原因找到了，因为XMLHttpRequest对象不允许跨服务器发送请求，因此该请求被拒绝，外部服务器根本就不知道有请求发送给它。这属于一个跨域安全问题(Cross-Domain Security Issues)。

那么该怎么办呢？既然XMLHttpRequest因为考虑到安全性不允许发送请求到外部服务器，只好寻找其它的办法。

想必大家看过文章标题的都应该猜出，我们可以使用JSONP ( JSON with Padding)。

在讲JSONP之前，先看看几个和JS有关的简单例子:

http://wickedlysmart.com/hfhtml5/chapter6/dog.js 这个URL(无需翻墙)返回的是一个JS文件，它的内容很简单，就是

alert("woof");

我们编写一个简单的本地服务器页面来加载该JS文件。

[html] view plain copy
<!doctype html>  
<html lang="en">  
<head>  
    <title>Using Canvas</title>  
    <meta charset="utf-8" />  
  
</head>  
<body>      
    <script src="http://wickedlysmart.com/hfhtml5/chapter6/dog.js"></script>  
</body>  
</html>  

在body标签内部添加了一个script标签，该标签的src属性指向了外部服务器的js文件。

访问该页面后：

这说明了什么？说明了通过加载外部服务器的js文件，可以调用本地浏览器的内置对象的方法(比如window.alert方法)

再继续：

http://wickedlysmart.com/hfhtml5/chapter6/dog2.js 该js文件的内容是:

animalSays("dog", "woof");

怎么让该方法被调用呢？我们可以在本地页面创建该函数：

[html] view plain copy
<!doctype html>  
<html lang="en">  
<head>  
    <title>Using Canvas</title>  
    <meta charset="utf-8" />  
    <script>  
        function animalSays(name,bark) {  
            alert(name + ":" + bark);  
        }  
    </script>  
</head>  
<body>      
    <script src="http://wickedlysmart.com/hfhtml5/chapter6/dog2.js"></script>  
</body>  
</html>  

我们增加了一个自定义函数animalSays，该函数接受两个参数，一个是动物名字，一个是动物叫声，另外我们把script标签的属性也修改成另外一个文件。

试着刷新下页面：

看到效果了吧！

好了，有了以上的基础，我们就可以实现从外部服务器获取我们需要的数据了。

只要在外部服务器中生成json数据格式，然后传递给指定的函数即可。

比如：http://wickedlysmart.com/hfhtml5/chapter6/dog3.js 它的内容是

var animal = { "type": "dog", "sound": "woof" };animalSays(animal);

我们想要得到该外部服务器上的数据，于是编写了该页面文件：

[html] view plain copy
<!doctype html>  
<html lang="en">  
<head>  
    <title>Using Canvas</title>  
    <meta charset="utf-8" />  
    <script>  
        function animalSays(animal) {  
            var type = animal.type;  
            var sound = animal.sound;  
            alert("type:" + type + ",sound:" + sound);  
        }  
    </script>  
</head>  
<body>      
    <script src="http://wickedlysmart.com/hfhtml5/chapter6/dog3.js"></script>  
</body>  
</html>  

这里传递的是animal对象，该对象包含type和sound属性。（记得修改script标签的属性值)

刷新下页面：

哈哈，看到了吧，外部服务器端的数据就这样轻松的获取到了。

有个问题，外部服务器怎么知道我们本地服务器页面的函数名呢？

我们可以通过URL来指定：

http://search.twitter.com/search.json?q=hfhtml5&callback=myCallback

我们可以指定callback的值来告诉外部服务器本地页面的函数名字。

看到没有，该js的函数名就是URL尾部指定的名字

需要注意的是，使用JSONP存在安全问题，除非我们信任这些网站，比如Twitter,Facebook,google，否则请不要轻易加载它们的数据文件。而XMLHttpRequest则比JSONP更加安全，但是访问外部服务器受限。

0 0