ajax简单使用（内容来源于网络）

已于 2023-03-23 23:15:19 修改
阅读量75 收藏
点赞数
分类专栏： 前端 文章标签： ajax javascript 前端
于 2023-03-19 22:22:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012606318/article/details/129657837
版权

ajax简单使用【VUE版本】

1、前端服务器express的安装

1.1、初始化express服务
npm init --yes # node项目初始化
npm i express # 安装express服务
1.2、设置配置文件
# 根目录下新建一个文件夹ExpressFile【文件夹名自定义】，再创建配置文件expressconfig.js【文件名自定义】，写入如下内容
//1. 引入express
const express = require('express');

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//可以接收任意类型的请求 
app.all('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 允许自定义设置请求头
     response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send('HELLO AJAX POST');
});

// 接收get请求，post同理接收post
app.get('/server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('HELLO AJAX POST');
});

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

1.3、启动express服务

# 终端切换到ExpressFile文件夹下，执行如下语句
node expressconfig.js

# 访问 http://127.0.0.1:8000/

2、原生ajax操作

2.1、GET基本操作
//获取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[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{
            }
        }
    }
}
2.2、post基本操作
//获取元素对象
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;
            }
        }
    }
});
2.3、获取json数据

配置js增加代码

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

请求js代码

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;
            }
        }
    }
}
2.4、IE缓存问题
  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;
              }
          }
      }
  })
2.5、请求超时设置
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(){
        
    }
})
2.6、取消请求设置
let x = null;
btns[0].onclick = function(){
    x = new XMLHttpRequest();
    x.open("GET",'http://127.0.0.1:8000/delay');
    x.send();
}
// 取消请求
btns[1].onclick = function(){
    x.abort();
}
2.7、相同请求发送问题
//标识变量
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;
        }
    }
}

3、jquery发送ajax请求

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <!--crossorigin="anonymous"设置后不会带原网址的cookie-->
    <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>
</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: '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>

4、axios发送ajax请求（vue与react）

