ajax学习

最新推荐文章于 2024-08-03 00:03:53 发布
最新推荐文章于 2024-08-03 00:03:53 发布
阅读量574 收藏 9
点赞数 13
分类专栏： 前端 文章标签： ajax 学习 okhttp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51148337/article/details/137155508
版权

Jquery Ajax

这一节学的很晕乎，虽然看完了，但还是很懵，不太清楚如何应用，实际作用

特征：异步、无刷新

（学习dom）

XML简介

XML 可扩展标记语言

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

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

现在已经被json取代了。

{"name":"孙悟空","age":18,"gender":"男"}

AJAX的特点

AJAX的优点：

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

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

AJAX的缺点：

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

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

（3）SEO不友好

AJAX的使用

HTTP协议请求报文与响应文本结构

HTTP协议[超文本传输协议]，协议详细规定了浏览器和万维网辐鳍鳍之间互相通信的规则。

请求报文

重点格式和参数

、、、

行 POST

头 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

空行

体 

			<head>
			    <body>
                    <h1>
                        好好学习
                    </h1>
                </body>
			</head>

​

AJAX-express框架介绍与基本使用

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

AJAX发送POST请求

鼠标放到方框里面发送post请求，返回结果（响应体结果）在div里面进行一个呈现。

请求体部分格式不固定，都可以写

AJAX设置请求头信息

一般身份校验部分信息可以放在这部分，可以设置请求头信息部分

//2.设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Content-Type 设置请求体类型；后面是参数查询字符串内容，固定内容

也可以自定义头信息

            xhr.setRequestHeader('name', 'xiaohei')

存在安全机制就会报错，可以添加一个特殊响应头

//可以接收任意类型的请求all
app.all('/server', (request, response) => {
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头 增加设置特殊响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send('hello ajax post');
});

服务端响应json数据

手动对数据进行转换

if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response;
                        //手动对数据进行转换
                        let data = JSON.parse(xhr.response);
                        console.log(data);
                        result.innerHTML = data.name;
                    }
                }

自动对数据进行转换

 //设置响应体数据的类型
            xhr.responseType = 'json';

console.log(xhr.response);
                        result.innerHTML = xhr.response.name;

nodemon自动重启工具

必须提前安装nodejs

终端窗口

安装

PS E:\VS Code\AJAX\原生AJAX> npm install -g nodemon

启动 windows11 前面要加npx

PS E:\VS Code\AJAX\原生AJAX> npx nodemon server.js

AJAX 网络超时和异常

<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>

app.get('/delay', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    setTimeout(() => {
        //设置响应体
        response.send('延时响应');
    }, 3000);
})

取消请求

<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>

请求重复发送问题

<body>
    <button>点击发送</button>
    <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>

jquery发送ajax

<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);
            })
        })
    </script>

//jquery服务
app.all('/jquery-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // response.send('hello jqery');
    const data = { name: '星期三' };
    response.send(JSON.stringify(data));
})

jQuery发送AJAX请求

 $('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('出错啦！');
                }, //超时，网络异常都会报错，切换到delay，设置延时响应
                //头信息
                headers: {
                    c: 300,
                    d: 400
                }
            })
        })

axios函数发送AJAX请求

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

    <script>
        const btns = document.querySelectorAll('button');

        //配置url
        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里面参数也必须是英文
                headers: {
                    name: 'Friday', //不能是中文
                    age: 24
                }
            }).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: 150,
                }
            });
        }
    </script>
</body>

通用方法

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);
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })

使用fetch函数发送ajax请求

<body>
    <button>AJAX请求</button>
    <script>
        const btn = document.querySelector('button');

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

跨域

同源策略

同源策略最早由Netscape公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号，必须完全相同

违背同源策略就是跨域

如何解决跨域

JSONP

JSONP是一个非官方的跨域解决方案，只支持get请求。

<body>
    <div id="result"></div>
    <script>
        //处理数据
        function handle(data) {
            //获取result元素
            const result = document.getElementById('result');
            result.innerHTML = data.name;
        }
    </script>
    <!-- <script src="http://127.0.0.1:5500/%E8%B7%A8%E5%9F%9F/JSONP/js/app.js"></script> -->
    <script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>

