【Ajax】原生Ajax与jQuery中的Ajax

16 阅读 0 评论 0 点赞

1 express 基本使用

安装 express：npm install express。

express的基本使用：

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
//request：对请求报文的封装
//response：对响应报文的封装
app.get('/', (request, response) => {
    //设置响应
    response.send('hello express');
});

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

2 原生 Ajax

2.1 Ajax 简介

Ajax：全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。

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

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

2.2 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.3 Ajax 的特点

2.3.1 Ajax 的优点

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

2.3.2 Ajax 的缺点

没有浏览历史，不能回退。
存在跨域问题(同源)。
SEO 不友好。

2.4 Ajax 的使用

2.4.1 核心对象

XMLHttpRequest，Ajax的所有操作都是通过该对象进行的。

2.4.2 使用步骤

创建 XMLHttpRequest 对象
```
var xhr = new XMLHttpRequest();
```

设置请求信息

xhr.open(method, url);
//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

发送请求

xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用

接收响应

//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){
	if(xhr.readyState == 4 && xhr.status == 200){
		var text = xhr.responseText;
		console.log(text);
	}
}

2.4.3 解决 IE 缓存问题

问题：在一些浏览器中(IE)，由于缓存机制的存在，Ajax只会发送第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址即可避免缓存问题
```
xhr.open("get","/testAJAX?t="+Date.now());
```

2.4.4 AJAX 请求状态

xhr.readyState 可以用来查看请求当前的状态。

文档：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState

0：表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
1：表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
2：表示 send()方法已经执行，并且头信息和状态码已经收到。
3：表示正在接收服务器传来的 body 部分的数据。
4：表示服务器数据已经完全接收，或者本次接收已经失败了。

2.5 GET.html

<!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. 初始化 设置请求方法和 url
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on  when 当....时候
            // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
            // 0（未初始化），1（open方法已经调用完毕），2 （send方法已经调用完毕），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>
</body>
</html>

2.6 POST.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <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');
            //设置请求头，一般会把身份校验的信息放在头信息中，传递给服务器，服务器对参数做提取，对用户身份做校验
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.setRequestHeader('name','atguigu'); //自定义的请求头，浏览器具有安全机制
            //3. 发送
            xhr.send('a=100&b=200&c=300');
            // xhr.send('a:100&b:200&c:300');
            // xhr.send('1233211234567');
            
            //4. 事件绑定
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                } 
            }
        });
    </script>
</body>
</html>

2.7 JSON.html

