AJAX操作

已于 2022-03-06 16:28:33 修改
阅读量626 收藏 1
点赞数
文章标签： ajax
于 2022-03-05 18:07:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46483779/article/details/123296001
版权

目录

           AJAX请求的基本操作

要引入express框架

对其基本设置

在进行数据的AJAX操作

给AJAX设置请求参数

设置请求头信息

AJAX-服务器响应JSON数据

1-AJAX请求的基本操作

1.要引入express框架

2.对其基本设置

//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(8111, () => {
    console.log("服务已经启动,8111端口监听中....")
})

3.在进行数据的AJAX操作

<body>
    <button id="btnn">点击发送按钮</button>
    <div id="result"></div>

    <script>
        //获取button元素
        const btn = document.getElementById("btnn");
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function(){
            //1.创建对象
            const xhr = new XMLHttpRequest;
            //2.初始化 设置请求方法 和 url
            xhr.open('GET','http://127.0.0.1:8111/server');
            //3.发送
            xhr.send();
            //4.时间绑定  处理服务器端返回的结果
            //on when 当....时候
            //readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
            //change 改变
            xhr.onreadystatechange = function(){
                //判断(服务端返回了所有的结果)
                if(xhr.readyState === 4){
                    //判断响应状态码 200 404 403 401 500
                    //2xx 表示2开头就为成功
                    if(xhr.status >= 200 && xhr.status<300){
                        //处理结果 行 头 空行 体
                        //1.响应体
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体


                        //设置 result 的文本
                        result.innerHTML = xhr.response; 
                    }else{

                    }
                }
            }
        }
    </script>
</body>

给AJAX  GET请求设置请求参数

xhr.open('GET','http://127.0.0.1:8111/server?a=100&b=200&c=300');

AJAX发送POST请求

    <div id="result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover",function(){
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置类型与 URL
            xhr.open('POST','http://127.0.0.1:8111/server');
            //3.发送
            xhr.send();
            //4.事件绑定
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
app.get('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');

    
    //设置响应体
    response.send("HELLO AJAX");
});

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

    
    //设置响应体
    response.send("HELLO AJAX POST");
});


给POST请求设置参数

            xhr.send('a=100&b=200&c=300');
            xhr.send('a:100&b:200&c:300');
            xhr.send('123345123')

设置请求头信息

            //2.初始化 设置类型与 URL
            xhr.open('POST','http://127.0.0.1:8111/server');
            //设置请求头信息
            //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode');
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencode');
            //3.发送
            //xhr.send();

AJAX-服务器响应JSON数据

app.all('/json-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers','*');
    //响应一个数据
    const data = {
        name:'atguigu'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});
    <div id="result"></div>
    <script>
        //绑定键盘按下事件
        window.onkeydown = function(){
            //new对象
            const xhr = new XMLHttpRequest();
            //初始化
            xhr.open('GET','http://127.0.0.1:8111/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;
                        //手动对数据转换
                        let data = JSON.parse(xhr.response);
                        console.log(data)
                        result.innerHTML = data.name;
                        //自动对数据转换
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>

nodemon自动重启插件安装

终端输入   npm install -g nodemon

IE缓存问题 

        btn.addEventListener('click',function(){
            const xhr = new XMLHttpRequest();
            xhr.open("GET",'HTTP:127.0.0.1:8111/ie?t='+ Date.now());
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
//针对 IE 缓存
app.get('/ie', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send("HELLO ie 2");
})

AJAX请求超时与网络异常处理

//请求超时与网络异常处理  延时响应
app.get('/delay', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    setTimeout(()=>{
    //设置响应体
    response.send("延时响应");
    },3000)
})
const xhr = new XMLHttpRequest();
            //超时设置2s 设置
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function(){
                alert("网络异常，请稍后再试!!")
            }

            //网络异常回调
            xhr.onerror =function(){
                alert("你的网络似乎出现一些问题!!")
            }

AJAX - 取消请求

       //获取元素对象
        const btns = document.querySelectorAll('button');
        let xhr = null;

        btns[0].onclick = function(){
            xhr = new XMLHttpRequest();
            xhr.open("GET",'HTTP:127.0.0.1:8111/delay');
            xhr.send();
        }

        //abort
        btns[1].onclick = function(){
            xhr.abort();
        }

AJAX请求重复发送问题处理

        //获取元素对象
        const btns = document.querySelectorAll('button');

        let xhr = null;
        //标识变量
        let isSending = false; //是否正在发送AJAX请求

        btns[0].onclick = function(){
            if(isSending) xhr.abort(); //如果正在发送请求，则取消改请求，创建一个新的请求
            xhr = new XMLHttpRequest();
            isSending = true;
            xhr.open("GET",'HTTP:127.0.0.1:8111/delay');
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    //修改标识变量
                    issending = false;
                }
            }
        }

Jquery发送AJAX请求(3种)

    <div>jQuery 发送 AJAX 请求</div>
    <button>GET</button>
    <button>POST</button>
    <button>通用型方法</button>
    <script>
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8111/jquery-server',{a:100,b:200}, function(data){
                console.log(data);
            },'json')
        })
        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8111/jquery-server',{a:100,b:200}, function(data){
                console.log(data);
            })
        })
        $('button').eq(2).click(function(){
            $.ajax({
                //url
                url:'http://127.0.0.1:8111/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:200,
                    b:300
                }
            });
        });
    </script>
//jQuery 服务
app.all('/jquery-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');

    response.setHeader('Access-Control-Allow-Headers', '*');
    //response.send('Hello jQuery AJAX');
    const data = {name:'小孩子'};
    //response.send('Hello jQuery AJAX');
    response.send(JSON.stringify(data));

})

 

