6.1Javascript(ajax的get请求，xml和json两种数据格式）

weixin_48623310

已于 2022-09-24 15:05:54 修改

阅读量515

点赞数

文章标签： javascript ajax json

于 2022-09-24 11:01:56 首次发布

本文链接：https://blog.csdn.net/weixin_48623310/article/details/127022327

版权

AJAX

异步同步概念

同步交互：

用户向服务器发起请求的时候，直到服务器响应的全过程，用户不能做其他操作

例如：表单提交网址请求

异步请求:

用户向服务器发起请求时，在服务器响应请求的全过程，用户可以做其他操作

例如：ajax请求

ajax概念

Ajax：asynchronous javascript and xml 直接翻译就是异步js和xml，属于前端技术

js中定时器就是一个异步技术

原生ajax固定操作步骤

//ajax异步请求固定操作

//创建ajax核心对象XMLHttpRequest
 var xhr = new XMLHttpRequest();

//建立和服务器端的连接
xhr.open("GET","路由");//只展示GET请求 例如xhr.open("GET","/getName?key=value&key=value");


//向服务器端发送请求
xhr.send();

//绑定状态监听事件
xhr.onreadystatechange = ()=>{
    if(xhr.status==200 && xhr.readyState ==4){
//数据接收成功时xhr.readyState值为4，xhr.status值为200表示请求成功
        //常用
        xhr.responseText;//后端返回的JSON字符串  需要使用JSON.parse(后端返回值)或者eval("("+后端返回值+")")转换格式才能使用
        //几乎不用
        xhr.responseXML;//后端返回的XML数据格式
}
    }

两种数据格式(XML和JSON)

XML数据格式

概念

HTML———超文本标记语言专门用来网页

XHTML—— 更严格的html

DHTML—— 动态网页 html+css+js(主要dom)

XML ——— 配置文件|数据格式，可自定义标签

保存数据两种方式：

1.数据库

2.xml文件保存(几乎不用)

使用xml

        1.创建xml文件

2.打开文件第一行写<?xml version="1.0" encoding="utf-8"?>//市场主流1.0版本

3.然后写一个根标签，标签名自定义例如 <标签名></标签名>

4.在根标签内用标签写入要存的数据

        若需要node.js读取存储好的xml文件数据

        前端使用ajax去访问node.js,返回值必须使用 .responseXML来接收，且返回的是一个dom对象

缺点：核心DOM语法解析XML非常繁琐

JSON数据格式

javascrpit object natation js对象表示法本身就是js的一部分

优点:比XML更简洁更快更容易解析

属于字符串数据表示法

1.后端使用：把值从数据库取出来，转换为json字符串

json字符串有：

'[1,2,3,4,5]'

'{"key":value}'

'[{"key":value},{"key":value},{"key":value}]'

'{"key":[1,2,3,4,5]}'

转换为json字符串方法：JSON.stringify(需要);

2.前端解析(2中方法)

1.eval("("+后端返回的值+")");

2.JSON.parse(后端返回的值);

补充h5新特性之WebStorage存储

存储技术：

1.cookie——不好用，解析非常麻烦，能存储最大4KB

2.WebStorage

                sessionStorage——会话级，浏览器关闭时，保存的信息才会自动删除

                localStorage———本地级，只要你不清空，存储信息，一直会保留

增加：xxxStorage.属性名=属性值

删除：

                   删除一个        xxxStorage.removeItem(属性名);

删除所有删除所有xxxStorage.clear();

修改：xxxStorage.属性名=属性值，直接覆盖原属性值

查询：xxxStorage.属性名可获得该值