~【笔记】尚硅谷Ajax笔记~

最新推荐文章于 2024-04-28 20:18:06 发布

东篱_Y

最新推荐文章于 2024-04-28 20:18:06 发布

阅读量1.5k

点赞数 4

分类专栏：前端学习笔记文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/weixin_55935744/article/details/120660855

版权

点击通往->尚硅谷Ajax视频.

可以先了解node.js：node.js笔记

尚硅谷Ajax笔记 & 目录：

一、ajax简介

1、ajax全称为Asynchronous JavaScript And XML，就是异步的JS 和XML
2、通过AJAX可以再浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
3、ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式

二、XML简介

1、可扩展标记语言

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

3、XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，由来表示一些数据。就是自己给标签取名字

4、现在被json取代了

三、ajax特点

1、优点

可以无需刷新页面而与服务器端进行通信
允许根据用户事件来更新部分页面内容

2、缺点

没有浏览历史，不能回退
存在跨域问题（同源）
SEO不友好（爬取数据）

四、HTTP协议

http协议（超文本传输协议），协议详细规定了浏览器和万维网服务器之间互相通信的规则。

1、请求报文

重点是格式与参数，例如：

行   GET/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

2、响应报文
例如：

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

五、通过原生js进行AJAX操作

1、基本实现

node.js部分：

//引入express框架
const express = require('express');
//创建网站服务器
const app = express();

app.get('/server', (req, res) => {
   
    res.setHeader('Access-Control-Allow-Origin', '*');
    //send()
    //1.send方法内部会检测响应内容的类型
    //2.send方法会自动设置http状态码
    //3.send方法会自动设置响应的内容类型及编码
    res.send('kuangjia');
});
//监听端口
app.listen(3000);
console.log('网站服务器启动成功');

网页部分：

<!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>Document</title>
    <style>
        #result {
     
            width: 200px;
            height: 100px;
            border: solid 1px pink;
        }
    </style>
</head>

<body>
    <button id="btn">点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementById("btn");
        const result = document.getElementById("result");
        btn.onclick = function() {
     
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化，设置请求方式和url
            xhr.open('GET', 'http://localhost:3000/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.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
</body>

</html>

启动服务器后，网页中点击按钮就可以不刷新向服务器发送请求，服务器并响应：
在这里插入图片描述

2、设置url参数
直接加参数，例如：

xhr.open('GET','http://localhost:3000/server?a=100&b=200');

3、发送POST请求
上面是实现的GET请求，把GET改为POST：

xhr.open('POST','http://localhost:3000/server);

node,js部分的路由规则也要改：

app.post('/server', (req, res) => {
   
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.send('kuangjia');
});

4、POST设置请求体（url参数）
post中请求体在send方法中设置：

xhr.send('a=100&b=200');

5、设置请求头
用setRequestHeader方法设置

xhr.setRequestHeader('Content-type','application/x-www-form-lencoded')

6、服务端响应JSON数据

先了解JSON的两种方法：

将对象转化为JSON格式：JSON.stringify()
将JSON格式转化为对象：JSON.parse()

服务器端如果响应的是对象：

app.get('/server', (req, res) => {
   
    res.setHeader('Access-Control-Allow-Origin', '*');
    const data = {
   
        name: 'zhangsan',
        age: 8
    }
    res.send(data);
});

前端可以通过parse转化为对象：

let data = JSON.parse(xhr.response);
console.log(data);
result.innerHTML = data.name + data.age;

在这里插入图片描述

7、请求超时与网络异常处理
现在服务器端将响应写在一个定时器中，模拟网络超时：

app.get(

最低0.47元/天解锁文章

东篱_Y

关注

4
点赞
踩
62

收藏

觉得还不错? 一键收藏
打赏
0
评论
~【笔记】尚硅谷Ajax笔记~

点击通往->尚硅谷Ajax视频.尚硅谷Ajax笔记 & 目录：
复制链接

扫一扫

专栏目录