x_minqu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用ajax操作 JavaScript 对象
10-24
主要介绍了使用ajax操作 JavaScript 对象方法的相关资料,需要的朋友可以参考下
ajax技术 使用详解
xukaiqiang123的博客
10-24 871
一，概念 1，AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 2，AJAX =Asynchronous异步JavaScript and XML. 3，AJAX是一种用于创建快速动态网页的技术。 4，通过在后台与服务器进行少量数据交换, AJAX可以使网页实现异步更新。这意味着可以 在不重新加载整个网页的情况下,对网页的某部分进行更新。 传统的网页(不使用AJAX)如果需要更新内容,必需重载整个网页 二，工作原理 1，AJAX是基于现有的Internet标准,并且联合使用它们: 2，
Ajax请求原理与数据抓取
刘延林
12-17 3400
Ajax 的全称为 Asynchronous JavaScript and XML，即异步的 JavaScript 和 XML，它不是新的编 程语言，而是一种使用现有标准的新方法，它可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的数据。在 W3School 网站上也有几个关于 Ajax 的小实例，有兴趣的读者可以打开网址 http://www.w3school.com.cn/tiy/t.asp?f=ajax_get 去体验一下。
使用ajax发送数据的两种方式
weixin_65616154的博客
09-14 387
使用ajax发送数据的两种方式
如何使用ajax获取后台数据和进行页面渲染
最新发布
weixin_52954097的博客
09-04 2573
注意：直接通过响应拿到的是string格式的数据 需要通过json数据字符串转对象的方法。3.转化成对象类型后就可以根据需求拿对应数据了。act: login/登录 reg/注册。1.eval('('+数据+')')2.使用get请求获取json数据。2.JSON.parse(数据)1.创建一个json文件。
使用ajax操作JavaScript 对象详解
10-24
主要介绍了使用ajax操作JavaScript 对象的相关资料,需要的朋友可以参考下
AJAX操作数据
06-06
AJAX操作数据 AJAX操作数据AJAX操作数据AJAX操作数据AJAX操作数据
设置默认Ajax操作cache and error
10-27
设置默认Ajax操作cache and error，需要的朋友可以参考一下
通过实例解析jQ Ajax操作相关原理
10-14
主要介绍了通过实例解析jQ Ajax操作相关原理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
ajax调用最详细解析
my_my_heart的博客
02-17 1511
ajax 代码 $.ajax({ url: "/Disability/Single", //调用的地址 data: { proIdLists: strIds }, //传送给后台的数据 dataType: "text", //后台返回的数据类型 async: false, //是否启动异步 success: function
Ajax 获取 JSON数据
梁辰兴的博客
11-22 6730
Ajax 全称“Asynchronous JavaScript and XML”，译为“异步 JavaScript 和 XML”，程序员们习惯称之为“阿贾克斯”，通过 Ajax 我们可以异步在服务器与客户端之间传递数据。在 Ajax 中，普遍使用 JSON 作为传输数据的格式。一般情况下，我们可以通过 JavaScript 来发送 Ajax 请求，并接收响应的信息。//发送 Ajax 请求，适用于 Chrome, mozilla 等浏览器。// 发送 Ajax 请求，适用于 IE 浏览器。
获取ajax返回值
weixin_43097497的博客
11-30 3721
项目场景： 动态获取ajax返回值： 在表格数据内根据相关表格内容获取不同的列表 问题描述： let deptList = that.getDeptList(id)获取到ajax的返回值是undefined getDeptList(id){ let that = this let list = [] $.ajax({ async:false, type: "GET", url: "/#?organizeId="+id, success: funct
使用ajax将后台返回的json数据类型在前端页面显示
qq_53542496的博客
06-19 4425
使用ajax将后台返回的json数据类型在前端页面显示
JQuery的AJAX调用（一）——加载传递数据
weixin_34384557的博客
01-10 194
一，load方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中，它的调用格式为： load(url,[data],[callback]) 参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的...
Ajax实现数据回显
酷小亚
09-10 1165
1、在pom.xml中导入依赖 2、在web.xml中配置文件 3、在springmvc中配置文件 4、实体类user 5、在Controller类中编写代码，展示到前端页面 6、jsp前端页面 7、显示效果
Ajax数据格式摘要
您已进入防沉迷系统...
11-05 780
l  在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。 l  从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据： •   XML •   JSON •   HTML （1）XML l  优点： •   XML 是一种通用的数据格式。 •   不必把数据强加到已定义好的格式中，而
ajax获取后台数据的几种方式及如何获取ajax内部的数据供外部使用
热门推荐
Silence-Lee的博客
07-23 1万+
文章目录1 ajax获取后台数据的几种方式1.1 原生js的ajax方式1.1.1 get1.1.2 post1.2 jQuery封装的ajax方式1.2.1 $.ajax1.2.2 $.get1.2.3 $.post 1 ajax获取后台数据的几种方式 1.1 原生js的ajax方式 1.1.1 get //第一步：创建xhr对象 let xhr = null; if(window.XMLHtt...
ajax 请求外部系统数据,怎样在外部函数里面调用ajax加载的数据？
weixin_35786770的博客
08-05 517
在一个ajax函数里要访问另一个ajax创建的标签的属性值，请问实用什么方法？补充代码如下，最后是要获取dl里面各个dd标签属性min-id 的值。wzBrand.creatOrder = function() {//获取商标细则数据$.ajax({type: 'get',url: URL,data: {},dataType: 'json',success: function(data) {var...
物联网开发平台使用Ajax操作数据库
06-10
可以使用Ajax技术来操作数据库，具体实现方式如下： 1. 在前端页面中编写Ajax请求，将数据发送到服务器端； 2. 在服务器端接收到Ajax请求后，使用服务器端脚本（如PHP、Java、Python等）来操作数据库； 3. 服务器端...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值