ajax学习一

最新推荐文章于 2024-03-18 17:32:19 发布
最新推荐文章于 2024-03-18 17:32:19 发布
阅读量1.2k 收藏
点赞数 1
文章标签： 学习 前端 javascript ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aneyal/article/details/124344048
版权

ajax简介

ajax就是异步的JS和XML

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

ajax是一种将现有标准组合在一起使用的新方式

优缺点

优点

可以无刷新情况下向服务器发送请求，进行通信

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

缺点

没有浏览历史，不能回退

存在跨域问题

SEO不友好

XML简介

XML是可扩展标记语言

被用来传输和储存数据

与HTML相似，但HTML中都是预定义标签，而XML中没有预定义标签，全部都是自定义标签，用来表示一些数据

 

现在已经被json替代了。上面的数据用Jason表示：{'name':'孙悟空','age':18,'gender':'男'}

HTTP协议

HTTP协议是超文本传输协议，其规定了浏览器和万维网服务器之间互相通信的规则

浏览器向服务器发送的内容被称之为请求报文，服务器向浏览器发送的结果被称为响应报文

请求报文

包括四部分：请求行、请求头、空行、请求体

请求行

包括三部分：请求类型（get\post等）、URL路径、HTTP协议版本

请求头

Host、Cookies、Content-type等，格式：名字: 值

空行和请求体

空行是固定的，必须有

请求体可以有也可以没有，get请求中没有请求体

响应报文

包括四部分：返回行、返回头、空行、返回体

返回行

包括HTTP协议版本、响应状态码、响应状态字符串（和相应状态码对应）三部分

返回头

格式和请求报文中格式一样

空行

空行是固定的，必须有

返回体

主要的返回结果

Express框架

由于使用ajax需要服务器，为了便于之后的学习，这里使用express框架

基本使用

//引入express
const { request, response } = require('express')
const express=require('express')
// 创建应用对象
const app=express()
// 创建路由规则
// request是对请求报文的一个封装
// response是对响应报文的一个封装
app.get('/',(request,response)=>{
    // 设置响应
    response.send('hello!')
})
// 监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已启动，8000端口监听中')
})

ajax请求的基本操作（get）

服务端代码：

const express=require('express')
const app=express()
// /server表示如果请求行的URL路径是/server时，会执行后面的回调函数
app.get('/server',(request,response)=>{
    // 设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    // 响应体
    response.send('hello ajax!')
})
app.listen(8000,()=>{
    console.log('服务已启动，8000端口监听中')
})

发送ajax请求并将响应体显示在页面上

<!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: 200px;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <!-- 点击按钮之后向服务端发送请求 -->
    <!-- 将服务端发送的响应体显示在div中 -->
    <button>点击发送请求</button>
    <div id='result'></div>
    <script>
        const btn=document.querySelector('button')
        const result=document.querySelector('#result')
        btn.onclick=function(){
            //创建对象
            const xhr=new XMLHttpRequest();
            // 初始化，设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server')
            // 发送
            xhr.send();
            // 事件绑定，处理服务器返回的结果
            // readystate是xhr对象中的属性，表示状态，有5个值：0,1,2,3,4
            // 0表示未初始化，1表示open方法调用完毕，2表示send方法调用完毕
            // 3表示服务器返回部分结果，4表示服务器返回所有结果
            // onreadystatechange表示当readystate发生变化时，会触发后面的回调函数
            xhr.onreadystatechange=function(){
                // 当readystate为4时处理服务器返回结果
                if(xhr.readyState==4){
                    // 判断响应状态码,2开头都表示成功
                    if(xhr.status>=200 && xhr.status<300){
                        // 处理
                        // xhr.status获取状态码
                        // xhr.statusText获取状态字符串
                        // xhr.getAllResponseHeaders()获取全部响应头
                        // xhr.response获取响应体
                        // 将返回的响应体显示在div中
                        result.innerHTML=xhr.response
                    }
                }
            }
        }
    </script>
</body>
</html>

get请求设置请求参数

get请求没有请求体，所以在URL后使用?参数名=参数值来设置请求参数,并且使用&连接参数

如：http://www.baidu.com/server?name=admin&b=8326&c=832

ajax发送post请求

            //创建对象
            const xhr=new XMLHttpRequest();
            // 初始化，设置请求方法和url
            xhr.open('POST','http://127.0.0.1:8000/server')
            // 发送
            xhr.send();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status>=200 && xhr.status<300){
                        result.innerHTML=xhr.response
                    }
                }
            }

