Ajax学习记录---express框架的初体验和基本操作

1.前期准备是先在nodejs.cn官网下载node.js安装

在cmd中输入node -v能查到版本号就是安装成功

在webstrom中的terminal根目录下输入npm init --yes 初始化项目

Ajax学习记录---express框架的初体验和基本操作

然后安装express npm i express

Ajax学习记录---express框架的初体验和基本操作

新建一个Js文件，对express进行简单使用

//引入express
const  express=require('express');
//创建应用对象
const  app=express();
//创建路由规则
app.get('/',(request,response)=>{
    response.send("hllo express");
});

//监听端口
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中！");
});

效果如下：

Ajax学习记录---express框架的初体验和基本操作

当端口号被占用时，可以结束进程 taskkill /f /t /im node.exe

2.AJAX的基本使用，绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #result{
        width:200px;
        height: 100px;
        border: solid 1px cornflowerblue}
    </style>
</head>
<body>
<button id="btn">发送点击请求</button>
<div id="result"></div>
<script>
    //获取btn元素
    const btn=document.getElementsByTagName('button')[0];
    // const btn=document.getElementById("btn");
    const result=document.getElementById("result");
    //绑定事件
    btn.οnclick=function () {
        //创建对象
        const xhr=new XMLHttpRequest();
        //初始化 设置请求方法和url
        xhr.open('GET',"http://127.0.0.1:8000/server");
        //发送
        xhr.send();
        //事件绑定 处理服务端返回的结果
        //readystate 是xhr对象中的属性， 表示状态 0：表示初始化 1：表示open方法调用完毕
        // 2：表示send方法已经调用完毕 3：表示服务端返回的部分的结果 4：表示服务端返回的所有结果

        //5个值，触发四次
        xhr.onreadystatechange=function () {
            //判断
            if(xhr.readyState===4){
                //判断响应码 200 404 403 401 500
                //2xx成功
                if(xhr.status>=200 && xhr.status<300){
                    //处理结果 行 头 空行 体
                    //响应行
                    // console.log(xhr.status);//状态码
                    // console.log(xhr.statusText);//状态字符码
                    // console.log(xhr.getAllResponseHeaders());//所有响应头
                    // console.log(xhr.response);//响应体

                    //设置result的文本
                    result.innerHTML=xhr.response;

                }
                else{

                }
            }
        }
    }
</script>


</body>
</html>

//引入express
const  express=require('express');
//创建应用对象
const  app=express();
//创建路由规则
app.get('/',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send("hllo AjAX");
});

//监听端口
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中！");
});

3.设置请求参数

xhr.open('GET',"http://127.0.0.1:8000/server?a=100&b=200&c=300");

Ajax学习记录---express框架的初体验和基本操作

相关推荐