Ajax的请求响应

这篇具有很好参考价值的文章主要介绍了Ajax的请求响应。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Ajax的全称是Asynchronous JavaScript and XML,即异步的JavaScript和XML(传输储存数据)。它是一种在不重新加载整个页面的情况下更新部分页面的技术。

Ajax的原理

1.用户通过页面上的操作(如点击按钮)触发JavaScript函数的执行;

2.JavaScript函数通过XMLHttpRequest对象向服务器发送请求;

3.服务器接收请求后处理数据,并将结果以XML、JSON等格式返回给浏览器;

4.浏览器接收到响应后,使用JavaScript解析数据并进行页面的更新;

5.页面的更新可以是添加、删除或修改DOM元素,也可以是更新部分页面的内容。

Ajax原理中的关键点是异步通信和DOM操作。异步通信指的是浏览器发送请求后可以继续执行其他的操作,并不需要等待服务器返回响应;而DOM操作指的是通过JavaScript动态修改页面的内容。

使用Ajax可以实现快速、动态的页面更新,提高用户的体验和交互性。

使用Ajax请求接收JSON数据
// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求的URL和方法
var url = 'https://api.example.com/data'; // 替换为你的API地址
xhr.open('GET', url, true); // 第三个参数表示是否异步处理请求

// 设置请求头(如果需要的话)
xhr.setRequestHeader('Content-Type', 'application/json'); // 通常用于POST请求

// 定义回调函数,处理服务器响应
xhr.onload = function () {
  if (xhr.status === 200) { // 检查响应状态码是否为200(OK)
    try {
      // 尝试解析返回的JSON数据
      var jsonData = JSON.parse(xhr.responseText);
      
      // 在这里处理JSON数据
      console.log(jsonData);
      // 或者将其传递给其他函数进行进一步处理
      processData(jsonData);
    } catch (error) {
      // 如果解析JSON失败,打印错误信息
      console.error('Error parsing JSON:', error);
    }
  } else {
    // 如果状态码不是200,打印错误信息
    console.error('Request failed. Status:', xhr.status);
  }
};

// 发送请求
xhr.send();

// 处理数据的函数(示例)
function processData(data) {
  // 在这里处理数据
  // 例如,更新DOM,发起其他请求等
}
 使用Ajax请求接收XML数据(不设置请求头是因为默认返回的数据是XML形式) 
// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求的URL和方法
var url = 'https://api.example.com/data.xml'; // 替换为你的API地址,确保返回XML格式数据
xhr.open('GET', url, true); // 第三个参数表示是否异步处理请求

// 设置响应类型为XML
xhr.responseType = 'document';

// 定义回调函数,处理服务器响应
xhr.onload = function () {
  if (xhr.status === 200) { // 检查响应状态码是否为200(OK)
    // 响应成功,处理XML数据
    var xmlDoc = xhr.responseXML; // 这是一个XML文档对象
    if (xmlDoc) {
      // 解析XML数据
      var items = xmlDoc.getElementsByTagName('item'); // 假设<item>是你要获取的元素
      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        // 处理每个item元素,例如读取属性和文本内容
        var id = item.getAttribute('id');
        var name = item.getAttribute('name');
        var value = item.textContent;
        
        // 在这里可以使用这些数据,例如更新DOM或执行其他操作
        console.log('ID: ' + id + ', Name: ' + name + ', Value: ' + value);
      }
    } else {
      console.error('Failed to load XML document');
    }
  } else {
    // 如果状态码不是200,打印错误信息
    console.error('Request failed. Status:', xhr.status);
  }
};

// 设置错误处理函数
xhr.onerror = function () {
  console.error('XMLHttpRequest error occurred');
};

// 发送请求
xhr.send();

扩展:Ajax的封装Axios

1.请求传参
import axios from 'axios';

async function postData() {
  try {
    const response = await axios.post('https://api.example.com/data', {
      firstName: 'Fred',
      lastName: 'Flintstone'
    });

    console.log(response.data);
  } catch (error) {
    console.error('Error posting data:', error);
  }
}

