AJAX响应JSON

最新推荐文章于 2023-03-11 23:28:59 发布
最新推荐文章于 2023-03-11 23:28:59 发布
阅读量565 收藏
点赞数
文章标签： json ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45346547/article/details/124517974
版权 
<!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>JSON响应</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 2px black;
      }
    </style>
  </head>
  <body>
    <div id="result"></div>
  </body>
  <script>
    const result = document.getElementById("result");
    window.onclick = function () {
      console.log("test");
      //
      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;
          //手动对结果进行转化
          //let data = JSON.parse(xhr.response);
          //console.log(data);
          //result.innerHTML = data.name;
          //自动转换，要在前面设置响应体数据类型
          console.log(xhr.response);
          result.innerHTML = xhr.response.name;
        }
      };
    };
  </script>
</html>
//引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO AJAX');
});
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);
});
//监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中。。。")
})

Ajax请求超时与请求异常

//引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.all('/ie',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO IE');
});
app.all('/delay',(request,response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
setTimeout(()=> {
    response.send('延时请求');
},3000)

});
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);
});
//监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中。。。")
})
<!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>JSON响应</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 2px black;
      }
    </style>
  </head>
  <body>
    <button>点击发送请求</button>
    <div id="result"></div>
  </body>
  <script>
    const result = document.getElementById("result");
    const btn = document.getElementsByTagName("button")[0];
    btn.addEventListener("click", function () {
      const xhr = new XMLHttpRequest();
      //超时设置两秒
      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 () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            result.innerHTML = xhr.response;
          }
        }
      };
    });
  </script>
</html>

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>JSON响应</title>
    <style>
      #result {
        width: 200px;
        height: 100px;
        border: solid 2px black;
      }
    </style>
  </head>
  <body>
    <button>点击发送</button>
    <button>点击取消</button>
    <div id="result"></div>
  </body>
  <script>
    const result = document.getElementById("result");
    const btn = document.getElementsByTagName("button");
    let xhr = null;
    //标识变量
    let isSending = false; //是否正在发送ajax请求
    btn[0].onclick = function () {
      xhr = new XMLHttpRequest();
      isSending = true;
      xhr.open("GET", "http:127.0.0.1:8000/delay");
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          //修改标识变量
          isSending = false;
          if (xhr.status >= 200 && xhr.status < 300) {
            result.innerHTML = xhr.response;
          }
        }
      };
    };
    btn[1].onclick = function () {
      xhr.abort();
    };
  </script>
</html>