//JSONP服务
app.all('/jsonp-server', (request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '星期五'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);//返回的是一个函数形式，但是函数的实参就是想给客户端返回的结果数据
});
原生jsonp实践
<body>
    用户名：<input type="text" id="username">
    <p></p>
    <script>
        //获取input元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');

        //申明handle函数
        function handle(data) {
            input.style.border = 'solid 1px red';
            //修改p标签的提示文本
            p.innerHTML = data.msg;
        }

        //绑定事件
        input.onblur = function () {
            //获取用户的输入值
            let username = this.value;
            //向服务端发送请求，检测用户名是否存在
            //1.创建一个script标签
            const script = document.createElement('script');
            //2.设置标签的src属性
            script.src = 'http://127.0.0.1:8000/check-username';
            //3.将script插入到文档中
            document.body.appendChild(script);
        }
    </script>
</body>

//用户名检测是否存在
app.all('/check-username', (request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);//返回的是一个函数形式，但是函数的实参就是想给客户端返回的结果数据
});

CORS

CORS(cross-origin resource sharing)，跨域资源共享。他的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器生命哪些源站通过浏览器权限访问哪些资源。

CORS是通过设置一个响应头告诉浏览器。该请求允许跨域，浏览器收到该响应以后就会对响应放行。

<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function () {
            //1.创建对象
            const x = new XMLHttpRequest();
            //2.初始化设置
            x.open("GET", "http://127.0.0.1:8000/cors-server");
            //3.发送
            x.send();
            //4.绑定事件
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    if (x.status >= 200 && x.status < 300) {
                        //输出响应体
                        console.log(x.response);
                    }
                }
            }
        }
    </script>
</body>

//cros
app.all('/cors-server', (request, response) => {
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", "*");
    response.setHeader("Access-Control-Allow-Methods", "*");
    response.send('hello CROS');
});

简单介绍

1.1 $ajax

jquery调用ajax方法：

格式： $.ajax({});

参数：

type：请求方式GRT/POST(需要服务器的支持)

url：请求地址url

async：是否异步，默认true表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型

contentType：设置请求头

success：请求成功时调用函数

error：请求失败调用函数

}
        }
    }
