Ajax学习

最新推荐文章于 2024-09-10 18:50:14 发布
最新推荐文章于 2024-09-10 18:50:14 发布
阅读量91 收藏
点赞数
分类专栏： JavaScript学习记录 文章标签： ajax javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45654590/article/details/120197699
版权

简介

Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是用来描述一种使用现有技术集合的‘新’方法

特点

优点：1.可以无需刷新页面而与服务器端进行通信
2.允许根据用户事件来更新部分页面内容
缺点：1.没有浏览历史，不能回退
2.存在跨域问题
3.搜索引擎优化不友好

HTTP协议

HTTP协议详解: 博客地址

请求报文

格式：

请求行：	请求类型：get/post
				URL路径
				HTTP协议请求行版本
请求头：	Host: baidu.com   
				Cookie: name=baidu
				Content-type:   （类型）
				User-Agent:       
空行：固定必须要有
请求体：

响应报文

行： HTTP/1.1 协议版本
		响应状态码 200/500/404/403
		响应状态字符串  ok/....
头：	Content-Type: text/html;charset=utf-8
		Content-length: 2048
		Content-encoding: gzip
空行：
体： 主要返回结果   <html lang="en">
						<head>
						</head>
						<body>
    					    <h1>hello</h1>
						</body>
				</html>

GET请求

server.js

原生Node.js写服务器app的缺点：路由不方便制作；静态资源服务不方便；页面呈递不方便。因此引入express框架(npm install express --save)

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

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

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

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

在这里插入图片描述

GET.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>GET请求</title>
    <!-- 点击按钮时，将响应体的内容传到div中 -->
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 2px solid yellowgreen;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    
    <script>
        //获取button元素
        const btn=document.getElementsByTagName("button")[0];

        // 将响应体的结果展示在div中
        const result=document.getElementById("result");

        btn.onclick=function(){
            //1.创建异步对象
            const xhr = new XMLHttpRequest();
            //XMLHttpRequest 用于在后台与服务器交换数据
            
            //2.初始化，设置请求方法和url
            xhr.open("GET",'http://localhost:8000/server');
            // xhr.open("GET",'http://localhost:8000/server?a=100&b=200&c=300');
            // 在url后面缀参数 ？分割然后加上参数名字和值，若有多个参数用&分割
            //3.发送
            xhr.send();
            //4.事件绑定  处理服务端返回的结果
            /* onreadystatechange
                on: 当...时候
                readystate:对象中的属性，表示状态0（未初始化），1（open方法调用完毕），2（send方法调用完毕），3（服务端返回了部分接口），4（服务端返回了所有接口）
                change:改变
            */
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState===4){
                    //判断响应状态码 200 404 403 401 500
                    //2开头的都表示响应成功（200-299）
                    if(xhr.status===200){
                        //处理结果 行、头、空行、体
                        // 响应
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体

                        // 设置result的文本 该操作可以
                        result.innerHTML=xhr.response;
                        
                    }
                }
            }
        }
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

设置请求体信息

这里介绍的是设置url参数
在Ajax中传递参数——在url后面缀参数

            xhr.open("GET",'http://localhost:8000/server?a=100&b=200&c=300');
            // 在url后面缀参数 ？分割然后加上参数名字和值，若有多个参数用&分割

在这里插入图片描述

POST请求

server.js

app.post('/server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    //设置响应体
    response.send("hello AJAX post");
});

POST.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>POST请求</title>
    <!-- 当鼠标放在div上时向服务端发post请求，并将结果展示到div中 -->
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 2px solid yellowgreen;
        }
    </style>
</head>
<body>
    <div id="result"></div>
</body>
<script>
    //获取元素对象
    const result = document.getElementById("result");
    //绑定事件
    result.addEventListener("mouseover",function(){
        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化 设置类型与url
        xhr.open("post","http://localhost:8000/server");
        //3.发送
        xhr.send();
        //4.事件绑定
        xhr.onreadystatechange = function(){
            //判断
            if(xhr.readyState===4){
                if(xhr.status===200){
                    //处理服务端返回的结果
                    result.innerHTML =xhr.response;
                }
            }
        }
    })
</script>
</html>

在这里插入图片描述

设置请求体信息

xhr.send("a=100&b=200&c=300");

在这里插入图片描述

设置请求头信息

// 设置请求头 (必须在open后，send前)
        // Content-Type设置请求体内容的类型
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.setRequestHeader("name","guigu");//也可以自定义请求头

在这里插入图片描述

响应JSON

server.js

app.all('/json-server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    // 响应一个数据
    const data={
        name:'李四'
    }
    // 对对象进行字符串转换
    let str=JSON.stringify(data);
    //设置响应体
    response.send(str);
});

JSON.html

<body>
    <div id="result"></div>
</body>
<script>
    const result=document.getElementById("result");
    //绑定键盘按下事件
    window.onkeydown=function(){
        // 发送请求
        const xhr=new XMLHttpRequest();
        //初始化
        xhr.open('get','http://localhost:8000/json-server');
        //发送
        xhr.send();
        //事件绑定
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                if(xhr.status===200){
                    console.log(xhr.response);
                    result.innerHTML=xhr.response;
                }
            }
        }
    }
</script>

在这里插入图片描述

数据转化

1.手动转化

   xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                if(xhr.status===200){
                    // 手动对数据转化
                    let data=JSON.parse(xhr.response);
                    console.log(data);
                    result.innerHTML=data.name;
                    //name值显示在div中
                }
            }
        }
    }

在这里插入图片描述
2.自动转化

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

xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                if(xhr.status===200){
                    //自动数据转化 借助对象的属性来设置
                    console.log(xhr.response);
                    result.innerHTML=xhr.response.name;
                }
            }
        }
    }