<!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){
                        // console.log(xhr.response);
                        // 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>

2.8 IE 缓存问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IE缓存问题</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #258;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');

        btn.addEventListener('click', function(){
            const xhr = new XMLHttpRequest();
            xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now()); //时间戳每一次都不一样，解决缓存问题
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

2.9 超时与网络异常

<!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];
        const result = document.querySelector('#result');

        btn.addEventListener('click', function(){
            const xhr = new XMLHttpRequest();
            //超时设置 2s 设置
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function(){
                alert("网络异常, 请稍后重试!!");
            }
            //网络异常回调
            xhr.onerror = function(){
                alert("你的网络似乎出了一些问题!");
            }

            xhr.open("GET",'http://127.0.0.1:8000/delay');
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status< 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

2.10 取消请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
</head>
<body>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;

        btns[0].onclick = function(){
            x = new XMLHttpRequest();
            x.open("GET", 'http://127.0.0.1:8000/delay');
            x.send();
        }

        // abort
        btns[1].onclick = function(){
            x.abort();
        }
    </script>
</body>
</html>

2.11 重复请求问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重复请求问题</title>
</head>
<body>
    <button>点击发送</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        //标识变量
        let isSending = false; // 是否正在发送AJAX请求

        btns[0].onclick = function(){
            //判断标识变量
            if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求
            x = new XMLHttpRequest();
            //修改 标识变量的值
            isSending = true;
            x.open("GET",'http://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    //修改标识变量
                    isSending = false;
                }
            }
        }

        // abort
        btns[1].onclick = function(){
            x.abort();
        }
    </script>
</body>
</html>

3 jQuery 中的 Ajax

3.1 get 请求

$.get(url, [data], [callback], [type])

url：请求的 URL 地址。
data：请求携带的参数。
callback：载入成功时回调函数。
type：设置返回内容格式，xml、 html、script、json、text、_default。

3.2 post 请求

$.post(url, [data], [callback], [type])

url：请求的 URL 地址。
data：请求携带的参数。
callback：载入成功时回调函数。
type：设置返回内容格式，xml、 html、script、json、text、_default。

3.3 client.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><!--crossorigin：跨源请求，向该资源发送请求时，将不会携带当前域名下的cookie-->
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求 </h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <script>
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            },'json');
        });

        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            });
        });

        $('button').eq(2).click(function(){
            $.ajax({
                //url
                url: 'http://127.0.0.1:8000/jquery-server',
                //参数
                data: {a:100, b:200},
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                //成功的回调
                success: function(data){
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function(){
                    console.log('出错啦!!');
                },
                //头信息
                headers: {
                    c:300,
                    d:400
                }
            });
        });

    </script>
</body>
</html>

3.4 axios 发送 Ajax请求

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 发送 AJAX请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
        // https://github.com/axios/axios
        const btns = document.querySelectorAll('button');

        //配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';

        btns[0].onclick = function () {
            //GET 请求
            axios.get('/axios-server', {
                //url 参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'atguigu',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            });
        }

        btns[1].onclick = function () {
            axios.post('/axios-server', {
                //请求体
                username: 'admin',
                password: 'admin'
            }, {
                //url 
                params: {
                    id: 200,
                    vip: 9
                },
                //请求头参数
                headers: {
                    height: 180,
                    weight: 180,
                }
            });
        }
    
        btns[2].onclick = function(){
            axios({
                //请求方法
                method : 'POST',
                //url
                url: '/axios-server',
                //url参数
                params: {
                    vip:10,
                    level:30
                },
                //头信息
                headers: {
                    a:100,
                    b:200
                },
                //请求体参数
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            }).then(response=>{
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })
        }
    </script>
</body>
</html>

3.5 fetch 发送 Ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch 发送 AJAX请求</title>
</head>
<body>
    <button>AJAX请求</button>
    <script>
        //文档地址
        //https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch
        
        const btn = document.querySelector('button');

        btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
                //请求方法
                method: 'POST',
                //请求头
                headers: {
                    name:'atguigu'
                },
                //请求体
                body: 'username=admin&password=admin'
            }).then(response => {
                // return response.text();
                return response.json();
            }).then(response=>{
                console.log(response);
            });
        }
    </script>
</body>
</html>

本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！

转载请注明出处：免费源码网-免费的源码资源网站 » 【Ajax】原生Ajax与jQuery中的Ajax

点赞(0) 打赏

本文分类：文章资讯
本文标签：【Ajax】原生Ajax与jQuery中的Ajax
浏览次数：16 次浏览
本文链接：https://freeymw.com/article/35580.html

上一篇 > 【综合案例】使用React编写B站评论案例
下一篇 > 2024Python安装与配置IDE汉化集活的全套教程

评论列表共有 0 条评论

暂无评论

【Ajax】原生Ajax与jQuery中的Ajax

文章目录

1 express 基本使用

2 原生 Ajax

2.1 Ajax 简介

2.2 XML 简介

2.3 Ajax 的特点

2.3.1 Ajax 的优点

2.3.2 Ajax 的缺点

2.4 Ajax 的使用

2.4.1 核心对象

2.4.2 使用步骤

2.4.3 解决 IE 缓存问题

2.4.4 AJAX 请求状态

2.5 GET.html

2.6 POST.html

2.7 JSON.html

2.8 IE 缓存问题

2.9 超时与网络异常

2.10 取消请求

2.11 重复请求问题

3 jQuery 中的 Ajax

3.1 get 请求

3.2 post 请求

3.3 client.html

3.4 axios 发送 Ajax请求

3.5 fetch 发送 Ajax请求

评论列表共有 0 条评论

发表评论取消回复

【Ajax】原生Ajax与jQuery中的Ajax

文章目录

1 express 基本使用

2 原生 Ajax

2.1 Ajax 简介

2.2 XML 简介

2.3 Ajax 的特点

2.3.1 Ajax 的优点

2.3.2 Ajax 的缺点

2.4 Ajax 的使用

2.4.1 核心对象

2.4.2 使用步骤

2.4.3 解决 IE 缓存问题

2.4.4 AJAX 请求状态

2.5 GET.html

2.6 POST.html

2.7 JSON.html

2.8 IE 缓存问题

2.9 超时与网络异常

2.10 取消请求

2.11 重复请求问题

3 jQuery 中的 Ajax

3.1 get 请求

3.2 post 请求

3.3 client.html

3.4 axios 发送 Ajax请求

3.5 fetch 发送 Ajax请求

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复