Web前端Javascript笔记（8）Ajax前后端交互

认识Ajax

全名Asynchronous Javascript and XML（异步JavaScript和XML），节省用户操作时间，提高用户体验，减少数据请求，传输获取数据。Ajax相当于前后台数据交互的搬运工

xml数据传输格式：

优点:

1. 种类丰富

2. 传输量大

缺点：

1. 解析麻烦

2. 不太适合轻量级数据

json数据传输格式：（移动端）

优点：
1. 轻量级数据

2. 解析比较轻松

缺点：

1. 数据种类少

2. 传输数据量少

同步：阻塞，当前程序的运行，必须等前一个程序运行完以后，才能运行。

异步：当前程序的运行不用等待前一个程序

<script>window.onload = function () {let tag_btn = document.getElementById("btn1");tag_btn.onclick = function () {let ajax = null;if(window.XMLHttpRequest)   // 做浏览器兼容 IE8以下不兼容{ajax = new XMLHttpRequest();  // 创建一个Ajax对象}else{ajax = new ActiveXObject("Microsoft.XMLHTTP");}// 调用open(method, url, bool)方法// 参数： method: 请求方式  post, get// 参数： url: 请求的文件地址// 参数： bool: true 异步  false: 同步ajax.open("get", "../data/test.txt", true);// 调用send()方法，发送请求ajax.send();// 等待数据响应ajax.onreadystatechange = function () {if (ajax.readyState === 4){alert(ajax.responseText);}}}}
</script>

新的ajax兼容方法：

try...catch{}

<script>window.onload = function () {let tag_btn = document.getElementById("btn1");tag_btn.onclick = function () {let ajax = null;try   // 做浏览器兼容 IE8以下不兼容{ajax = new XMLHttpRequest();  // 创建一个Ajax对象// throw new Error("异常信息");  // 同时可以抛出异常}catch (e) {ajax = new ActiveXObject("Microsoft.XMLHTTP");}// 调用open(method, url, bool)方法// 参数： method: 请求方式  post, get// 参数： url: 请求的文件地址// 参数： bool: true 异步  false: 同步ajax.open("get", "../data/test.txt", true);// 调用send()方法，发送请求ajax.send();// 等待数据响应ajax.onreadystatechange = function () {if (ajax.readyState === 4){alert(ajax.responseText);}}}}
</script>

Ajax的onreadyStateExchange

在ajax中，onreadyStateExchange是一个事件，当readyState发生变化的时候，会触发这一事件，readyState一共有5个值，0~4

0：(初始化)还没有调用open()方法

1：（载入）已调用send()方法，正在发送请求

2： (载入完成)send()方法完成，已收全部响应内容

3：（解析）正在解析响应内容

4：（完成）响应内容解析完成，可以在客户端调用了

responseText: 以文本的格式返回数据

responseXML：以XML数据格式返回数据

status状态码：

200：下载成功

404：不存在

ajax中get与post请求：

get请求：将数据拼接到url后面进行提交，参数通过查询字符串的方式传递，这样不安全，且地址栏的数据大小是有限的(最大2k),所以无法完成上传资源。

post请求：不把数据拼接到url后面，通过浏览器内进行提交，更加安全。理论上没有大小限制，适合完成上传任务。

ajax函数的封装

为了使得ajax能够适应各种请求，所以对ajax进行封装

// ajax请求进行封装
function $ajax({method, url, data}) {let ajax = null;try   // 做浏览器兼容 IE8以下不兼容{ajax = new XMLHttpRequest();  // 创建一个Ajax对象}catch (e) {ajax = new ActiveXObject("Microsoft.XMLHTTP");}if (method === "get" && data){url += "?" + data;   // get方法需要将请求参数拼接到url上面}ajax.open(method, url, true);if (method === "get"){ajax.send();}else{// post方法的话需要设置请求头ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");ajax.send(data);}ajax.onreadystatechange = function () {if (ajax.readyState === 4){if (ajax.status === 200){alert(ajax.responseText);}else{alert("Error: " + ajax.status);}}};
}

回调函数：

不同的下载需求，对于数据的处理是不同的，所以需要写一段专门处理数据的代码，这段代码可以称为回调函数，回调函数的作用就是将一段代码作为参数，传递到函数里面，在合适的地方进行调用。

// ajax请求进行封装
function $ajax({method, url, data, success, error}) {let ajax = null;try   // 做浏览器兼容 IE8以下不兼容{ajax = new XMLHttpRequest();  // 创建一个Ajax对象}catch (e) {ajax = new ActiveXObject("Microsoft.XMLHTTP");}if (method === "get" && data){url += "?" + data;   // get方法需要将请求参数拼接到url上面}ajax.open(method, url, true);if (method === "get"){ajax.send();}else{// post方法的话需要设置请求头ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");ajax.send(data);}ajax.onreadystatechange = function () {if (ajax.readyState === 4){if (ajax.status === 200){if (success)    // 判断如果传入了回调函数，则调用回调函数{success(ajax.responseText);    // 执行下载成功的回调函数}}else{if (error)   // 判断是否传入了下载失败的回调函数{error(ajax.status);    // 调用回调函数}}}};
}

JSON对象

数据在前端后端之间进行传输，需要将前端，后端中的数据结构，打包成一种传输效率更高的形式，即字符串。

系统提供了JSON对象，用于抓换JSON格式的数据

1. stringify()：用于将JSON格式的数据转化为JSON格式的字符串

2. parse()：用于将JSON格式的字符串转化为对应的格式

<script>let arr = [1,2,3,"hello"];let new_data = JSON.stringify(arr);alert(typeof new_data);let str = '[1,2,3,"hhh"]';let new_arr = JSON.parse(str);alert(new_arr);let obj = {name: "li",age: 22,sex: "female"};let new_arr1 = JSON.stringify(obj);alert(new_arr1);
</script>

Web前端Javascript笔记（8）Ajax前后端交互相关推荐

Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
Ajax前后端交互利器详解(一)
✍Ajax前后端交互利器
[JavaScript][AJAX] 前后端交互流程,ajax工作流程
目录前后端交互流程 1.了解服务器 : 提供服务器的机器(计算机) 2.前端访问服务器的几种方式 3.ajax技术 : 页面不跳转的情况下,向服务器请求数据 4.前后端交互三个流程 ajax工作流 ...
Web前端JavaScript笔记（3）对象
在JavaScript中没有类这个概念,只有对象,在新ECMA6新版中增加了类的概念,和数组,字符串类似,对象的声明方法也有三种: 1. 通过new运算符进行传件对象 2. 省略new运算符创建对象 ...
Web前端Javascript笔记（6）正则表达式
在web前端中,假设用户需要提交表单,在表单提交到服务器进一步处理之前,Javascript程序会检查表单,以确认用户输入的信息是符合规范要求的.这些工作可以使用正则表达式完成,正则表达式是一个描述字 ...
Web前端Javascript笔记（5）事件
1. 什么是事件:事件是指发生并得到处理的操作 JavaScript中的事件是由访问web页面的用户引起的一系列操作,例如,用户的点击操作,JavaScript中有两种事件模型:内联模型,脚本模型. ...
Web前端 Javascript笔记（1）数组
结构 :html构建样式:css控制行为:JavaScript实现什么是JavaScript? JavaScript是一种跨平台的脚本语言,平台,即运行环境,一般指操作系统. --------- ...
Web前端JavaScript笔记（5）事件-拖拽
阻止默认行为和超链接在浏览器上运行网页后,右击会弹出菜单,这属于浏览器的默认行为.如何禁止这一默认行为: <script>window.onload = function () {doc ...
Web前端JavaScript笔记（7）ECMA6新增数组方法
新增数组方法: 1. Array.from(): 将伪数组转化为真数组 <script>window.onload = function () {let tag_li = documen ...

Web前端Javascript笔记（8）Ajax前后端交互

Web前端Javascript笔记（8）Ajax前后端交互相关推荐

最新文章

热门文章