AJAX基础知识(1)-express框架配合原生AJAX

最新推荐文章于 2023-10-02 15:26:20 发布

超级冲天猪

最新推荐文章于 2023-10-02 15:26:20 发布

阅读量341

点赞数 1

分类专栏： AJAX专栏文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/m0_51207602/article/details/122680633

版权

AJAX专栏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了XML的基本概念，以及AJAX的主要特点，包括其优点和缺点。接着讲解了HTTP协议的重要性，特别是请求报文和响应报文的结构。文章重点讲述了如何在Express框架中配合原生AJAX实现GET和POST请求，通过实例展示了如何创建服务并监听端口，以及使用nodemon插件简化开发流程。

摘要由CSDN通过智能技术生成

1.XML简介

XML 为可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据： name = “孙悟空” ; age = 18 ; gender = “男” ;
用 XML 表示的话：

<student> 

<name>孙悟空</name> 

<age>18</age> 

<gender>男</gender> 

</student>

不过现在已经被JSON取代了，用JSON表示：{“name”:“孙悟空”,“age”:18,“gender”:“男”}

2.ajax特点

1.AJAX的优点
（1）可以无需刷新页面而与服务器端进行通信
（2）允许你根据用户事件来更新部分页面内容
2.AJAX的缺点
（1）没有浏览历史，不能回退
（2）存在跨域问题（同源）
（3）SEO不友好

3.HTTP

HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。
请求报文：重点是格式和参数

行      POST  /s?ie=utf-8  HTTP/1.1 
头      Host: atguigu.com
        Cookie: name=guigu
        Content-type: application/x-www-form-urlencoded
        User-Agent: chrome 83
空行
体      username=admin&password=admin

响应报文

行      HTTP/1.1  200  OK
头      Content-Type: text/html;charset=utf-8
        Content-length: 2048
        Content-encoding: gzip
空行    
体      <html>
            <head>
            </head>
            <body>
                <h1>尚硅谷</h1>
            </body>
        </html>

行头空行体

4.express框架配合原生AJAX

先下载express框架

npm i express

创建express框架基本形式

//1.引入express框架
const express = require('express');
const { response } = require('express');
const { request } = require('http');
//2.创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/',(request,response)=>{
    //设置响应
    response.send('HELLO EXPRESS');
})
//4.监听端口
app.listen(8000,()=>{
    console.log("服务已经启动, 8000 端口监听中....");
})

（1）发送get请求
在html文件

<style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 1px #90b;
      }
    </style>
  </head>

  <body>
    <button>点击发送请求</button>
    <div id="result"></div>

    <body>
      <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和 url
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on  when 当....时候
            // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
            // change  改变
            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>

创建对应的服务在server.js文件

//1.引入express框架
const { response } = require('express');
const express = require('express');
const { request } = require('http');
//2.创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server',(request,response)=>{
    //设置响应头 设置允许跨域。
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应
    response.send('你好');
})
//4.监听端口
app.listen(8000,()=>{
    console.log("服务已经启动, 8000 端口监听中....");
})

这里我们启动服务在8000端口

nodemon .\server.js

这里简单介绍下nodemon插件可以去下载好处是我们修改server.js文件时可以直接保存不用重新启动服务就像下面这样
在这里插入图片描述

我们打开浏览器然后按下“点击发送请求按钮”

就会看到成功发送的请求

(2)发送post请求
这次我们换个需求只要我们鼠标进入方框就发送AJAX请求

<style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 1px #903;
      }
    </style>
  </head>

  <body>
    <div id="result"></div>

    <body>
      <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定对象
        result.addEventListener("mouseover",function(){
          //1.创建对象
          const xhr = new XMLHttpRequest();
          //2.初始化类型和url
          xhr.open('POST','http://127.0.0.1:8000/server')
          //3.发送
          xhr.send();
          //4.事件绑定
          xhr.onreadystatechange = function (){
            //判断
            if(xhr.readyState === 4){
              if(xhr.status>=200&&xhr.status<300){
                //处理服务端返回的结果
                result.innerHTML = xhr.response;
              }else{

              }
            }
          }
        })
      </script>

express.js文件

//1.引入express框架
const { response } = require('express');
const express = require('express');
const { request } = require('http');
//2.创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.post('/server',(request,response)=>{
    //设置响应头 设置允许跨域。
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应
    response.send('你好POST');
})
//4.监听端口
app.listen(8000,()=>{
    console.log("服务已经启动, 8000 端口监听中....");
})