Ajax课程笔记

最新推荐文章于 2024-07-26 11:41:15 发布

前端小将_Lue

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量40

点赞数

分类专栏： Ajax WEB服务器文章标签： ajax javascript ecmascript

本BLOG上原创文章为前端小将_Lue所创，未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。

本文链接：https://blog.csdn.net/2301_77135626/article/details/130001426

版权

Ajax 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

WEB服务器

3 篇文章 0 订阅

订阅专栏

初识Ajax

第一章原生Ajax

### 1.1Ajax简介

Ajax就是异步JS和XML。

通过Ajax可以在浏览器向服务器发送异步请求，最大的优势：无刷新获取数据

Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

### 1.2XML简介

XML 可拓展标记语言

XML 被设计用来传输和存储数据

HTML 是用来在浏览器当中呈现数据的

XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据

预定义标签：标签是提前定义好的

XML现在已经被JSON取代了（更加简洁，数据转换更加容易）

### 1.3 Ajax的特点

1.3.1 Ajax的优点

（1）可以无刷新页面与服务器端进行通信

（2）允许你根据用户事件来更新部分页面内容

1.3.2 Ajax的缺点

（1）没有浏览历史，不能回退

（2）存在跨域问题（同源）

跨域：这个服务向另一个服务发送请求（不被允许）

（3）SEO不友好

SEO:搜索引擎优化

1.4 express框架

1.4.1 express框架安装与引用

安装

启动终端
输入命令 : npm init -y
输入命令：npm i express

express引用

//引入express

const express = require("express");

//创建服务器对象
const app = express();

//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX');
});

//监听端口启动服务
app.listen(3000, () => {
    console.log('服务启动成功，端口监听中')
})

1.4.2 Ajax请求的基本操作

GET.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax GET 请求</title>
    <style>
        #result {
            width: 200px;
            height: 200px;
            border: solid 1px #90b;
        }
    </style>
</head>

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

<script>
    const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById('result');
    //绑定事件
    btn.onclick = function() {
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化   设置请求和方法
        xhr.open('Get', 'http://127.0.0.1:3000/server');
        //3.发送
        xhr.send();
        //4.事件绑定，处理服务端返回的结果
        //on:when 当..的时候
        //readystate:xhr对象属性，表示状态 0 1 2 3 4
        //change:改变,改变的时候触发
        xhr.onreadystatechange = function() {
            //判断(服务端返回了所有结果)
            if (xhr.readyState === 4) {
                //判断响应状态码
                if (xhr.status >= 200 && xhr.status < 300) {
                    //处理结果  行 头 空行 体
                    //1.响应行
                    console.log(xhr.status); //状态码
                    console.log(xhr.statusText); //状态字符串
                    console.log(xhr.getAllResponseHeaders); //所有响应头
                    console.log(xhr.response); //响应体

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

                } else {

                }

            }

        };

    }
</script>

</html>

server.js

//引入express

const express = require("express");

//创建服务器对象
const app = express();

//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX');
});

//监听端口启动服务
app.listen(3000, () => {
    console.log('服务启动成功，端口监听中')
})