注意，服务器端也要设置响应post请求的方法：

app.post('/server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('hello ajax!')
})

post请求设置请求体

在send中设置，例如：xhr.send('a=100&b=200&c=300')

ajax设置请求头

只需要在open方法调用之后加上一个setRequestHeader()方法

例：

            xhr.open('GET','http://127.0.0.1:8000/server')
            // 设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            //Content-Type是用来设置请求体内容的类型

服务端响应json请求

实际情况中，浏览器向服务器发送请求，服务器大多时候返回的是json数据，此时，就需要了解如何处理json格式的数据

方法一：手动对数据进行转换，例如：let data=JSON.parse(xhr.response)，将json格式的数据转化为对象格式

方法二：自动转换，在open方法调用之前设置响应体数据类型为json：xhr.responseType='json',然后返回的json格式数据会自动转化为对象类型

IE缓存问题

IE浏览器会对ajax请求的结果进行缓存，当下一次发出一样的ajax请求时，IE浏览器会取出缓存的数据返回，而不是最新的从服务器获取的数据，这在数据具有时效性时会造成影响

解决方法：在url后加上?t='Date.now()

例如：xhr.open('POST','http://127.0.0.1:8000/server?t='+Date.now())

请求超时和网络异常处理

有时因为网络等原因，请求发出后，在一段时间内都没有收到响应，这个时候需要进行处理

网络异常时，也需要处理

...
const xhr=new XMLHttpRequest()
//两秒之后如果没有收到响应，就取消请求
xhr.timeout=2000
//超时回调，超时之后调用函数
xhr.ontimeout=function(){
    alert('网络异常，请稍后重置')
}
//网络异常的回调，网络异常时调用函数
xhr.onerror=function(){
    alert('网络出问题了')
}

...

ajax取消请求

在响应还没有接收之前，可以取消请求

可以使用abort方法：xhr.abort()

ajax重复发送请求问题

有时浏览器会重复向服务器发送一样的请求，这可能会导致服务器堵塞

解决方法：在发送请求之前查看之前有没有相同请求

...
        //点击按钮，发送请求，如果之前存在相同请求，则不发送
        let xhr
        // 标志变量，检验是否正在发送相同请求
        let isSending=false;
        btn.onclick=function(){
            // 判断标志变量,如果之前有相同请求，则直接返回
            if(isSending) return
            xhr=new XMLHttpRequest();
            // 修改标识变量的值
            isSending=true
            xhr.open('GET','http://127.0.0.1:8000/server')
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            xhr.send();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    // 修改标识变量的值
                    isSending=false
                    if(xhr.status>=200 && xhr.status<300){
                        result.innerHTML=xhr.response
                    }
                }
            }
        }
...

jQuery发送ajax请求

get方法

...
        //按下按钮，发送get请求，并在控制台输出响应体
        $('.button2').click(function(){
            // 第一个是URL地址，第二个是请求参数（对象形式）
            // 第三个参数是一个回调函数，其参数是响应体
            // 第四个参数表示响应体类型
            $.get('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
                console.log(data)
            },'json')
        })
...

post方法

和get方法类似，但是将$.get换为$.post

...
        $('.button3').click(function(){
            $.post('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
                console.log(data)
            },'json')
        })
...

通用性方法ajax

...
        $('.button4').click(function(){
            // 参数是一个对象
            $.ajax({
                // url
                url:'http://127.0.0.1:8000/jquery',
                // 请求数据
                data:{a:100,b:100},
                // 请求类型
                type:'GET',
                // 设置响应体类型
                dataType:'json',
                // 成功的回调
                // data表示响应体
                success:function(data){
                    console.log(data)
                },
                // 超时时间
                timeout:2000,
                //失败的响应                
                error:function(){
                    alert('网络出问题了')
                },
            })
        })
...

Axios发送ajax请求

get请求

        btn2.onclick=function(){
            // get请求
            axios.get('http://127.0.0.1:8000/axios',{
                // 设置url参数，即请求参数
                params:{
                    id:100,
                    vip:7,
                },
                // 设置请求头信息
                Headers:{
                    name:'yes',
                }
            }).then(value=>{
                // 输出的value是一个对象
                // 包含data（响应体）
                // 还有响应头、响应状态码等很多信息
                console.log(value)
            })
        }

post请求

