前后端数据交互(二)——原生 ajax 请求详解
一、ajax介绍
ajax 是前后端交互的重要手段或桥梁。它不是一个技术,是一组技术的组合。
ajax :a:异步;j:js;a:和;x:服务端的数据。
ajax的组成:
- 异步的 js 事件
- 其他 js (处理解析数据)
- XMLHttpRequest 对象
- 数据(txt、json、xml、html)
通过后台与服务器进行少量数据交换,ajax可以使网页实现异步更新。也就是在不需要重新加载整个网页的情况下,能够更新部分网页的技术。传统的网页不使用ajax,如果需要更新内容,必须重新加载整个页面。
ajax请求原理:创建一个网络请求对象 -> 发送连接请求 -> 发送请求数据 -> 检查网络请求对象的状态 -> 如果响应成功了 -> 浏览器接收返回数据并更新网页。接下来详细介绍对象的创建以及它的方法。
二、创建 XMLHttpRequest 对象
XMLHttpRequest 对象,用于后台与服务器之间的数据交换,意味着可以在不加载整个网页的情况下,更新部分内容或数据。现代浏览器基本都支持,但是低版本的IE不支持,如果我们考虑IE兼容问题创建对象的时候需要兼容创建。
考虑兼容时创建的对象:
var xhr ;
if( window.XMLHttpRequest ){ //检查浏览器是否支持XMLHttpRequest
xhr = new XMLHttpRequest()
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP") //兼容IE6 IE5
}
三、XMLHttpRequest的方法
3.1、open( )
设置请求的类型、请求接口、是否异步处理。
使用语法:open( method , url , async )
- method:设置网络请求的类型,常用的 get 和 post
- url:设置请求的接口也就是服务器的地址
- async:true时表示异步,false表示同步
3.2、send( )
将请求发送到服务器。
使用语法:send( string )
- string,只用在请求方式是post时,发送给服务器的数据。数据是键值对格式的,如:"name=jack&pwd=1234"
使用发送方式不同的时候,传输数据添加方式也不同,所以我们介绍下分别为post和get时,数据是如何发送的?
3.3、提交方式
- 使用 get 方式提交
get发送请求时,需要传给后台的数据通过url来传递,多个参数之间使用 & 符号连接,使用时如下:
xhr.opn( "GET" , "1.php?name=hello&age=world" , true )
xhr.send()
- 使用 post 方式提交
使用 post 方式发送请求时,使用send来发送数据,有时需要设置数据格式,类似表单那样,此时可通过 setRequestHeader 设置发送的数据格式
xhr.setRequestHeader( "Content-type", "application/x-www-form-urlencoded")
Content-type常见类型:
- text/plain 纯文本,基本不怎么用
- application/x-www-form-urlcoded 键值对格式传值,多个参数使用&连接
- multipart/form-data 定界符,分隔各个数据,经常用于上传文件
四、readyState 属性
readyState 存有 XMLHttpRequest 的状态,它的值从 0-4 发生变化,分别代表的意义:
- 0:请求初始化,对象刚刚创建
- 1:服务器已连接
- 2:已发送,send发放已调用
- 3:已接收,此时只接收了响应(response)头部分
- 4:已接收,此时接收响应(response)体信息
每当 readyState 状态值发生改变时会,就会触发 onreadystatechange 事件,对应着每个状态值就会被触发五次。当状态值为 4 时表示网络请求响应完毕,就可以获取返回的值。
xhr.onreadystateChange = function(){
if( xhr.readyState==4 ){
if( xhr.status>=200 && xhr.status<300 || xhr.status==304 ){
console.log("请求成功",xhr.responseXML)
}else{
console.log("请求失败")
}
}
}
五、响应信息
通常我们需要获取服务器返回的信息,然后对我们的网页做相对应的结果展示,通常使用 XMLHttpRequest 的 responseText 或 responseXML 属性。
responseText ---> 获取到的是字符串形式。接收到可直接使用,无需转换。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML ---> 获取到 XML 形式的数据。使用时需要解析,如:
<person>
<name>小米粒</name>
<age>18</age>
</person>
解析时:
document.getElementsByTagName("name")[0]
responseXML 目前已被 json 取代,所以作为了解就好。
六、ajax实例
var xhr ;
if( window.XMLHttpRequest ){
xhr = new XMLHttpRequest()
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP") //兼容IE6 IE5
}
xhr.open('GET','1.txt',true)
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
console.log("请求成功",xhr.response) // 请求成功 abc
}else{
console.log("请求失败")
}
}
}
1.txt 文档内容为 abc。所以返回的结果也是abc
前后端数据交互(二)——原生 ajax 请求详解的更多相关文章
- 前后端数据交互处理基于原生JS模板引擎开发
json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...
- 前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较
一.ajax.fetch 和 axios 简介 1.1.ajax ajax是最早出现发送后端请求的技术,属于原生 js .ajax使用源码,请点击<原生 ajax 请求详解>查看.一般使用 ...
- 两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...
- 前后端数据交互(八)——请求方法 GET 和 POST 区别
WEB 开发同学一看 get 和 post 请求方法的区别,第一感觉都是 So easy! 学习ajax.fetch.axios时,发送网络请求携带参数时,都需要分别处理get和post的参数.所以我 ...
- vue-resource的使用,前后端数据交互
vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载: https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...
- 对GraphQL-BFF:微服务背景下的前后端数据交互方案的研究-------引用
随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...
- web前后端数据交互
前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...
- 前后端数据交互利器--Protobuf
Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...
- AJAX请求详解 同步异步 GET和POST
AJAX请求详解 同步异步 GET和POST 上一篇博文(http://www.cnblogs.com/mengdd/p/4191941.html)介绍了AJAX的概念和基本使用,附有一个小例子,下面 ...
随机推荐
- Python脚本:爬取天气数据并发邮件给心爱的Ta
第一部分:爬取天气数据 # 在函数调用 get_weather(url = 'https://www.tianqi.com/foshan') 的 url中更改城市,foshan为佛山市 1 impor ...
- winform制作简易屏幕保护工具
效果如下: 具体实现代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using S ...
- Mac卸载软件真不省心啊
最近看看磁盘觉得有点小, 就整理了一下, 经过一番折腾, 发现MacOS卸载软件可真是不省心啊. 从应用里移到垃圾桶仅仅是第一步, 当然对于不读写任何文件的应用也许就可以了. 咱们看看赶紧卸载一个软件 ...
- ECDSA高性能硬件实现——算法详解与模块划分
ECDSA全称椭圆曲线数字签名算法,它是基于素数域的椭圆曲线对信息进行加签与验签.其核心在于对信息的加签,及对加签的信息进行验签,那么下面介绍该算法流程. 假设Alice希望对消息m进行签名,并将消息 ...
- JS的FileSaver在Chrome上保存失败
在使用JavaSript的FileSaver保存文件时,IE11上好的,chrome上反没响应,不能保存文件.寻找了半天,最好发现是因为在FileSaver之外还有一个自定义的全局URL变量,把这个U ...
- 将MNIST手写数据集转换成图片保存到本地
# 加载图片 data = tf.keras.datasets.mnist (x_train, y_train), (x_test, y_test) = data.load_data() plt.im ...
- 常见的嵌入式linux学习和如何选择ARM芯片问答
常见的ARM嵌入式学习问答,设计者和学习者最关心的11个问题: 1. ARM嵌入式是学习硬件好还是学习软件好? 2. 嵌入式软件和硬件,哪一种职位待遇更高?或者说, ...
- React Native 启动流程简析
导读:本文以 react-native-cli 创建的示例工程(安卓部分)为例,分析 React Native 的启动流程. 工程创建步骤可以参考官网.本文所分析 React Native 版本为 v ...
- Asp.Net Core Razor页面中使用echarts展示图形
Asp.Net Core Razor页面中使用echarts展示图形 要在Razor页面中使用echarts显示图形,主要问题点在于如何将数据传递给js文件. 1,下载安装echarts库文件 首先引 ...
- ASP.NET Core导入导出Excel文件
ASP.NET Core导入导出Excel文件 希望在ASP.NET Core中导入导出Excel文件,在网上搜了一遍,基本都是使用EPPlus插件,EPPlus挺好用,但商用需要授权,各位码友若有好 ...