前端学习-AJAX常用库

jQuery 中的 AJAX

jQuery 中有一套专门针对 AJAX 的封装，功能十分完善

$.ajax()

• 常用选项参数介绍:
• url:请求地址
• type:请求方法，默认为 get
• dataType:服务端响应数据类型
• contentType:请求体内容类型，默认 application/x-www-form-urlencoded
• data:需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递
• timeout:请求超时时间
• beforeSend:请求发起之前触发
• success:请求成功之后触发(响应状态码 200)
• error:请求失败触发
• complete:请求完成触发(不管成功与否)

$.ajax({
    url: "http://localhost:3000/posts",
    type: "get",
    dataType: "json",
    data: {"id": 2},
    beforeSend: function (xhr) {
      console.log("before send");
    },
    success: function (data) {
      console.log(data);
    },
    error: function (xhr) {
      console.log(xhr);
    },
    complete: function (xhr) {
      console.log(xhr);
    }
});

$.get()

• GET 请求快捷方法
• $.get(url, data, callback)

$.get("http://localhost:3000/comments", {"id": 1}, function (data) {
  console.log(data);
})

$.post()

• POST 请求快捷方法
• $.post(url, data, callback)

$.post("http://localhost:3000/comments", {"postId": 3, "content": "bad"},function (data) {
  console.log(data);
})

其他请求

• put 更改

// put 请求，更改数据
$.ajax({
   url: "http://localhost:3000/comments/4",
   type: "put",
   dataType: "json",
   data: {"content": "good", "postId": 2},
   success: function (data) {
     console.log(data)
   }
})

• delete 删除

// delete 请求，删除数据
$.ajax({
  url: "http://localhost:3000/comments/5",
  type: "delete",
  success: function (data) {
    console.log(data)
  }
})

jQuery 中其他 Ajax 方法

$.ajaxSetup()

// ajaxSetup() 方法，设置默认的参数
$.ajaxSetup({
  url: "http://localhost:3000/users",
  type: "post"
})
// 发送 ajax请求
$.ajax({
  data: {"name": "polly", "age": 17, "class": 4}
})
$.ajax({
  data: {"name": "james", "age": 18, "class": 4}
})

Axios

Axios 是目前应用最为广泛的 AJAX 封装库

axios.get("http://localhost:3000/posts")
.then(function (response) {
    console.log(response.data)
})
.catch(function (error) {
    console.log(error)
})

Axios API

• 可以通过向 axios() 传递相关配置来创建请求
• axios(config) config为对象格式的配置选项
• axios(url, config) config 可选

常用配置项

• url
• method
• baseURL
• headers
• params
• data
• timeout
• responseType 表示服务器响应的数据类型，默认 “json”

then 和 catch

axios()
.then(function (response) {
//正常请求的响应信息对象 response
})
.catch(function (error) {
//捕获错误
})

axios({
  url: "/comments",
  method: "post",
  baseURL: "http://localhost:3000",
  headers: {
    "Content-Type": "application/json"
  },
  timeout: 1000,
  data: {
    "postId": 3,
    "content": "better"
  }
}).then(function (res) {
  console.log(res.data)
}).catch(function (error) {
  console.log(error)
})

axios("http://localhost:3000/posts", {
  params: {
    id: 1
  }
})
.then(function (res) {
  console.log(res.data)
})
.catch(function (error) {
  console.log(error)
})

全局配置默认值

• 可以指定将被用在各个请求的配置默认值
• axios.defaults.baseURL = 'api.example.com';
• axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 全局配置默认值
axios.defaults.baseURL = "http://localhost:3000";
// axios 方法
axios({
  url: "/comments",
  method: "get"
}).then(function (res) {
  console.log(res.data)
}).catch(function (error) {
  console.log(error)
})

拦截器

• 在请求或响应被 then 或 catch 处理前拦截它们。

// 使用拦截器，对请求进行拦截处理
axios.interceptors.request.use(function (config) {
  config.params = {
    id: 2
  }
  config.baseURL = "http://localhost:3000"
  return config
})

// 对响应进行拦截
axios.interceptors.response.use(function (response) {
  return response.data;
})

// axios 方法    
axios("/posts")
.then(function (res) {
  console.log(res)
})
.catch(function (error) {
  console.log(error)
});
axios("/comments")
.then(function (res) {
  console.log(res)
})
.catch(function (error) {
  console.log(error)
})

快速请求方法

• axios.get(url[, config])
• axios.post(url[, data[, config]])
• axios.delete(url[, config])
• axios.put(url[, data[, config]])

// get 请求
axios.get("http://localhost:3000/users?id=2")
   .then(function (res) {
     console.log(res.data)
})

axios.get("http://localhost:3000/users",{
   params: {
     id: 3
   }
})
.then(function (res) {
     console.log(res.data)
})

// post 请求 ，添加数据
axios.post("http://localhost:3000/users",{
  "name": "nancy",
  "age": 19,
  "class": 2
})
.then(function (res) {
  console.log(res.data)
})

XMLHttpRequest 2.0

HTML5 中对 XMLHttpRequest 类型全面升级，更易用，更强大

onload / onprogress

• xhr.onload 事件:只在请求完成时触发
• xhr.onprogress 事件:只在请求进行中触发

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:3000/posts");
xhr.onload = function () {
  console.log("load",this.readyState)
}
xhr.onprogress = function (e) {
  console.log("progress",this.readyState)
  // 在周期性请求过程中，接收到的数据的个数
  console.log(e.loaded);
  // 接收数据的总个数
  console.log(e.total);
}
xhr.send(null);

response 属性

• 以对象的形式表述响应体，其类型取决于 responseType 的值。你可以尝试设置 responseType 的值，以便通过特定的类型请求数据。
• responseType 要在调用 open() 初始化请求之后，在调用 send() 发送请求到服务器之前 设置方可生效。

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:3000/posts");
xhr.responseType = "json";
xhr.onload = function () {
  console.log(this.response);
}    
xhr.send(null);