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标签引入

  <script src="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可选

  
  常用配置项

 <script>
    // axios 方法
    axios({
      url: "/comments",
      method: "post",
      baseURL: "http://localhost:3000",
      // 请求为post的时候可以不设置headers，默认为json
      headers: {
        "Content-Type": "application/json"
      },
      timeout: 1000,
      // params是设置给get和delete的
      // params : {
      //   id : 1
      // },
      data: {
        "postId": 3,
        "content": "better"
      }
    }).then(function (res) {
      console.log(res.data)
    }).catch(function (error) {
      console.log(error)
    })
  </script>

全局配置默认值

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

  
  比如

    // 全局配置默认值
    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方法的参数

直接写在里面

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

拦截器

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

 <script>
    // 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
      }
    })
    // get方法要写then，因为后续会继续使用get拿到的数据
      .then(function (res) {
        console.log(res.data)
      })

    // post 请求 ，添加数据
    axios.post("http://localhost:3000/users",{
      "name": "nancy",
      "age": 19,
      "class": 2
    })
    //post方法可以不写then，因为用不到
    .then(function (res) {
      console.log(res.data)
    })
    
  </script>

XMLHttpRequest 2.0

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

onload / onprogress

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

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

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