原生JS的ajax请求

前言

ajax:

    学习ajax，最核心的就是学习一个对象，此对象，叫XMLHttpRequest()
    XMLHttpRequest是一个类。
    new XMLHttpRequest(); 得到一个对象  此对象叫ajax对象
    对象是属性和方法的无序集合，也就是说，ajax对象上有很多属性和方法
    学习ajax就是学习这些属性和方法。

AJAX-向服务器发送请求

将请求发送到服务器，需要使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

AJAX-服务器 响应

  如需获得来自服务器的响应，请使用 XMLHttpRequest对象的responseText或 responseXML属性。

• responseText(来自服务器的响应并非 XML)
• responseXML(来自服务器的响应是 XML，而且需要作为 XML 对象进行解析)
  

AJAX-onreadystatechange 事件

ajax对象有这么几个状态（readyState）：
    0  xhr对象创建完毕（请求未初始化）
    1  当调用了open方法，设置了连接，此时ajax的状态就变成了1（服务器连接已建立）
    2  xhr已经开始接收到服务器给的数据  接收到数据都是需要解析的（请求已接收）
    3  正在解析数据（请求处理中）
    4  数据解析完毕  只有数据解析完毕了，我们才能获取数据  在代码我们想获取数据，必须等到ajax对象的状态变成4
        （请求已完成，且响应已就绪）
        
status（状态码）:
    200 OK 服务端正常处理 响应了结果
    404 服务器端没有路由来处理此请求  找不到
    302 缓存 同一个url如果请求了服务器 响应的结果会被浏览器缓存下来 下次再次请求 会走浏览器的缓存
    500 服务器中的代码有错误

  当状态发生改变，就会触发onreadystatechange事件。

AJAX实例

htm页面代码：

<form action="/doreg" method="get或post">
<input type="text" name="username" id="user"><span id="msg"></span>

1 原生ajax检测是否存在get请求

页面内js代码：

        let user = document.querySelector("#user")
        let msg = document.querySelector("#msg")
        user.onblur = function(){
            // alert("hello")
            // 第一步：创建一个ajax对象
            let xhr = new XMLHttpRequest();  // xhr表示ajax对象  此时ajax的状态是0
            console.log(xhr.readyState)
            // 第二步：和服务器建立连接  get表示需要把数据放在url中
            xhr.open("get","/check?username="+user.value)// 此时ajax的状态是1
            console.log(xhr.readyState)
            // 第三步：发出请求
            xhr.send(null); // null表示请求体是空  get请求的请求体都是空  post请求的请求体不空
            // 第四步：得到服务器响应的结果  监听ajax状态变化
            xhr.onreadystatechange = function () { // 当状态发生改变，就会触发onreadystatechange事件
                console.log(xhr.readyState); // xhr.readyState获取ajax对象的状态
                if(xhr.readyState === 4 && xhr.status == 200){
                    // xhr.responseText 获取服务器响应的数据
                    console.log(xhr.responseText)
                    msg.innerHTML = xhr.responseText;
                }
            }
        }

JS外部文件核心代码：

let express = require("express");
let app = express();

// 指定模板的存放位置
app.set("views","./views")
app.set("view engine","ejs");// 使用ejs模板引擎

app.get("/",(req,res)=>{
    res.render("reg01"); // 渲染模块
})
let users = ["wc","xq","admin"];
app.get("/check",(req,res)=>{
    let username = req.query.username; // 获取get请求传递过来的数据
    // console.log(username)
    if(users.find(user=>user===username)){
        res.send("对不起，该用户名已被注册，换个吧~");  // 数据是响应给ajax
    }else{
        res.send("恭喜你，该用户名可以使用~")
    }
}
app.listen(3000,()=>{
    console.log("server is running on 3000~")
})

2 原生ajax检测是否存在post请求

页面内js代码：

   // 什么时候发请求？答：当input框失去焦点时，需要把请求发出去
        let user = document.getElementById("user");
        let msg = document.getElementById("msg");
        // 注册一个失去焦点事件
        user.onblur = function () {
            let username = encodeURIComponent(this.value);
            // 使用原生ajax的经典步骤（不需要你记，但是面试之前，需要记住）
            // 1)创建一个ajax对象
            let xhr = new XMLHttpRequest();
            // 2)建立连接   post请求数据不是放在url中的
            xhr.open("post","/check")
            // 还需要设置头（虽然是ajax请求服务器，但是数据我们还想以表单的形式把数据扔给服务器）
            // setRequestHeader表示设置请求头
            // content-type扔给服务器数据的类型
            // application/x-www-form-urlencoded  以表单的形式，把数据扔给服务器
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
            // 4）监听ajax对象的变化
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    // console.log(xhr.responseText)
                    // msg.innerHTML = xhr.responseText; // 获取服务器传递给ajax的数据

                    // console.log(xhr.responseText); // 得到一个JSON对象
                    let res = JSON.parse(xhr.responseText); // 服务器响应给我们的是JOSN字符串
                    console.log(res); // res是JOSN对象
                    console.log(typeof res)

                    if(res.code === 0){
                        msg.innerHTML = res.msg
                        msg.style.color = "red"
                    }else{
                        msg.innerHTML = res.msg
                        msg.style.color = "green"
                    }

                }
            }
            // 3)发出请求  send时，可以传递数据（post请求）
            // xhr.send({username:this.value})
            xhr.send("username="+username)
        }

JS外部文件：

let express = require("express");
let bodyParser = require("body-parser");//post请求需要第三方模块

let app = express();
// 给ejs模板引擎设置别名，别名叫html
app.engine("html",require("ejs").__express);
app.set("view engine","html");// 使用html模板引擎
app.set("views","./views")// 指定模板的存放位置

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:false}))

app.get("/",(req,res)=>{
    res.render("reg01");
})
let users = ["wc","xq","admin"];
app.post("/check",(req,res)=>{
    console.log(req.body)
    let username = req.body.username;
    if(users.find(user=>user==username)) {
        // 把一个普通的字符串响应给ajax
        // res.send("对不起，该用户名已经被注册了，请换一个用户名")

        // 把一片html字符串响应给ajax
        // res.send("<strong style='color: #f00; font-size: 12px;'>对不起，该用户名已经被注册了，请换一个用户名</strong>")

        // 把一个JSON对象响应给ajax  服务器端响应的是JSON对象，但是ajax得到的是JSON字符串
        // 响应一个标准的JSON
        // res.send({"code":0,"msg":"对不起，该用户名已经被注册了，请换一个用户名"})

        // JSON.stringfy表示把一个不是那么标准的JOSN对象，转成JSON字符串
        // res.send响应的就一个jOSN字符串  ajax得到的是JSON字符中
        // res.send(JSON.stringify({code:0,msg:"对不起，该用户名已经被注册了，请换一个用户名"}))

        // res.send可以直接响应一个不是那么标准的JSON，它内部会转化成一个标准的JSON
        // 没有写json.stringfy，它内部也会json.stringfy一下
        // res.send({code:0,msg:"对不起，该用户名已经被注册了，请换一个用户名"})

        // res.json也可以响应一个JSON数据，JSON也可以是不标准的
        // 给ajax响应一个json串，非重重要
        res.json({
            code:0,
            msg:"对不起，该用户名已经被注册了，请换一个用户名"
        })
    }else{
        res.send({code:1,msg:"恭喜你，该用户名可以使用~"})
    }

})

app.listen(3000,()=>{
    console.log("server is running on 3000~")
})