postData();

在上面示例中,我们传递了一个包含firstNamelastName属性的对象作为第二个参数给axios.post方法。axios会自动将这个对象转换为以下的JSON字符串:

{
  "firstName": "Fred",
  "lastName": "Flintstone"
}

同时,axios会自动的设置请求的Content-Typeapplication/json,告诉服务器它正在发送一个JSON格式的数据体。 

如果需要发送一个原始的字符串,例如XML数据,可以这样做: 

import axios from 'axios';

async function postXMLData() {
  try {
    const xmlString = '<request><data>Some XML content</data></request>';

    const response = await axios.post('https://api.example.com/data', xmlString, {
      headers: {
        'Content-Type': 'application/xml' // 手动设置
      }
    });

    console.log(response.data);
  } catch (error) {
    console.error('Error posting XML data:', error);
  }
}

postXMLData();
2.接收返回值 

在这个例子中,response.data通常是一个JavaScript对象,因为axios默认会将JSON字符串解析为对象。因此,你可以直接访问它的属性和方法,就像处理普通的JavaScript对象一样。

axios.get('https://api.example.com/data')
  .then(response => {
    // response.data 通常是服务器返回的JSON数据,已经自动被axios解析为JavaScript对象
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

 在这个例子中,通过设置responseType'text',我们告诉axios不要自动解析响应数据,这样我们就可以手动使用JSON.parse()来解析它。不过,在大多数情况下,让axios自动处理JSON解析会更加方便。

axios.get('https://api.example.com/data', { responseType: 'text' })
  .then(response => {
    // 手动解析JSON字符串为JavaScript对象
    let data = JSON.parse(response.data);
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

获取XML格式的数据并使用:

<template>
  <div>
    <div v-if="error">Error: {{ error }}</div>
    <div v-else>
      <ul>
        <li v-for="item in xmlData" :key="item.id">
          {{ item.nodeName }} - {{ item.textContent }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      xmlData: null,
      error: null
    };
  },
  async created() {
    try {
      const response = await axios.get('https://api.example.com/data', {
        responseType: 'document' // 指定返回XML格式数据
      });

      // 解析XML数据
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(response.data, 'text/xml');

      // 从XML文档中读取数据
      const items = xmlDoc.getElementsByTagName('item'); // 假设每个item是你想要的数据节点
      this.xmlData = [];
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        // 这里可以根据XML结构读取属性或文本内容
        const data = {
          id: item.getAttribute('id'),
          name: item.getAttribute('name'),
          value: item.textContent
        };
        this.xmlData.push(data);
      }

    } catch (error) {
      this.error = 'An error occurred while fetching the XML data.';
      console.error(error);
    }
  }
};
</script>

 文章来源地址https://www.toymoban.com/news/detail-860007.html

 

到了这里,关于Ajax的请求响应的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Ajax学习:如何在Chrome网络控制台查看通信报文(请求报文/响应报文)

    第一步:F12开启控制台, 第二步骤:打开网络标签 然后刷新页面 在网络标签位置处,这时候会出现所有发送的请求  点击第一个:会出现内容  预览部分:是解析 观察解析结果处 标头=headers:主要观察请求头和请求体部分 GET请求部分  请求标头:  点击上方查看源代码:就会

    2024年02月15日
    浏览(56)
  • JavaWeb:vue、AJax、ELement、maven、SpringBoot、、Http、Tomcat、请求响应、分层解耦

    VUE是前端框架,基于MVVM,实现数据双向绑定 框架是半基础软件,可重用的代码模型  Vue-cli 是Vue官方提供的一个脚手架,用于快速生成一个 Vue 的项目模板 1 统一的目录结构 2 本地调试 3 热部署:代码变动,不需要重新运行,就可以加载最新的程序 4 单元测试 5 集成打包

    2024年04月14日
    浏览(53)
  • 前端异步请求并解决跨域问题(Ajax+axios框架)、后端响应多个数据(JSON)

    目录 一、前后端同步异步请求 1.同步请求: 2.异步请求: 3.跨域问题(前端问题) 4.axios框架(封装后) 二、后端向前端响应多个数据-JSON 1.同步请求:         发送一个请求,回应请求,回应的内容会覆盖浏览器中的内容,这样会 打断 前端其他的正常操作。 2.异步请求:

    2024年02月07日
    浏览(71)
  • Node.js-http模块服务端请求与响应操作,请求报文与响应报文

    简单案例创建HTTP服务端: 端口号被占用: 1.关闭当前正在运行监听端口的服务 2.修改其他的端口号 获取请求方式类型 获取请求的 url 地址 通过实例化 URl 对象获取路径与查询字符串 获取 http 协议的版本号 获取 http 的请求头 响应报文组成: 1.响应行 :包含:HTTP 版本号、响

    2024年02月14日
    浏览(48)
  • html-css-js使用axios和ajax获取接口并携带请求头+获取输入框或选择器内容

    需求:使用axios或者Ajax获取接口,有些需要获取到输入框,或者选择器内容之后传给接口,也就是写了几种不同请求的方法,网上有很多方法,本文章算是个归纳吧。 1.github下载axios 我框住的这俩下谁都行,我下的是第一个 Releases · axios/axios (github.com)  下载后解压打开找到

    2024年02月03日
    浏览(46)
  • 抓取网络请求Network中的响应JSON数据,不用JS逆向和RPC,python selenium+browser-proxy

    显然上面的红框是加密数据。   下面正式开始 首先要检查电脑是否安装了JDK8,高版本的好像不行,如果没有安装,则需要进行安装。这里不介绍了。下面下载两个东西: (1)python包的安装:pip3 install browsermob-proxy (2)组件下载地址:https://github.com/lightbody/browsermob-proxy/r

    2024年02月15日
    浏览(63)
  • JS-27 前端数据请求方式;HTTP协议的解析;JavaScript XHR、Fetch的数据请求与响应函数;前端文件上传XHR、Fetch;安装浏览器插件FeHelper

    早期的网页都是通过后端渲染来完成的,即服务器端渲染(SSR,server side render): 客户端发出请求 - 服务端接收请求并返回相应HTML文档 - 页面刷新,客户端加载新的HTML文档; 服务器端渲染的缺点: 当用户点击页面中的某个按钮向服务器发送请求时,页面本质上只是一些数

    2024年02月16日
    浏览(68)
  • OkHttp搞定Http请求

    官方文档 仓库 OkHttp是一款高效的HTTP客户端框架: HTTP/2支持允许对同一主机的所有请求共享一个套接字。 连接池可以减少请求延迟(如果HTTP/2不可用)。 透明GZIP压缩下载大小。 响应缓存完全避免了重复请求的网络。 当网络出现问题时,OkHttp会自动恢复一般的连接问题;若服务

    2024年02月02日
    浏览(36)
  • vue报错:Uncaught SyntaxError: Unexpected token <;也就是前端的js请求响应数据是html格式的原因和解决方法

    “Uncaught SyntaxError: Unexpected token lt;” 错误通常出现在浏览器的开发者工具(console)中,它表示在解析 JavaScript 代码时遇到了意外的 字符。这个错误通常是由以下几种情况引起的: 代码中的 被错误地识别为 HTML 标签的开始:这通常发生在在引用外部 JavaScript 文件时,浏览器

    2024年02月07日
    浏览(47)
  • Java之okhttp3请求方式

    在java开发中,发起http请求是非常常见的需求,常用的有HttpClient,下面聊一下okhttp3的请求方式。 1、引入okhttp3依赖 2、提供springboot工程及http接口 3、http请求 4、请求结果 get请求 post请求 form表单请求 可见发起http请求还是挺方便的,感兴趣的小伙伴可以试试~~~///( v )~~~

    2024年02月13日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包