前端学习(2465):ajax发送请求

原文链接:https://www.cnblogs.com/0x29a/p/11231950.html

1. 创建XMLHttpRequest异步对象

步骤一代码引自:https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp

var xhr;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixhr=new XMLHttpRequest();}
else{// code for IE6, IE5xhr=new ActiveXObject("Microsoft.XMLHTTP");}

图片引自:https://www.cnblogs.com/hyj0608/p/6726852.html?utm_source=itdadao&utm_medium=referral

主流创建ajax对象的方法:
在这里插入图片描述
IE6以下版本浏览器创建ajax对象方法是:
在这里插入图片描述

2. 设置回调函数

xhr.onreadystatechange = callback

3. 使用open方法与服务器建立连接

// get 方式
xhr.open("get", "test.php", true)// post 方式发送数据 需要设置请求头
xhr.open("post", "test.php", true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

4. 向服务器发送数据

// get 不需要传递参数
xhr.send(null)// post 需要传递参数
xhr.send("name=jay&age=18")

5. 在回调函数中针对不同的响应状态进行处理

function callback() {// 判断异步对象的状态if(xhr.readyState == 4) {// 判断交互是否成功if(xhr.status == 200) {// 获取服务器响应的数据var res = xhr.responseText// 解析数据res = JSON.parse(res)}}
}

补充

属性描述
onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
-0: 请求未初始化
-1: 服务器连接已建立
-2: 请求已接收
-3: 请求处理中
-4: 请求已完成,且响应已就绪
status200: “OK”      404: 未找到页面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416464.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql数据库with ur_Python使用MySQL数据库(新)

一,安装mysql如果是windows用户,mysql的安装非常简单,直接下载安装文件,双击安装文件一步一步进行操作即可。Linux 下的安装可能会更加简单,除了下载安装包进行安装外,一般的linux仓库中都会有mysql&#x…

洛谷——P1067 多项式输出

https://www.luogu.org/problem/show?pid1067#sub 题目描述 一元 n 次多项式可用如下的表达式表示: 其中,aixi称为 i 次项,ai 称为 i 次项的系数。给出一个一元多项式各项的次数和系数,请按照如下规定的格式要求输出该多项式&…

前端学习(2466):在前端页面中引入百度地图

1.配置你需要的地图效果百度地图生成器 可选配置:位置、宽高、缩放、标注样式 2.导出导入地图代码点击获取代码,将代码引入到你的html、js、vue等文件中 ps:标注不显示的解决方法:将图标链接换成: var icon new BMap.Icon("…

$动态规划系列(2)——找零钱问题

refer:http://interactivepython.org/courselib/static/pythonds/index.html 1. 问题描述 Tom在自动售货机上买了一瓶饮料,售价37美分,他投入了1美元(1美元 100美分),现在自动售货机需要找钱给他。售货机中现在只有四…

前端学习(2467):在前端页面中引入百度地图

走在前端的大道上 插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示。 由于插槽是一块模板&…

pm961 mysql_Oracle GoldenGate学习之--异构平台同步(Mysql到Oracle)

Oracle GoldenGate学习之--异构平台同步(Mysql到Oracle)如图所示:源端采用Mysql库,目标端采用Oracle库一、OGG安装配置(源端)1、OGG下载https://edelivery.oracle.com/EPD/Download/get_form?egroup_aru_number14841438https://edelivery.oracle.com/EP…

错误记录

1.Soap 1.1 endpoint already registered on address /cxfService答案&#xff1a;web.xml中多配置了 <init-param> <param-name>config-location</param-name> <param-value>classpath:cxf.xml</param-value> </init-param> 2.The serve…

sqlalchemy mysql配置中怎么设置utf8_在SqlAlchemy中,我想要一个列是UTF8?

我注意到我的MySQL数据库在默认情况下没有设置为UTF-8。改为选择latin1_swedish_ci排序规则。在所以我很自然地遇到了一个用户报告的错误&#xff0c;我的应用程序不支持特殊字符。我去确保我的应用程序正确地处理了UTF-8&#xff0c;编写了一个测试&#xff0c;很肯定它可以很…

ado.net mysql 连接池_ADO.NET数据库连接池的介绍 | 学步园

摘录自MSDN&#xff1a;建立池连接可以显著提高应用程序的性能和可缩放性。SQL Server .NET Framework 数据提供程序自动为 ADO.NET客户端应用程序提供连接池。您也可以提供几个连接字符串修饰符来控制连接池行为&#xff0c;请参见本主题内下文中“使用连接字符串关键字控制连…

转:在csv中维护变量参数

问题&#xff1a; 1、我的变量表多&#xff0c;通过之前的csv获取的方式&#xff0c;或者用户变量来维护&#xff0c;比较麻烦 2、我想在脚本之外维护我的变量数据&#xff0c;脱离脚本 解决方案&#xff1a; 1、csv的配置如图&#xff0c;队列是变量名称&#xff0c;第二列是变…

前端学习(2471):vue-echarts和echarts的区别:

vue-echarts和echarts的区别&#xff1a; vue-echarts是封装后的vue插件&#xff0c; 基于 ECharts v4.0.1 开发&#xff0c;依赖 Vue.js v2.2.6&#xff0c;功能一样的只是把它封装成vue插件 这样更方便以vue的方式去使用它。echarts就是普通的js库&#xff0c; vue-echarts特…

python 零代码快速开发平台_现在低代码开发平台和零代码平台区别是什么?

低代码与零代码&#xff0c;可参考一下开发平台在国内已经发展了很久了&#xff0c;从有代码到低代码&#xff0c;甚至有些厂家声称可以无代码&#xff0c;当然无代码只是一个噱头。低代码开发可以解决传统的开发方式的复杂方式&#xff0c;提高开发效率&#xff0c;节省时间成…

JSON.parse()、eval()和JSON.stringify()

1.什么是JSON&#xff1f; JSON全称是JavaScript Object Notation,是一种轻量级的数据交换格式。JSON 与XML具有相同的特性&#xff0c;是一种数据存储格式&#xff0c;但是JSON相比XML 更易于人编写和阅读&#xff0c;更易于生成和解析。 2.json对象和json字符串 json对象可以…

rust edition python3_PyO3首页、文档和下载 - Python 解释器的 Rust 绑定

PyO3 是 Python 的 Rust 绑定&#xff0c;可以用 Rust 语言对 Python 加速。这包括用 Rust 语言运行 Python 代码并与之交互&#xff0c;以及直接编写原生 Python 模块。PyO3 一开始只是作为 rust-cpython 的分支出现, 后来由于 rust-cpython 缺乏维护, PyO3 开始在 Rust 社区流…

solr 配置中文分词器

ik转载于:https://www.cnblogs.com/javabigdata/p/7127639.html