jQuery中的Ajax

• jQuery中有一套专门针对Ajax的封装，功能十分完善。
• 自学地址：www.w3school.com.cn/jquery/jque…

$.ajax()常用选项参数介绍

• 功能：通过 HTTP 请求加载远程数据。
• 返回值：$.ajax() 返回其创建的 XMLHttpRequest 对象

url: 请求地址

type：请求方法，默认为get

dataType: 服务端响应数据类型

contentType：请求体内容类型(存在默认值)

• 默认：`application/x-www-form-urlencoded`

data: 需要传递到服务端的数据 (必须是key value形式的数据)

• 如果GET则通过URL传递
• 如果POST则通过请求体传递

timeout：请求超时时间

• 设置请求超时时间（毫秒 ms 1000ms = 1s）

beforeSend：请求发送之前触发

• 在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。

success：请求成功之后触发（响应状态码200）

• success方法参数
  • 1.由服务器返回
  • 2.根据dataType参数进行处理后的数据。这样就不用自己去调用JSON.parse()去转换了。
  • (类对象数组，通过下标的不同存储多个对象)

error：请求失败触发

• 在请求出错时调用。
• 传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）
• 注意：
  • 当我们输入下标越界的时候，返回的是一个长度为0的空数组，并没有执行error函数。因为下标超过，其实是发送请求成功了，只是结果为空而已。
  • error函数只有在传递的url错误的时候，才会被触发。

complete：请求完成触发（不管成功与否，都会触发）

• 当请求完成之后调用这个函数，无论成功或失败。
• 传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。

代码演示

$.ajax({
    url:"http://localhost:3000/posts",
    type:"get",
    dataType:"json",
    contentType:"application/x-www-form-urlencoded",
    // 类型：String 查看 processData 选项说明以禁止此自动转换。
    // 必须为 Key/Value 格式。
    data:{"id":5},
    timeout: 1000,
    // 回调函数
    beforeSend: function (xhr){
        console.log("before send");
    },
    success: function (data){
        console.log(data);
    },
    error: function (xhr){
        console.log("error:" + xhr);
    },
    complete: function (xhr){
        console.log("请求完成");
    }
});

状态码

• 为了保证数据顺利取到 且 可用：readyState = 4 & status = 200;
• 500: 服务器端出现错误
• 304：不是从服务器中取数据 而是 从缓存中读取的数据
• 201: 资源已创建

GET请求

$.get()

• GET请求快捷方法
• $.get(url,data,callback,dataType)
  • url必须有,data\callback\dataType都可以省略
  • 回调函数有三个参数：response status xhr
• 代码演示

$.get("http://localhost:3000/posts",{"id":2},function (data){
    // 请求成功 回调函数
    console.log(data);
});

POST请求

$.post()

• POST请求快捷方法
• $.post(url,data,callback,dataType)
  • dataType可省略
• 代码演示

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

其他请求

put 更改

• put方法，传递的url必须是筛选后的一个
• data传递需要修改的内容，修改的过程中不是只修改一个，而是将这一个里面的所有属性全部替换。
• 代码演示

// put更改
$.ajax({
    url:"http://localhost:3000/comments/4",
    type:"put",
    dataType:"json",
    data:{content:"bad",postId:3},
    // 回调函数
    success:function (data){
        console.log(data);
    }
});

delete 删除

// delete删除
$.ajax({
    url:"http://localhost:3000/comments/4",
    type:"delete",
    dataType:"json",
    success:function (data){
        console.log(data);
    }
});

jQuery中其他Ajax方法

• 其他多种方法自学网址：www.w3school.com.cn/jquery/jque…

举例：$.ajaxSetup()

• 功能：为所有 AJAX 请求设置全局 AJAX 默认选项。
• 语法：jQuery.ajaxSetup(name:value, name:value, ...)
• 代码演示

// jQuery中的其他ajax方法
$.ajaxSetup({
    url:"http://localhost:3000/comments",
    type:"post",
    success:function (data){
        console.log(data);
    }
});

// 发送post请求
// 只需要传递需要传入的参数即可
$.ajax({
    data:{postId:3,content:"sad"}
});
$.ajax({
    data:{postId:1,content:"perfect"}
});