</script>
``` 
//cros
app.all('/cors-server', (request, response) => {
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", "*");
    response.setHeader("Access-Control-Allow-Methods", "*");
    response.send('hello CROS');
});

简单介绍

1.1 $ajax

jquery调用ajax方法：

格式： $.ajax({});

参数：

type：请求方式GRT/POST(需要服务器的支持)

url：请求地址url

async：是否异步，默认true表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型

contentType：设置请求头

success：请求成功时调用函数

error：请求失败调用函数

有点小懒懒
关注
  • 13
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax学习笔记
11-30
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
ajax学习文档
11-19
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。 Ajax 是一种用于创建快速动态...
AJAX 学习
weixin_43466639的博客
05-04 1290
AJAX 一、基本理论 1、定义 AJAX 是一种从网页访问 Web 服务器的异步无刷新技术。 异步：同步是必须等待请求返回结果之后，才能继续其他操作。异步是可以在等待的时间里去继续其他操作，当响应就绪后对响应进行处理。 无刷新：按需加载。（当点击查看更多的时候，就会结合DOM向服务器请求将数据追加进去，并没有刷新页面） 无刷新场景：如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然
史上最详细Ajax学习笔记
楠黎倾风的博客
09-19 7960
史上最强Ajax学习笔记
Ajax学习笔记
xiyi's Blog
03-17 1008
Ajax学习笔记一、关于Ajax什么是Ajax？什么是XML？优缺点二、HTTP协议HTTP协议报文 一、关于Ajax 什么是Ajax？ Ajax全称为Asynchronous JavaScript And XML ,就是异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无需刷新页面获取数据。 AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 什么是XML？ XML是可扩展标记语言。被设计用来传输和存储数据。 XML和HTML相似。不同的是HTML用来呈现
AJAX学习
wyh20090713的博客
04-22 1756
AJAX介绍
Ajax学习：取消请求
weixin_47295886的博客
11-30 782
取消请求部分（由于不在作用域不在同一个，所以无法使用上一个函数里面的变量，所以使用let，不能使用const 因为值一变更就会报错）需要借助对象上的方法const xhr = new XMLHttpRequest();xhr的 abort()方法。在发送请求之后，浏览器还没有收到服务器的响应的时候，可以手动取消ajax请求。出现待处理说明还在请求中，200显示标识请求成功。两个按钮，一个发送请求，一个取消请求。js部分：发送请求部分。
ajax学习心得（一）
07-08 618
记录学习心得，不一定正确，有错了再改嘛，嘎嘎！ 1、ajax是一种实现技术，可通过JS实现，也可通过JQuery实现； 2、AJAX =Asynchronous JavaScript and XML; 3、前段时间看JS基础的时候，被小伙伴嘲笑说后面基本不用，看了AJAX相关资料才发现，的的确确如此，人还是得会用工具节省时间才行，但是原理性的东西还是得明白； 4、使用javascript 实现 ajax 有很多缺点…方法、属性、常用值较多不好记忆，步骤 繁琐，浏览器兼容问题（这段话我抄的，反正初学.
ajax学习心得
qq_24092035的博客
03-14 1843
本文为学习慕课网视频http://www.imooc.com/learn/250的学习心得一、ajax基本概念ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML），利用回调机制来实现异步请求。ajax的核心是XmlHttpRequest对象。一个ajax的实现原理为： 1、利用html和CSS来实现页面，表达信息 2、运用XmlHttp
Ajax学习分享
weixin_46236545的博客
04-10 891
Ajax学习笔记 依旧是广泛的学习和记录。继上一个文章webpack学习笔记后继续巩固自己学到的知识，并希望在未来能够回首再让这篇粗略的文章更有深度。 Ajax简介 Ajax全称是Asynchronous Javascript And XML（异步Javascript和XML），Ajax能更好的实现网页和服务器之间的数据交互。 通俗理解：若在网络上用到了XMLHttpRequest对象和服务器进行数据交互，就是Ajax。 应用场景： 用户名检测：注册用户时，通过Ajax的形式，动态检测用户名是否被占用。
Ajax学习总结
weixin_43323647的博客
09-30 1828
首先Ajax简介：全称Asynchronous JavaScript and XML,即异步的JavaScript和XML。他不是一门编程语言，而是利用JavaScript在保证页面不被刷新，页面链接不被改变的情况下雨服务器交换数据并且更新网页的技术。 之后介绍JQuery的一些简单使用，一些Ajax的内置函数： 这里我拿一个列子来进行分析： <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html&g
AJAX学习笔记
CastleLv的博客
03-28 1004
AJAX：Asynchronous JavaScript and XML 全局刷新和局部刷新 全局刷新：整个浏览器被新的数据覆盖 局部刷新：在浏览器内部发起请求改变页面中部分内容 AJAX用来局部刷新的，是异步对象（XMLHttpRequest）存在浏览器内存中 AJAX开发步骤： 创建异步对象 var xmlhttp = new XMLHttpRequest(); 绑定事件 xmlhttp.onreadystatechange = funtion{} 初始化 xmlhttp.open(“请求方式get或者
ajax学习资料
06-17
ajax学习资料 1) show() hide()：显示 隐藏 2) fadeIn() fadeOut():改变不透明度 3) slideUp() slideDown() :改变元素的高度 4) 自定义动画 animate(params,speed,callback)
python爬虫ajax学习
05-16
学习ajax爬虫的代码 文章链接：https://blog.csdn.net/iwantrain/article/details/130712467
原生javascript中的ajax通信技术
x15514104477的博客
08-02 168
原生javascript中的ajax网络通讯技术，对ajax的每个步骤的讲解以及，用代码演示，简单易上手
jQuery中的ajax通信技术的讲解
x15514104477的博客
08-02 856
jQuery中的ajax通信技术里面的10中方法，其中 $.ajax() 方法最为常用，讲解的最为详细
学习硬件测试04：触摸按键+PWM 驱动蜂鸣器+数码管（P62~P67、P71、P72）
Xuexi_touteng的博客
07-31 214
Qutput compare preload 输出比较预加载：使能（可以改变占空比，而不是固定占空比）极速模式：关闭CH 极性：高（小于 CCR 的状态）状态：重置。
学习笔记 - 二极管的参数与选型
最新发布
qq_19343801的博客
08-03 292
（白线边为阴极）常见肖特基二极管参数可以用快恢复二极管代替肖特基二极管，特别是肖特基二极管的耐压都不会很高，在高压场合需要使用快恢复二极管代替肖特基二极管。
Ajax学习教程：基础与实战
"本文档是一份关于AJAX学习的教程，涵盖了从基础知识到开源框架的讲解，特别是DWR(Direct Web Remoting)的介绍。教程深入解析了AJAX的组成部分和工作原理，以及如何通过JavaScript实现异步数据交互。此外，还推荐了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值