和get请求类似，将axios.get换为axios.post，并且除了设置URL参数，还能设置请求体，使用{参数名：参数值}来设置，作为axios.post的第二个参数，其余设置放在对象中，作为axios.post的第三个参数，第一个参数是URL地址

      btn3.onclick=function(){
            axios.post('http://127.0.0.1:8000/axios',{
                a:100,
                b:200,
            },{
                Headers:{
                    name:'yes',
                }
            }).then(value=>{
                console.log(value)
            })
        }

通用方式

和jQuery很像

        btn4.onclick=function(){
            axios({
                method:'GET',
                url:'http://127.0.0.1:8000/axios',
                params:{
                    a:100,
                    b:200,
                },
                Headers:{
                    name:'yes',
                },
            }).then(value=>{
                console.log(value)
            })
        }

使用fetch函数发送ajax请求

使用上类似axios的通用方法

fetch函数有两个参数，第一个是URL地址，第二个是一个可选的配置项对象，包括所有对请求的设置，可选参数有method、header、body（请求体）等

同源策略

浏览器的一种安全机制

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

同源策略就是网页的URL和请求资源的URL必须是同源的

ajax默认遵守同源策略，违背同源策略就是跨域

解决跨域的办法：JSONP

JSONP

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

JSONP利用script标签的跨域能力来实现跨域

使用

动态的创建一个script 标签

var script = document.createElement("script");

设置script 的src，设置一个回调函数，在服务器代码中，设置返回体时，调用这个函数，函数的参数为要返回的数据

script.src = "http://localhost:8000/test";
function abc(data) {
	alert(data.name);
}

将script 插入到文档中

document.body.appendChild(script);

jQuery发送JSONP请求

省去了自定义回调函数的过程

...
		<button id="btn">按钮</button>
...
				var btn = document.getElementById('btn')
				btn.onclick = function () {
					$.getJSON("http://127.0.0.1:8000/jquery-jsonp?callback=?",function(data) {
						console.log(data);
					});
				}
...

设置CORS响应头实现跨域

CORS，跨域资源共享，是官方的跨域解决方案，完全在服务器端实现。

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

使用：

response.setHeader('Access-Control-Allow-Origin', '*')

response.setHeader('Access-Control-Allow-Method', '*')

response.setHeader('Access-Control-Allow-Headers', '*')

