如何做出请求
1 .首先从一个URL开始,毕竟,我们要告诉浏览器到哪里找我们要的数据:
var url="http://someserver.com/data.json";
2.接下来使用XMLHttpRequest构造函数创建一个请求对象:
var request=new XMLHttpRequest();
3.下面我们要告诉这个请求对象我们希望它获取哪个URL,以及要使用哪种请求。为此,我们使用了请求对象的open方法,用一个URL建立一个请求,并告诉这个请求对象要使用哪种请求:
request.open("GET",url);
4.最后当XMLHttpRequest对象获取数据时,我们不会一直等待数据,而是会提供一个处理程序,当数据到达时就会调用这个处理数据,如下建立处理程序:
request.onload=function() {
if (request.status==200) {
func(request.responseText);//处理函数
};
但是较老的版本的浏览器不支持XMLHttpRquest onload属性,可以使用XMLHttpRequest level 1版本的onreadystatechang属性:
function init() {
var url = "http://localhost/gumball/sales.json";
var request = new XMLHttpRequest();
request.open("GET", url);
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
func(request.responseText);
}
};
request.send(null);
}
5.最后一步,要告诉请求对象去获取数据,为此要用send方法:
request.send(null);
//这会把请求发送到服务器,如果不打算向远程服务器发送任何数据,就要传入Null
最后完整的代码如下:
window.onload=function(){
var url="http://someserver.com/data.json";
var request=new XMLHttpRequest();
request.open("GET", url);
request.onload=function(){
if(request.status==200){
func(request.responseText);
}
};
request.send(null);
}
//处理函数
func(request.responseText) {
//
}
JSON和JSONP
在上面的请求对象中我们使用了JSON,JSON是这一种脱胎于JavaScript的数据格式,人们用它在网络上交换JavaScript数据,用Web存储API将数据存储到一个本地存储库,同时它还是一种访问Web数据的方法的重要部分。JSON有两个简单的方法调用:当你有一个想要交换或者存储的JavaScript对象时,我们可以调用JSON.stringify方法,把这个对象作为实参传入:JSON.srtingify(movie)
,结果是表示这个对象的一个字符串,可以保存这个字符串,把它传给一个函数或者通过网络发送,当需要把这个字符串转换回一个对象时,需要使用JSON.parse方法:JSON.parse(jsonString)
结果返回原始对象的一个副本。
在使用XMLHttpRequest HTTP请求时经常会遇到跨域问题。浏览器出于安全考虑,不允许你对原先提供页面的域以外的其他域发出XMLHttpRequest请求。这个时候我们还有一种基于JSON的方法,称为JSONP。
JSONP是一种使用<script>
标记获取JSON对象的方法,通过在HTML文件里添加一个<script>
元素,这个script的源是一个Web服务器的URL,这个Web服务器将为我们提供JSON数据,浏览器在加载script元素时,向URL发送一个HTTP请求,在服务器发回JSON数据之前,首先要把它包装在一个函数调用中,我们通过指定在URL末尾增加一个参数:
var url="http://gumball.wickedlysmart.com/?callback=func" //一个存储JSON数据的服务器
使用callback参数回调函数func包装这个JSON格式化对象,使用JSONP返回得到的解析好的JS对象。