网页中如何请求数据

网页要请求服务器的数据资源，则需要用到XMLHttpRequest对象。

最简单的使用方法：var xhrObj = new XMLHttpRequest();

什么是Ajax

Ajax是异步JavaScript和XML。通俗的讲：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax

jQuery中发起Ajax请求最常用的三个方法

• $.get()获取数据

  $.get(url, [data], [callback]);
  // url 字符串类型数据 要请求的资源地址 必选
  // data 对象类型数据 请求资源期间要携带的参数
  // callback 函数类型数据  请求成功时的回调函数
  
  // 实例
  $.get("http://www.liulongbin.top:3006/api/getbooks", function (res) {
            console.log(res)
          }); // 发起不带参数的GET请求
  
  $.get("http://www.liulongbin.top:3006/api/getbooks", {id:1}, function (res) {
            console.log(res)
          }); // 发起带单参数的GET请求

• $.post()发送数据

  $.post(url, [data], [callback]);
  // data 对象类型参数 要提交的数据
  
  // 实例
  $.post('http://www.liulongbin.top:3006/api/addbook', // 请求的url地址
         { // 提交的数据
            bookname: '意林',
            author: '佚名',
            publisher: '清华出版社'
          }, function (res) {
            console.log(res); // 回调函数
          });

• $.ajax()既可获取数据也可发送数据
  它允许我们对Ajax请求进行更详细的配置。

  $.ajax({
      type: '', // 请求的方式 GET或者POST
      url: '',  // 请求的url地址
      data: '', // 这个请求要携带的数据
      success: function(res) {} // 请求成功之后的回调函数
  })
  
  // 实例
  // 使用$.ajax()发起GET请求
   $.ajax({
            type: 'GET',
            url: 'http://www.liulongbin.top:3006/api/getbooks',
            data: {
              id: 1
            },
            success: function (res) {
              console.log(res);
            }
          })
  
  // 使用$.ajax()发起POST请求
  $.ajax({
            type: 'POST',
            url: 'http://www.liulongbin.top:3006/api/addbook',
            data: {
              bookname: 'Ajax',
              author: 'Everyone',
              publisher: 'World'
            },
            success: function (res) {
              console.log(res);
            }
          })