AJAX：原生AJAX简介及基本使用

最新推荐文章于 2022-11-19 20:29:01 发布
最新推荐文章于 2022-11-19 20:29:01 发布
阅读量188 收藏
点赞数 1
分类专栏： Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43522998/article/details/115750305
版权

文章目录

1.AJAX 简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势就是：无刷新获取数据。
AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

2.XML 简介

XML ：可扩展标记语言
XML 被设计用来传输和存储数据。
XML 和 HTML 类似，不同的是 HTML 中都是预定义标签 ， 而 XML 中没有预定义标签，都是自定义标签，用来表示一些数据。

比如：

<person>
	 <name>xy</name>
	 <age>21</age>
</person>

不过现在已被JSON替代。

3. AJAX 的特点

3.1 优点

  1. 可以不需要刷新页面就可以与服务端进行通信
  2. 允许你根据用户事件来更新部分页面内容

3.2 缺点

  1. 没有浏览历史，不能回退
  2. 存在跨域问题
  3. SEO（搜索引擎优化） 不友好，动态创建的数据爬虫爬不到

4. AJAX 的使用

4.1 核心对象

XMLHttpRequest： 核心对象
AJAX的所有操作都是通过该对象进行的

4.2 使用步骤

1.创建 XMLHttpRequest对象

vat xhr=new XMLHttpRequest();

2.设置请求信息

   xhr.open(method,url);
   //可以设置请求头，一般不设置
   //url：可通过?&a=100&b=100传递参数

3.发送请求

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

4.接收响应

//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){
//xhr.readyState == 4：判断服务端是否返回了全部结果

if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300){
var text = xhr.responseText;
	console.log(text);
	 }
	}
}

延申:
onreadystatechange:由on 、readyState、change组成

1.on:当…的时候
2.readyState：xhr对象中的一个属性，表示状态。有5个取值：0 1 2 3 4

0: 未初始化
1：open方法调用完毕，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
2：send方法调用完毕，并且头信息和状态码已经收到
3：服务端返回了部分结果
4：服务端返回了所有的结果，或者本次接收已经失败了

3.change:改变，表示0-4状态改变

4. 案例（GET 请求）

需求：
通过GET.html向server.js发送GET请求，获取响应体，并显示在div中

分析：
GET.html：通过ajax发送请求
server.js：express框架模拟服务端

代码：
GET.html

