浏览器如何向服务器发出请求

如何做出请求

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对象。