浮六
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AJAX与JSON
KeepStruggling的博客
10-27 307
1. ajax Ajax （Asynchronous Javascript And XML，异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新，即在不重新加载整个页面的情况下，实现对网页部分更新的效果。 应用场景 检查用户名是否已被注册 省市二联下拉框联动 内容自动补全 1.1 同...
AJAX&JSON
qq_53124400的博客
01-14 290
AJAX 概念 Asynchronous JavaScript And XML :异步的JavaScript 和 XML 异步和同步： Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，通过在后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新。这意味着可以不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页如果需要更新内容，必须重新加载整个网页页面。 实现方式 原生的JS实现方式(了解) JQeury实现方式 ...
xhr对象的属性
weixin_48764380的博客
03-11 1549
原生ajax请求，XMLHttpRequest（）实例化对象xhr的相关属性学习
XMLHttpRequest使用指南大全
吴孔云的博客
01-10 7689
Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是属于不同维度的2个概念。 以下是我认为对Ajax较为准确的解释：（摘自what is Ajax） AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating
请求xml文件（xhr.responseXML取到的值为null）
vi_to的博客
08-22 2019
昨天在学习到Ajax时读取xml文件操作的时候出现了这个问题 xhr.responseXML不能渠道xml文件的信息 如图所示： 我查了许多的资料之后大部分所发是因为response的contentType默认是text/html;charset=utf-8;这个格式可以传送text文本，但是现在需要传送的是xml文件，在ajax页面获取的就是document对象。 但是知道是这个原因之后再在php文件中添加了header(‘content-type:text/xml;charset=utf-8’);这句
AJAX 原生JS处理
snoozeing的博客
04-07 169
AJAX 同步、异步 同步：必须等待当前事情完成后才可进行其他事情 异步：不需要等待其他事情完成即可运行，多件事情同时进行，互不干扰 计时器等，为异步代码，他不会影响其他代码的正常执行（异步的代码自己不影响其他顺序，而不是其他代码不影响异步代码顺序） AJAX，异步操作，异步JS和XML的结合。在不重新刷新界面的情况下，更新界面数据，在请求数据时候，不影响本地操作的正常响应 请求及处理步骤： 1、创建对象 XMLHttpRequest ie7以上 ActiveXObject(‘Microsoft.XMLH
ajax响应json字符串和json数组的实例(详解)
10-20
下面小编就为大家带来一篇ajax响应json字符串和json数组的实例(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ajax返回json对象.zip
04-15
4. **Ajax接收JSON响应**： - **监听状态变化**：使用`onreadystatechange`事件，当`readyState`属性变为4（表示请求完成）时，检查`status`属性判断请求是否成功。 - **解析JSON**：使用`JSON.parse()`方法将...
Ajax+Json案例
02-13
在这个"day22_Ajax&Json"的压缩包中，很可能包含了示例代码和教程，展示了如何使用Ajax向服务器发送Json数据，以及如何接收并解析Json响应。开发者可以通过这些案例学习如何在实际项目中运用Ajax和Json，例如创建一...
ajax+json.pdf
12-10
ASynchronous JavaScript And XML 异步的 JavaScript 和 XML; 异步和同步： 同步和异步本身是相对的 同步就相当于是 当客户端发送请求给服务端，在等待服务端响应的 请求时，客户端不做其他的事情。...Ajax 是一种
深入理解xhr responseType blob arrayBuffer document text json使用
赵英超的博客
09-24 5290
一般的xhr请求 let url = window.URL || window.webkitURL; let xhr = new XMLHttpRequest(); xhr.open(method, url, [,async=true,]); xhr.ontimeout = ()=>{}; xhr.onreadystatechange=()=&gt...
前端网络基础-通过XMLHttpRequest实现AJAX（一）
伏城之外的博客
12-26 2206
Ajax介绍 Ajax（Asynchronous Javascript And XML）即 异步的Javascript和XML。 Ajax是指通过JavaScript发送异步的HTTP请求，请求数据的格式采用XML。 Ajax有三个特点： 1、A：async Ajax一个重要特征就是它可以发送异步的HTTP请求。 而在Ajax出现以前，只有通过刷新网页来实现人为发起同步的HTTP请求。当然也有一些标签支持发起异步的HTTP请求，比如script标签（带defer或async属性），lin..
如何是后台相应response返回json对象形式
axiaobai1999的博客
07-17 629
// 方法1设置响应体数据的类型 json数据格式自动转换** xhr.responseType='json'; console.log(xhr.response); 方法2手动转换 JSON.parse(xhr.response) <!--此时的xhr 返回的response为json对象的形式-->
原生ajax响应json数据
sharesb的博客
04-16 1043
JSON.stringify(data) 将data 转换为json格式 如果data 是 数组格式 则转换之后为[1,12,3] 如果data是 一个类 则转换之后为 {"name":"hxyt"} app.all('/json-server',(request,response)=>{ response.setHeader('Access-Control-Allow-Origin','*'); // 接受所有请求的头信息 response.setH...
Ajax深入浅出
热门推荐
拎着蜗牛跑的壳儿
11-28 50万+
7-AJAX深入浅出 7.1原生AJAX 7.1.1AJAX简介 AJAX 全称为Asynchronous Javascript And XML，就是异步的 JS 和 XML。 通过AJAX可以在浏览器中向服务器发送异步请求。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 7.1.2XML简介 XML可扩展标记语言。 XML 被设计用来传输和存储数据。 XML和HTML类似，不同的是...
Ajax学习：服务端响应Json格式数据的请求
weixin_47295886的博客
11-29 1280
自动设置数据转换（ //自动转换——借助xhr对象上的属性responseType， xhr.responseType='json';首先进行服务器端进行书写——实际上在我的浏览器版本中直接 send直接传递对象也是可以的。手动设置数据转换 json转对象JSON.parse(xhr.response);在窗口下面按下任意一个按键就会向服务端发送请求，服务端会返回结果，在div中显示。在实际工作中，向服务端发送请求，服务端返回的结果大都是json格式的数据，这里的重点是：传递对象给客户端。
javascript ajax responsexml,Ajax调用失败; xhr.responseXML未定义
weixin_29386469的博客
08-05 307
我正在尝试进行简单的ajax调用：当用户选择并选项时，有关该选项的一些信息将回显到div中(这是动态的)这是我的ajax调用代码ajax.js$(document).ready(function(){//Add Event//Currently Broadcasting @Zone$('#beacon0').on('change', function (){var Selected = $(thi...
Ajax基础，xhr和JSON格式
weixin_46273011的博客
04-07 2930
Ajax请求的步骤 1，实例化，2，对请求进行监听，3，准备请求，4，发送请求。 请求的返回，是请求监听处的代码返回的。 <!-- 没有ajax，科研同XMLHttpRequest构造函数实例化来创建 --> <script> //要连接的后端地址 const url = 'https://www.imooc.com/api/http/search/suggest?words=js'; // Ajax的使用步骤
ajax json响应头
最新发布
08-12
- *1* *2* *3* [Ajax学习：服务端响应Json格式数据的请求](https://blog.csdn.net/weixin_47295886/article/details/128087459)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值