JQuery中的ajax请求

前言

ajax:(阿贾克斯)，调用jquery的ajax比原生js版本要简单更多。

ajax分类：
    1）最传统的ajax
    2）JQ中封装了ajax
    3）vue react中也有对ajax的封装   axios

  ajax的作用：就是用来请求服务器，你可以给它当成成浏览器内部的一个小服务员。
  ajax的代码是写在客户端的，现在我们的客户端是浏览器，ajax是浏览器内部的一个对象。
  所以说，ajax需要把代码写在浏览器端。

ajax对象有这么几个状态：

    1）0  xhr对象创建完毕
    2）1  当调用了open方法，设置了连接，此时ajax的状态就变成了1
    3) 2  xhr已经开始接收到服务器给的数据  接收到数据都是需要解析的
    4）3  正在解析数据
    5）4  数据解析完毕  只有数据解析完毕了，我们才能获取数据  在代码我们想获取数据，必须等到ajax对象的状态变成4

常见的状态码：

    200 OK 服务端正常处理 响应了结果
    404 服务器端没有路由来处理此请求  找不到
    302 缓存 同一个url如果请求了服务器 响应的结果会被浏览器缓存下来 下次再次请求 会走浏览器的缓存
    500 服务器中的代码有错误

统一html页面代码：

 用户名：<input type="text" name="username" id="user"><span id="msg"></span>

1 jquery中的$get发送ajax请求

页面端JS部分：

       $(function () {
            $("#user").blur(function () {
                let username = $(this).val();
                // /check  表示向本服务器发请求 http://localhost:3000
                // $.get("http://localhost:3000/check");
                $.get("/check",{username},res=>{
                    // res就是服务器响应的结果
                    // console.log(res)
                    $("#msg").html(res.msg);
                })

            });
       })

JS文件：

let express = require("express");
let path = require("path");
let app = express();
// 托管静态资源
app.use(express.static(path.resolve(__dirname,"./public")))
app.get("/",(req,res)=>{
    // res.render("index");  // 渲染一个模板
    res.sendFile(path.resolve(__dirname,"./views/index.html")); // 读取文件，响应文件内容
})
let users = ["admin","wc","xq"];
app.get("/check",(req,res)=>{
    let username = req.query.username.trim();
    if(users.find(user=>user==username)){
        // 服务器端通常要返回一个json数据
        res.json({code:1,msg:"对不起，该用户名已经被注册~"});
    }else{
        res.json({code:0,msg:"恭喜你，该用户名可以使用"});
    }
})
app.listen(3000,()=>{
    console.log("3000 ok~")
})

2 jquery中的$post发送ajax请求

页面端JS部分：

       $(function () {
            $("#user").blur(function () {
                let username = $(this).val();
                // $.post表示发起一个post请求
                // {username}表示post请求携带的数据
                // res还是服务器响应的结果
                $.post("/check",{username},res=>{
                    // res就是服务器响应的结果
                    // console.log(res.msg)
                    $("#msg").html(res.msg)
                })

            });
       })

JS文件（此部分和get方法略微不同，需要使用body-Parser第三方模块）：

let express = require("express");
let bodyParser = require("body-parser");
let path = require("path");
let app = express();
// 托管静态资源
app.use(express.static(path.resolve(__dirname,"./public")))
// 配置body-parser
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:false}))

app.get("/",(req,res)=>{
    // res.render("index");  // 渲染一个模板
    res.sendFile(path.resolve(__dirname,"./views/index.html")); // 读取文件，响应文件内容
})
let users = ["admin","wc","xq"];
app.post("/check",(req,res)=>{
    // let username = req.query.username.trim(); // 此行代码是Get请求传递的数据
    let username = req.body.username.trim()
    if(users.find(user=>user==username)){
        // 服务器端通常要返回一个json数据
        res.json({code:1,msg:"对不起，该用户名已经被注册~"});
    }else{
        res.json({code:0,msg:"恭喜你，该用户名可以使用"});
    }
})
app.listen(3000,()=>{
    console.log("3000 ok~")
})

3 jquery中的$ajax发送ajax请求

$get和$post就是基于$ajax又一次封装的。
页面端JS部分：

       $(function () {
            $("#user").blur(function () {
                let username = $(this).val();
                // $.ajax 可以发送get请求，也可以发送post请求 或者别的请求
                // 前面讲的$.get和$.post也是基于$.ajax又进行封装的
                // ajax方法需要指定一个对象 在此对象中进行各种配置  此方法比较灵活
                $.ajax({
                    url:"/check",  // 请求的url
                    type:"post",  // 请求方式 可以是get...
                    data:{username}, // 请求时，扔给服务器的数据
                    dataType:"json", // 作为ajax，期望服务器响应json数据
                    success(res){   // 如果服务器成功响应了数据，会走success这个方法
                        // res就表示服务器响应的数据
                        $("#msg").html(res.msg)
                    },
                    error(err){  // 如果没有正常响应数据会走error这个方法
                        console.log(err)
                    }
                })
            });
       })

JS文件：$ajax可以使用上述的get、post文件。