<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>
        const btns = document.querySelectorAll('button');
        //配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';
        btns[0].onclick = function () { // GET 请求
            axios.get('/axios-server', {
                params: { //url 参数
                    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'
            	}, 
                {	// 其他参数
                    params: { //url 参数
                        id: 200,
                        vip: 9
                    },
                    headers: { //请求头参数
                        height: 180,
                        weight: 180,
                    }
            	}
             );
        }
        btns[2].onclick = function(){
            axios({
                method : 'POST',//请求方法
                url: '/axios-server',//url
                params: { //url参数
                    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>

注：具体使用可以参考官网

5、fetch函数发送ajax请求

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

6、jsonp使用(跨域1)

6.1、jsonp原理

js请求代码

<script>
     function handle(data) { //处理数据
         const result = document.getElementById('result');  //获取 result 元素
         result.innerHTML = data.name;
 	 }
</script>
<!-- <script src="http://127.0.0.1:5500/%E8%AF%BE%E5%A0%82/%E4%BB%A3%E7%A0%81/7-%E8%B7%A8%E5%9F%9F/2-JSONP/js/app.js"></script> -->
<script src="http://127.0.0.1:8000/jsonp-server"></script>

服务端代码

app.all('/jsonp-server',(request, response) => {
    const data = {
        name: 'wj'
    };
    let str = JSON.stringify(data); //将数据转化为字符串
    response.end(`handle(${str})`);//返回结果
});
6.2、jsonp实践1

js客户端代码

//获取 input 元素
const input = document.querySelector('input');
const p = document.querySelector('p');

function handle(data){ //声明 handle 函数
    input.style.border = "solid 1px #f00";
    //修改 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);
}

服务端代码

app.all('/check-username',(request, response) => {
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    let str = JSON.stringify(data); //将数据转化为字符串
    response.end(`handle(${str})`); //返回结果
});
6.2、jquery实现jsonp实践

js代码

$('button').eq(0).click(function(){
    $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){ # 必须加callback=?'
        $('#result').html(`
        名称: ${data.name}<br>
        校区: ${data.city}
        `)
    });
});

服务端代码

app.all('/jquery-jsonp-server',(request, response) => {
    const data = {
        name:'citys',
        city: ['北京','上海','深圳']
    };
    let str = JSON.stringify(data);  // 将数据转化为字符串
    let cb = request.query.callback; // 接收 callback 参数
    response.end(`${cb}(${str})`);   // 返回结果
});

7、cors跨域处理

app.all('/cors-server', (request, response)=>{
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", '*');
    response.setHeader("Access-Control-Allow-Method", '*');
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); // 指定具体那些请求可以跨域
    response.send('hello CORS');
});

8、nodemon的安装

原由：文件更改后，会自动重启nodejs服务

# 安装nodemon插件
npm install -g nodemon

# 在express配置js文件的目录下执行,启动express[监听ExpressConfig.js文件的改变]
nodemon ExpressConfig.js
山边的微风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端】Ajax请求以及配合express后台服务的用法
Shinersmile的博客
01-19 697
Content-type是网络上传输内容的格式标准，用于定义网络文件的类型和网页的编码。AJAX全称Asynchronous JavaScript And XML，就是异步的JS和XML。通过它可以在浏览器中向服务器发送异步请求，无刷新获取数据。它不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。实现AJAX的执行步骤如4.2。1.1 无需刷新页面与服务器端通信1.2 允许根据用户事件更新部分页面内容2.1 没有浏览历史，不能回退2.2 存在跨域问题。
简单的ajax案例，页面的简单渲染
zhangawei123的博客
11-15 1363
在初学ajax后，我们可以尝试着使用ajax来完成页面的一个简单的渲染。效果就是把几张图片和文字渲染到页面上，来加深我们对ajax的理解和熟悉ajax的应用。有详细步骤的讲解，不需要讲解的大佬也可以去后面看源码。
AJAX请求及请求方式
weixin_59165312的博客
11-21 740
AJAX请求及AJAX请求方式总结
web前端(6)：Ajax的简单使用
不愿意透露姓名的网友
09-21 3200
AJAX （全称：Asynchronous JavaScript and XML）异步的 JavaScript 和 XMLAJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
10个你必须用到Ajax的地方
鸡翅.多!
03-14 180
10个你必须用到Ajax的地方 作者：Alex Bosworth                  创作时间：2005-12-01 译者：benjaminz@eyou.com       翻译时间：2007-03-13 原文地址：http://www.sourcelabs.com/blogs/ajb/2005/12/10_places_you_must_use_ajax.html     现在距离...
简单的ajax聊天室
02-25
【Ajax聊天室详解】 Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的...对于学习Web开发的初学者，这是一个很好的实践项目，有助于掌握Ajax技术和实时通信的基本原理。
PHP简单获取及判断提交来源的方法
10-22
如果找到并且位置为0，这意味着`$url`以''http://www.weisuyun.com'开头，表明请求来源于我们期望的网站。若未找到或不是从该域开始，则返回`false`，在这种情况下，我们将输出“来源不明”。 值得注意的是，`...
小程序-05-JavaScript 网络请求.pptx
最新发布
07-16
- 请求类型的选择（GET适用于简单查询，POST适用于数据提交）。 - 请求头的设置。 - 异常处理。 #### 五、常见的跨域技巧 - **JSONP**：利用标签不受同源策略限制的特点，实现跨域请求。 - **CORS**（Cross-...
Ajax教学实例
09-28
同时，随着技术的发展，现在有许多库和框架（如jQuery、axios、fetch API等）简化了Ajax的使用，让开发者可以更加专注于业务逻辑，而不是底层网络通信。然而，理解Ajax的基本原理对于解决问题和优化性能仍然是至关...
微信小程序ajax实现请求服务器数据，模版遍历数据
03-29
(此图片来源于网络，如有侵权，请联系删除! ) 头部标题和底部tab配置都在 app.json文件中，底部tab位最少两个，最多五个。下面是app.json文件代码和相关注释   [javascript] view plain copy 免责声明：本站...
Ajax使用步骤
xiaoxuya_的博客
09-22 195
1.XMLHttpRequest Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠 XMLHttpRequest，它是一个构造函数 不论是 XMLHttpRequest，还是 Ajax，都没有和具体的某种数据格式绑定 2.Ajax 的使用步骤 2.1.创建 xhr 对象 const xhr = new XMLHttpRequest(); 2.4.监听事件，处理响应 当获取到响应后，会触发 xhr 对象的 readystatechange 事件，可以在该事件中对响应进行处理 ​ readystate
ajax请求php的过程,深入理解ajax异步请求的五个步骤（详细代码）
weixin_29587591的博客
03-11 545
在前端工作中，经常会用到ajax，其实很多人只知道ajax是异步请求，不知道应该如何用它，它的基本步骤有哪些，ajax请求过程是怎样的？接下来这篇文章就给大家介绍Ajax的请求步骤，以及ajax请求步骤的详细代码。感兴趣的朋友可以看看。AJAX(Asynchronous JavaScript and XML)：是指一种创建交互式网页应用的网页开发技术，通过在后台与服务器进行少量数据交换，AJAX ...
Ajax请求
qq_45951559的博客
10-23 1183
Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。 异步提交：当用户发送请求时，当前页
ajax请求步骤，以及文件运行(一)
明知迷途，从未折返
11-22 2733
1
启动AJAX调试
smpig的专栏
03-28 371
1.javascript: alert(frames[4].location);2.javascript: alert(frames[4]._debugResponse = true);
Ajax开始执行时触发 ajaxStart() | Ajax 执行结束后触发 ajaxStop()
Fanbin168的专栏
04-16 4212
《1》 请输入用户的ID编号: 我正在努力加载中哦..... $(function () { $("#btnClick").click(function () { var id=$("#UserId").val(); $.get("loadHandler.a
ajax在页面加载时就加载
得已
01-19 1万+
window.onload=function() { $.ajax({  
$.ajax()方法详解
热门推荐
Ha_Girl的博客
05-31 24万+
$.ajax()方法详解 jquery中的ajax方法参数总是记不住，这里记录一下。 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout: 要求为Number...
Jquery使用Ajax请求调用后台
不爱学习
05-07 1138
很多时候我们都需要Ajax来请求返回数据，这样能提升效率。 但是直接的使用Ajax要写很多的东西，很麻烦，所以Jquery帮我们做了个封装。 这个技术我感觉很重要，而且经常忘了怎么写，还是太菜，所以做一个笔记，遗忘了的时候可以看一看。 先先看Controller层 private void post(HttpServletRequest request, HttpServletRe
深入理解Ajax：从概念到技术关键点
在Ajax中，这可能涉及创建一个简单的页面，使用JavaScript发送一个XMLHttpRequest请求，服务器返回"Hello World"，然后更新页面显示这一信息。 Ajax为Web开发带来了革命性的变化，它优化了用户与Web应用的交互，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值