aneyal
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
XMLHttpRequest 的基本用法
qiaokelibangwo的博客
06-18 3466
XMLHttpRequest是浏览器内置的一个构造函数。所以使用的时候需要 new ​ 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 ​ axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装主要的 4 个实现步骤：创建 xhr 对象调用 xhr.open() 函数调用 xhr.send() 函数监听 load 事件 1.3 GET请求携带参数 GET请求
ajax 学习
野生码农
06-10 151
ajax 学习 1，是什么？ 一个page内，请求一份数据，不做跳转，前端向后端发送一个ajax请求。 2，前端怎么提交，后端怎么处理？ 3，怎么提交form 4，返回的数据怎么处理？ 5，数据返回，用json格式 JQuery中Ajax的操作完整例子 https://blog.csdn.net/qq_33714487/article/details/79112555 var configObj = { method //数据的提交方式：get和post url...
function_XMLHttpRequest构造函数
qq_43260366的博客
07-28 671
作用初始化XMLHttpRequest实例对象；async是否以异步模式获取数据；method请求方法；作用发送http请求；作用初始化一个请求；body请求主体信息。
Ajax中XMLHttpRequest对象的详细解析
最新发布
m0_61549953的博客
03-18 788
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
原生AjAX使用需求，代码详解
nilmao的博客
04-01 465
1.GET请求 //1. 创建AJAX对象 const xhr = new XMLHttpRequest(); //2. 设置请求方法和url xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&C=300&=300'); //3. 发送 xhr.send(); //4. 事件绑定 处理服务端返回的结果 /
AJAX--XMLHttpRequest & 跨域
郊眠寺
05-18 6987
XMLHttpRequest XMLHttpRequest 是浏览器内置的一个构造函数 作用：基于 new 出来的 XMLHttpRequest 实例对象，可以发起 Ajax 的请求。 axios 中的 axios.get()、axios.post()、axios() 方法，都是基于 XMLHttpRequest（简称：XHR） 封装出来的！ 使用 XMLHttpRequest 发起 GET 请求 主要的 4 个实现步骤： 创建 xhr 对象 调用 xhr.open() 函数 调用 xhr.send() 函
【前端知识点总结】Ajax(三) XMLHttpRequest封装Ajax
jiang_ziY的博客
03-11 2175
本章内容包含: XMLHttpRequest对象、GET请求携带参数、POST请求携带参数、手动封装一个 Ajax、数据交换格式JSON、 同源和跨域、跨域的解决方案、CORS、JSONP、Proxy
ajax 学习心得
sinat_32456781的博客
11-13 451
这是很久之前的一篇文章，今天在草稿箱里发现了，写出来分享一下下。 今天学了ajax技术，特地在此写下来作为复习。 ** 一、什么是ajax? ** 客户端（特指PC浏览器）与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术 即，AJAX是一个【局部刷新】的【异步】通讯技术, 说白了就是局部刷新。 二、ajax的原理如下图 ajax 技术原理图 三、ajax包...
Ajax学习脑图笔记1
08-17
Ajax学习脑图笔记1
16ajax学习笔记1
08-08
16ajax学习笔记1
Ajax学习笔记整理
12-09
Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司最早发明了LiveScript脚本语言, 用来丰富网页元素的表现形式, 使网页能够呈现出动态效果. 随后的历次改
AJAX客户端说明，XMLHttpRequest对象
12-11
在CommunityServer中运用了自己的AJAX机制，没有借助其他的辅助控件。其中客户的XMLHttpRequest对象的封装，就足以让人大饱眼福，在一般的浏览器其都能够运行AJAX。下面我们来学习学习这个咚咚，希望能给更多的人带来帮助。  首先当然是要了解一下浏览器中的XMLHttp对象了：  XMLHTTP方法：           备注：客户机可以使用XMLHTTP对象发送任意的HTTP请求,接受HTTP应答,还可以对应答的XML文档进行解析。           Open方法：初始化一个Msxml2.XMLHTTP请求，指定HTTP请求方式、URL以及鉴定信息。         
ajax学习文档
11-19
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。 Ajax 是一种用于创建快速动态...
AJAX学习笔记忘记了看一眼
04-06
AJAX学习笔记忘记了看一眼
AJAX--XMLHttpRequest的方法
qq_52460205的博客
07-29 520
如xhr.open(‘GET’,‘http//127.0.0.18000/server’);在js中，windows是最顶级对象，代表了一个窗体。1.创建对象(使用new进行创建)
JavaScript高级程序设计-网络请求与远程资源
qq_42372534的博客
05-12 501
JavaScript网络请求和远程资源
AJAX：二、XMLHttpRequest实践
CSDN前端知识共享
08-02 1114
XHR(XMLHttpRequest) 实践 简介 XMLHttpRequest(通常缩写XHR) 是一个 API，它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。 Fetch API 提供了一个获...
AJAX 原理（XMLHttpRequest+Promise+URLSearchParams）
qq_50260510的博客
04-15 561
AJAX 原理（XMLHttpRequest+Promise+URLSearchParams）
Ajax学习笔记pink老师
07-29
您好！对于学习Ajax，我可以为您提供一些学习笔记。以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器进行数据交换，实现在不刷新整个页面的情况下更新部分页面内容。 2. Ajax的优点： - 异步处理：可以在后台发送和接收数据，而无需刷新整个页面。 - 提高用户体验：通过部分更新页面内容，可以提供更快的响应时间和更流畅的用户体验。 - 减轻服务器负担：只更新需要的部分内容，减少了不必要的数据传输和服务器负载。 3. Ajax的基本原理： - 使用XMLHttpRequest对象向服务器发送请求，并接收响应。 - 通过JavaScript在前端处理响应数据。 - 更新页面内容，以显示最新的数据。 4. Ajax的核心技术： - XMLHttpRequest对象：用于与服务器进行数据交换。 - JavaScript：用于处理响应数据和更新页面内容。 - XML或JSON：用于传输数据格式。 5. Ajax的使用步骤： - 创建XMLHttpRequest对象。 - 定义请求类型、URL和是否异步。 - 发送请求并接收响应。 - 处理响应数据并更新页面内容。 6. 常见的Ajax框架和库： - jQuery：一个流行的JavaScript库，提供了简化Ajax开发的方法和函数。 - Axios：一个基于Promise的HTTP客户端，用于浏览器和Node.js。 - Fetch API：一种用于发送和接收网络请求的新标准。 这只是Ajax学习的一些基本概念和步骤，您可以进一步深入学习Ajax的相关知识和实践。希望这些笔记对您有所帮助！如有更多问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值