<!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>Ajax GET 请求</title>

    <style>
        div {
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>

<body>
    <button>发送请求</button>
    <div></div>
    <script>
        let btn = document.querySelector('button');
        let res = document.querySelector('div');
        btn.addEventListener('click', function () {
            // 1.创建xhr对象
            const xhr = new XMLHttpRequest();
            // 2.open
            xhr.open('GET', 'http://localhost:8000/server');
            // 3.发送
            xhr.send();
            // 4.事件绑定 处理服务端返回的结果
            xhr.onreadystatechange = function () {
                // 判断状态是否返回了所有结果
                if (xhr.readyState == 4) {
                    //判断响应状态码 200-300之间
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.status);//状态码 
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        res.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

server.js

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

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

// 3.创建路由规则(GET方法)
app.get('/server', (request, response) => {
    // request 是对请求报文的封装
    // response 是对响应报文的封装

    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('hello express');
});

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

结果：
显示：
在这里插入图片描述

控制台打印：
在这里插入图片描述
标头：
在这里插入图片描述

5. 案例（POST请求）

需求：
通过POST.html向server.js发送GET请求，获取响应体，并显示在div中

分析：
POST.html：通过ajax发送请求
server.js：express框架模拟服务端

代码：
POST.html

<!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>Ajax GET 请求</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div></div>
    <script>
        let btn = document.querySelector('button');
        let res = document.querySelector('div');
        btn.addEventListener('click', function () {
            // 1.创建xhr对象
            const xhr = new XMLHttpRequest();
            // 2.open
            xhr.open('POST', 'http://localhost:8000/server');
            // 3.发送(可任意写法)
            xhr.send('a=100&b=100');
            // 4.事件绑定 处理服务端返回的结果
            xhr.onreadystatechange = function () {
                // 判断状态是否返回了所有结果
                if (xhr.readyState == 4) {
                    //判断响应状态码 200-300之间
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.status);//状态码 
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        res.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>
</html>

server.js

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

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

// 3.创建路由规则(POST方法)
app.post('/server', (request, response) => {
    // request 是对请求报文的封装
    // response 是对响应报文的封装

    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('hello express POST');
});

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

结果：
显示：
在这里插入图片描述

控制台打印：
在这里插入图片描述

标头：
在这里插入图片描述
请求负载
在这里插入图片描述

6. 解决IE缓存

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。

解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址即可避免缓存问题
xhr.open(“get”,"/testAJAX?t="+Date.now())

Continue丶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Ajax请求的五个步骤
m0_54850952的博客
03-08 1万+
目录 Ajax请求的五个步骤 一、定义 1、什么是Ajax 2、同步与异步的区别 3、ajax的工作原理 二、实现AJAX的基本步骤 1、创建XMLHttpRequest对象 2、创建HTTP请求 3、设置响应HTTP请求状态变化的函数 4、设置获取服务器返回数据的语句 5、发送HTTP请求 6、局部更新 三、完整的AJAX实例 Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交
ajax请求的五个步骤
ajdhakj6的博客
09-12 3507
ajax请求的五个步骤
ajax请求php的过程,深入理解ajax异步请求的五个步骤（详细代码）
weixin_29587591的博客
03-11 543
在前端工作中，经常会用到ajax，其实很多人只知道ajax是异步请求，不知道应该如何用它，它的基本步骤有哪些，ajax请求过程是怎样的？接下来这篇文章就给大家介绍Ajax的请求步骤，以及ajax请求步骤的详细代码。感兴趣的朋友可以看看。AJAX(Asynchronous JavaScript and XML)：是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX ...
原生ajax使用
11-29
以下是对原生Ajax使用的详细讲解。 1. **创建XMLHttpRequest对象** 首先，你需要创建一个XMLHttpRequest实例。这是Ajax的基础，所有后续操作都将围绕这个对象进行。 ```javascript var xhr = new XMLHttpRequest...
ajax:原生的ajax，整合了jsonp跨域功能
04-30
一个小型的ajax库，没有使用jquery，减少加载Jquery库的时间，也不用负担Jquery复杂的逻辑处理带来的性能消耗。其中整合jsonp，方便跨域。示例：ajax({ type:"post", url:"", //添加自己的接口链接 timeOut:5000, ...
使用原生js写ajax实例(推荐)
10-19
这个实例展示了如何使用原生JavaScript实现AJAX的基本功能，包括创建请求、设置请求头、发送数据、处理响应状态以及错误处理。这个封装的AJAX函数可以灵活地适应各种不同的请求需求，为开发人员提供了一种简单易用的...
Ajax简单的异步交互及Ajax原生编写
12-12
一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象! 利用ajax实现异步交互无非4步: 1.创建ajax核心对象 2.与服务器建立连接 3.向服务器发送请求 4.接收...
Ajax的原生实现关于MIME类型的使用方法
10-18
在原生Ajax的POST请求中，通常会遇到状态码400（Bad Request）的问题。这表示服务器无法理解客户端的请求。在这种情况下，检查和修改发送的数据格式及MIME类型设置是解决此类问题的关键。 原始代码中，参数以URL...
基于原生ajax与封装的ajax使用方法(详解)
12-08
当我们不会写后端接口来测试ajax时，我们可以使用node环境来模拟一个后端接口。 1、模拟后端接口可参考网站整站开发小例子，在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express –save，安装express中间件。 2、把当中的app.js的内容换成 var express=require('express'); //var path=require('path'); var app=express(); //app.set('view',path.join(__dirname,'views')); //在views目录下搜索所有模板 app.en
原生javascript实现ajax 发送post请求
05-27
原生javascript实现ajax发送pos请求,这样可以脱离jquery框架，
3.AJAX请求5步法
weixin_45582846的博客
11-15 626
AJAX请求5步法 大纲 （1）AJAX请求步骤(初版) （2）AJAX请求类型 （3）跨域+CORS+Network （4）JSON序列化与反序列化/解析 （5）AJAX请求步骤(微调) AJAX请求步骤 AJAX请求5部曲： （1）创建XMLHttpRequest异步对象 （2）设置回调函数，针对不同的响应状态进行处理       &...
创建AJAX五大基本步骤
最新发布
xiaohua616的博客
11-19 2333
同步和异步的区别？ 同步提交：当用户发送请求时，当前页面不可以使用，服务器将数据响应页面到客户端，响应完成后，用户才可以使用页面。异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来。
Ajax 请求的五大步骤
热门推荐
努力努力再努力的博客
05-11 2万+
什么是 Ajax Ajax ： 即 异步JavaScript 和 XML ，Ajax 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，而传统不使用Ajax的网页，如果需要更新内容，必需重载整个网页面。 Ajax 的工作原理 Ajax 的工作原理相当关于在用户和服务器之间加了一个中间层（Ajax 引擎），使用户操作与服务器响应异步化，并不是所有的用户请求都提交给服务器。像一些数据验证和数据
Ajax学习（一）：原生AJAX 的基本使用
激洪的博客
04-10 853
Ajax学习 原生AJAX 的基本使用
初学原生ajax（1）：原生AJAX的简单介绍与使用
lalala_dxf的博客
04-20 1444
ajax 简介 AJAX（Asynchronous Javascript And XML），中文名为异步的Javascript和XML，是一种创建交互式网页应用的网页开发技术，用于浏览器（web）和服务器(后台)之间进行数据交互，并不是一种啥新的语言。 AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不
原生Ajax基础教程：创建与发送Ajax请求详解
原生Ajax是前端开发中实现异步数据交互的一种核心技术，它允许Web应用...在实际开发中，由于库的易用性和跨浏览器兼容性，原生AJAX通常会被封装在像axios这样的库中使用，但它仍然是理解现代前端开发的核心概念之一。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值