勇敢小阵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax学习全套(最全最经典)
12-10
**Ajax 全套学习：构建交互式Web应用** Ajax（Asynchronous JavaScript and XML）是一种用于创建高度交互式和响应式Web应用的技术。它允许开发者在不刷新整个页面的情况下与服务器进行数据交换，从而提升了用户体验...
jquery、ajax学习电子书.zip
07-25
《jQuery与Ajax学习指南》是一本专为初学者和有一定JavaScript基础的开发者设计的电子书，旨在帮助读者深入理解和熟练掌握这两个在实际Web开发中不可或缺的技术。jQuery是一个强大的JavaScript库，它极大地简化了DOM...
AJAX 学习
weixin_43466639的博客
05-04 1327
AJAX 一、基本理论 1、定义 AJAX 是一种从网页访问 Web 服务器的异步无刷新技术。 异步：同步是必须等待请求返回结果之后，才能继续其他操作。异步是可以在等待的时间里去继续其他操作，当响应就绪后对响应进行处理。 无刷新：按需加载。（当点击查看更多的时候，就会结合DOM向服务器请求将数据追加进去，并没有刷新页面） 无刷新场景：如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然
史上最详细Ajax学习笔记
楠黎倾风的博客
09-19 8031
史上最强Ajax学习笔记
Ajax学习笔记
xiyi's Blog
03-17 1345
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 1771
AJAX介绍
Ajax学习：取消请求
weixin_47295886的博客
11-30 796
取消请求部分（由于不在作用域不在同一个，所以无法使用上一个函数里面的变量，所以使用let，不能使用const 因为值一变更就会报错）需要借助对象上的方法const xhr = new XMLHttpRequest();xhr的 abort()方法。在发送请求之后，浏览器还没有收到服务器的响应的时候，可以手动取消ajax请求。出现待处理说明还在请求中，200显示标识请求成功。两个按钮，一个发送请求，一个取消请求。js部分：发送请求部分。
ajax学习心得（一）
07-08 631
记录学习心得，不一定正确，有错了再改嘛，嘎嘎！ 1、ajax是一种实现技术，可通过JS实现，也可通过JQuery实现； 2、AJAX =Asynchronous JavaScript and XML; 3、前段时间看JS基础的时候，被小伙伴嘲笑说后面基本不用，看了AJAX相关资料才发现，的的确确如此，人还是得会用工具节省时间才行，但是原理性的东西还是得明白； 4、使用javascript 实现 ajax 有很多缺点…方法、属性、常用值较多不好记忆，步骤 繁琐，浏览器兼容问题（这段话我抄的，反正初学.
ajax学习心得
qq_24092035的博客
03-14 1850
本文为学习慕课网视频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 938
Ajax学习笔记 依旧是广泛的学习和记录。继上一个文章webpack学习笔记后继续巩固自己学到的知识，并希望在未来能够回首再让这篇粗略的文章更有深度。 Ajax简介 Ajax全称是Asynchronous Javascript And XML（异步Javascript和XML），Ajax能更好的实现网页和服务器之间的数据交互。 通俗理解：若在网络上用到了XMLHttpRequest对象和服务器进行数据交互，就是Ajax。 应用场景： 用户名检测：注册用户时，通过Ajax的形式，动态检测用户名是否被占用。
Ajax学习总结
weixin_43323647的博客
09-30 1852
首先Ajax简介：全称Asynchronous JavaScript and XML,即异步的JavaScript和XML。他不是一门编程语言，而是利用JavaScript在保证页面不被刷新，页面链接不被改变的情况下雨服务器交换数据并且更新网页的技术。 之后介绍JQuery的一些简单使用，一些Ajax的内置函数： 这里我拿一个列子来进行分析： <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html&g
ajax学习资料
06-17
ajax学习资料 1) show() hide()：显示 隐藏 2) fadeIn() fadeOut():改变不透明度 3) slideUp() slideDown() :改变元素的高度 4) 自定义动画 animate(params,speed,callback)
ajax学习文档
11-19
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。 Ajax 是一种用于创建快速动态...
Ajax 解决回调竞争
大黄鸭在发光的专栏
09-07 421
即多次快速点击同一按钮导致多个异步的AJAX请求同时返回，导致数据更新顺序混乱。这种情况在异步编程中很常见，特别是前端开发时，AJAX请求的回调并不保证按顺序执行。回调函数，这样每个 AJAX 请求在发送前和完成后都可以执行相应的逻辑。
Ajax和XMLHttpRequest之间的关系
Keep trying, keep going
09-10 338
Ajax和XMLHttpRequest之间的关系是非常密切的。而XMLHttpRequest是Ajax的核心技术之一。XMLHttpRequest：这是一个JavaScript对象，它为浏览器提供了在不刷新页面的情况下与服务器交换数据并更新部分网页的能力。总的来说，Ajax和XMLHttpRequest是相辅相成的。XMLHttpRequest提供了实现Ajax所需的底层支持，而Ajax则是利用XMLHttpRequest实现了更高级的功能，如页面的部分更新等。
xhr、ajax、axois、fetch的区别
yiguoxiaohai的博客
09-04 1654
XMLHttpRequest (XHR)、AJAX、Axios 和 Fetch API 都是用于在不重新加载整个页面的情况下与服务器进行通信的技术和库。它们在处理超时、终止请求、进度反馈等机制上有一些显著的差异。以下是它们的详细比较：
JavaWeb系列二十一: 数据交换和异步请求(JSON, Ajax)
最新发布
你好, 我在学java的博客
09-10 798
JavaWeb系列二十一: 数据交换和异步请求(JSON, Ajax)
Ajax到JQuery Ajax学习指南
"这篇教程主要关注的是从基本的Ajax技术过渡到使用JQuery的Ajax功能的学习。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值