前面的视频里我们直接使用浏览器或者浏览器的插件向服务发送 HTTP 请求。在真正的应用里,需要使用脚本去发送请求,也就是使用 JavaScript 的代码来发送 HTTP 请求。
可以使用 AJAX,我们先要创建一个 XMLHttpRequest 这个对象的实例,然后用这个新创建的对象的 open() 方法去发送 HTTP 请求,设置一下请求的方法,地址,验证一下请求的状态,成功以后,我们就可以去使用响应回来的数据了。
另外,用 send() 方法,可以向服务器发送数据。
jQuery 里面提供了比较容易的方法去使用 AJAX,下面,我们可以一起来看一下使用 jQuery 的 ajax 方法来发送 HTTP 请求 ..
代码
打开应用的 index.js 这个文件 .. 输入 $.ajax(); ... 意思就是去调用 jQuery 的 ajax 这个方法 ... 下面要去配置一个这个方法里面的一些设置,这个设置是一个对象,所以,先输入一组花括号 ...
$.ajax({});
首先,可以指定一下想要请求的地址 ... 这个地址属性是 url ... 后面加上具体的地址 ..
url: http://127.0.0.1/drupal/myservice/node/1,
不同的属性之间用逗号分隔一下 ... 再设置请求的类型,也就是请求的方法... 这个属性是 type .... 把它设置成 GET ...
type: 'GET',
现在,这段代码的意思就是,使用 HTTP 的 GET 方法,去请求 http://127.0.0.1/drupal/myservice/node/1 这个地址 ... 如果请求成功的话,会去执行一个函数 ... 这个函数就是 success 属性里面定义的 ....
success: function (data) {},
这里我们用一个匿名函数 ... 请求成功以后,会返回一个响应回来的数据的对象,这个对象可以作为这个函数的一个参数 .... 这样在这个函数里面,我们可以去处理这个返回来的对象。
先用一个简单的 console.log ... 把这个对象输出到控制台上 ..
console.log(data);
测试
保存一下,回到浏览器 ... 然后打开应用的首页 ... 在控制台上,你会看到返回来的结果... 是一个 xml 文档 ...
在请求的时候,可以设置一下 ajax 方法里的 dataType 数据,去指定一下想要得到的返回来的数据的类型 ... 回到 index.js ... 输入一个 dataType ... 把这个属性的值设置成 json ...
dataType: 'json',
保存 ... 再回到浏览器 ... 刷新 ...
你会发现,现在给我们返回来的结果是一个对象 ... jQuery 的 ajax 方法自动把返回来的 json 数据转换成 JavaScript 的对象 ...