Ajax笔记

Yance9

已于 2022-04-21 00:36:02 修改

阅读量779

点赞数

分类专栏： Javascript 文章标签： javascript

于 2022-04-21 00:33:46 首次发布

本文链接：https://blog.csdn.net/weixin_51576225/article/details/124286730

版权

Ajax笔记和目录

一、ajax简介
二、XML简介
三、ajax的优缺点
四、http协议
五、使用原生JavaScript进行ajax请求操作
六、使用jQuery进行AJAX请求操作
七、使用axios进行ajax请求操作
八、使用全局对象的fetch()方法进行ajax请求操作
九、同源策略
十、跨域问题
十一、如何解决跨域问题
- 1、通过JSONP
- 2、通过CORS响应头实现跨域

一、ajax简介

什么是AJAX?

ajax即Asynchronous JavaScript And XML（异步JavaScript和XML）

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

它不是一门编程语言，而是利用 JavaScript 在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术

二、XML简介

什么是XML？

XML 指可扩展标记语言（EXtensible Markup Language）

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

XML 是一种很像HTML的标记语言

XML 标签没有被预定义

XML 和 HTML 之间的差异
HTML 旨在显示信息，而 XML 旨在传输信息

XML 被设计用来传输和存储数据，其焦点是数据的内容

HTML 被设计用来显示数据，其焦点是数据的外观

三、ajax的优缺点

优点

可以无需刷新页面而与服务器端进行通信

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

减轻服务器的负担,按需取数据,最大程度的减少冗余请求

减少用户心理和实际的等待时间,带来更好的用户体验

进一步促进页面和数据的分离

缺点

没有浏览历史，不能回退

AJAX大量的使用了javascript和ajax引擎，所以在编写的时候要考虑对浏览器的兼容性

存在跨域问题

四、http协议

简介

HTTP协议（Hyper Text Transfer Protocol，超文本传输协议）

用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。

HTTP基于TCP/IP通信协议来传递数据。

消息结构

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>

请求方法

GET：请求指定的页面信息，并返回实体主体。
POST：向指定资源提交数据进行处理请求。POST请求可能会导致新的资源的建立或已有资源的修改。
HEAD：用于获取报头
OPTIONS：允许客户端查看服务器的性能。
TRACE：回显服务器收到的请求，主要用于测试或诊断。
PUT：从客户端向服务器传送的数据取代指定的文档的内容。
DELETE：请求服务器删除指定的页面。
CONNECT：HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。

状态码

分类：

状态码	描述
1**	信息，服务器收到请求，需要请求者继续执行操作
2**	成功，操作被成功接收并处理
3**	重定向，需要进一步的操作以完成请求
4**	客户端错误，请求包含语法错误或无法完成请求
5**	服务器错误，服务器在处理请求的过程中发生了错误

常见的状态码：

状态码	描述
200（成功）	服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
400（错误请求）	客户端请求的语法错误，服务器无法理解
401（未授权）	请求要求身份认证
403（禁止）	服务器理解请求但是拒绝请求
404（未找到）	服务器找不到请求的网页
405（方法禁用）	禁用请求中指定的方法
500（服务器内部错误）	服务器内部错误，无法完成请求

五、使用原生JavaScript进行ajax请求操作

ajax请求总共分为四步

步骤1：获取XMLHttpRequest对象

步骤:2：调用步骤1中对象的open方法，并传递参数。参数的五个类型分别是：请求方式，请求地址，是否异步，用户名验证，用户密码验证，后面三个一般不设置，默认值分别为true，空、空。
1、ajax发送GET请求

步骤3：调用send方法发送请求

步骤4：绑定onreadystatechange事件，用于设置当成功（失败）请求响应时该执行什么操作

注：步骤3和步骤4可以反过来

1、ajax发送GET请求

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result {
     
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>

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

    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function() {
     
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 调用open方法并设置参数，第三个不传默认为true
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
          
            xhr.onreadystatechange = function() {
     
                //判断服务端是否返回了所有的结果
                // readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
                if (xhr.readyState === 4) {
     
                    //判断响应状态码
                    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 {
     
                        alter("没有返回所有结果")
                    }
                }
            }


        }
    </script>
</body>

</html>

附：readyState的不同数字对应的状态

0——请求未初始化

1——服务器连接已建立

2——请求已接受

3——请求处理中

4——请求已完成，且响应已就绪

// 引入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(8000, () => {
   
    console.log("服务已启动, 8000端口正在监听中....");
});

结果
在这里插入图片描述
GET设置url参数

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

2、ajax发送POST请求

<!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('POST', 'http://localhost:8000/server');
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
            //3.发送
            xhr.send('a=100&&b=200');
            //4.事件绑定 处理服务器端返回的结果
            xhr.onreadystatechange = function () {
     
                //判断
                if (xhr.readyState == 4) {
     
                    if (xhr.status >= 200 && xhr.status < 300) {
     
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
</body>

</html>


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

app.get('/server', (request, response) => {
   
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('hello ajax');
});
app.post('/server', (request, response) => {
   
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('hello ajax post');
});
//监听端口
app.listen(8000);
console.log('服务已经启动，8000端口监听中......');

在这里插入图片描述

POST设置url参数

在send方法中设置

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

设置请求头

用setRequestHeader方法设置

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

3、服务端响应JSON数据

JSON跟js对象之间转化的方法

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

app.get('/server', (request, response) => {
   
    res.setHeader('Access-Control-Allow-Origin', '*');
    const data = {
   
        name: 'lisi',
    }
    res.send(data);
});

有两种转化方法

// 1. 手动对数据转化
let data = JSON.parse(xhr.response);
result.innerHTML = data.name;
//2.自动对数据转化
//设置响应体数据的类型
xhr.responseType = 'json';
console.log(xhr.response);
 result.innerHTML = xhr.response.name;

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON响应</title>
    <style>
        #result {
     
            width: 200px;
            height: 100px;
            border: solid 1px #89b;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function () {
     
            //发送请求
            const xhr = new XMLHttpRequest();
            //设置响应体数据的类型
            xhr.responseType = 'json';
            //初始化
            xhr.open('GET', 'http://127.0.0.1:8000/json-server');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function () {
     
                if (xhr.readyState === 4) {
     
                    if (xhr.status >= 200 && xhr.status < 300) {
     
                        // result.innerHTML = xhr.response;
                        // 1. 手动对数据转化
                        /*  let data = JSON.parse(xhr.response);
                         console.log(data);
                         result.innerHTML = data.name; */
                        // 2. 自动转换
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
</body>

</html>

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

app.get('/server', (request, response) => {
   
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('hello ajax');
});
app.post('/server', (request, response) => {
   
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('hello ajax post');
});
app.get('/json-server', (request, response) => {
   
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应一个数据
    const data = {
   
        name: 'lisa'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

//监听端口
app.listen(8000);
console.log('服务已经启动，8000端口监听中......');

在这里插入图片描述

4、请求超时与网络异常处理

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请求超时与网络异常</title>
    <style>
        #result {
     
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button'

最低0.47元/天解锁文章

Yance9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax笔记

什么是AJAX?ajax即Asynchronous JavaScript And XML（异步JavaScript和XML）通过ajax可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据它不是一门编程语言，而是利用 JavaScript 在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术
复制链接

扫一扫