Ajax常用库

jQuery中的ajax方法

参考链接

http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

$.ajax()

常用选项参数介绍：

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

$.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() 快捷方法发送请求
    $.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 删除
  无需传参，data，dataType

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

jQuery其他的方法

• $.ajaxSetup()....等等

  
  
  通过查阅上文链接文档自行学习

举个例子：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 封装库
• 地址：

https://unpkg.com/axios/dist/axios.min.js

• 使用script标签引入

体验axios

    // 体会 get 请求
    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可选

  
  
  常用配置项

全局配置默认值

• 可以指定将被用在各个请求的配置默认值

  
  
  比如

    // 全局配置默认值
    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)
    })

axios方法的参数

直接写在里面

拦截器

• 在请求或响应被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)
    })
    

快速请求方法get和post

XMLHttpRequest 2.0

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

onload / onprogress

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

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);