JavaScript异步Ajax与json总结_js 以下获取服务器响应中,获得json文档对象形式的响应数据的属性是-CSDN博客

本文链接：https://blog.csdn.net/weixin_47221159/article/details/105877854

JavaScript异步Ajax与json总结
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Visual Studio 2015 与 JavaScript
作者：黄富滔
撰写时间：2020年4月30日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
知识点罗列：
Json总结
1、Json简介：
JSON:JavaScript对象表示法（JavaScript Object Notation）
JSON是存储和交换文本信息的语法：
（1）.JSON是轻量级的文本数据交换格式
（2）.JSON独立于语言和平台
（3）.JSON具有自我描述性，更容易理解。
类似于xml,比XML更小、更快、更易解析
(XML:指可扩展标记语言。XML被设计用来传输和存储数据。)
2、 JSON语法是JavaScript对象表示语法的子集
（1） .数据在名称/值对中(数据在键值对中)
（2）.数据由逗号分隔
（3）.花括号保存对象({})
（4）.方括号保存数组([])
3、 JSON值可以是：
数字（整数或浮点数）
字符串（在双引号中）
布尔值（true或false）
数组（在方括号中）
对象（在花括号中）
Null
（json的值没有undefined和NaN）

4、JSON对象与JS对象有2个地方不一样：
（1）.没有声明变量（JSON中没有变量的概念）
（2）.末尾没有分号（因为这不是JavaScript语句，所以不需要分号）
5、JS与json之间的转换
JSON对象有两个方法：
stringify():将JS对象序列化为JSON字符串
parse() :将JSON字符串解析为原生的JS值
语法： JSON.方法(js对象);

6、json的存在形式
（1）json对象
{
"属性": "属性值",
"属性": "属性值",
"属性": "属性值"
}
（2）Json数组
{
{
"属性": "属性值",
"属性": "属性值",
"属性": "属性值"
},
{
"属性": "属性值",
"属性": "属性值",
"属性": "属性值"
}
}

Ajax异步总结：
1、同步与异步
同步：就是指一个进程在执行某个请求的时候，
若该请求需要一段时间才能返回信息，
那么这个进程将会一直等待下去，
直到收到返回信息才继续执行下去；
同步（一共3ms）
请求一 1ms
请求二 1ms
请求三 1ms
异步 1.3ms

异步：是指进程不需要一直等下去，
而是继续执行下面的操作，不管其他进程的状态。
当有消息返回时系统会通知进程进行处理，
这样可以提高执行的效率。

异步实现：
1、运用HTML与CSS来实现页面，表达信息
2、运用XMLHttpRequest和web服务器进行数据的异步交换
3、运用JavaScript操作DOM，实现动态局部刷新

2、什么是 AJAX ？
Ajax不是某种编程语言。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。传统的网页（不使用 AJAX）如果需要更新内容页，必需重载整个网面。
异步的实现分为四个步骤：（1）创建XMLHttpRequest 对象
（2）XMLHttpRequest 对象向服务器发送请求
（3）浏览器与服务器建立连接
（4）服务器响应

3、从服务器上获取数据（）
第一步：XMLHttpRequest 对象的创建
XMLHttpRequest 对象简介：所有现代浏览器均支持 XMLHttpRequest 对象（ IE6以下的浏览器使用 ActiveXObject）。所以当我们处理浏览器兼容性问题是要写一个if判断。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建XMLHttpRequest 对象的语法：var xhr = new XMLHttpRequest();
创建 ActiveXObject的语法： var xhr=new ActiveXObject("Microsoft.XMLHTTP");

第二步：XMLHttpRequest 对象向服务器发送请求
向服务器发送请求，我们要用到XMLHttpRequest 对象中的两个方法open()方法和send()方法
open方法：
open(method,url,asyns) 规定请求的类型、URL 以及是否异步处理请求。
参数说明：
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
说明：async中默认值为true；当你要选择异步时，可以不写该参数。
send()方法：将请求发送到服务器
语法：xhr.open()/xhr.send();

第三步：浏览器与服务器建立连接

第四步：服务器的响应
使用XMLHttpRequest对象的responseText或responseXML属性获取来自服务器的响应（意思就是用该属性去接收服务器中返回的值）
responseText:获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据。
说明：如果使用responseText属性去接收返回值，就要把json服务器中json的值转换为JS对象的值。去接收值得时候不是立刻接收，而是需要一段时间去判断服务器响应是否已经处理完毕，响应完成后才会去接收数据。
XMLHttpRequest对象的三个重要的属性
（1）在XMLHttpRequest对象中，readyState属性存有XMLHttpRequest的状态信息，每当readyState改变时，都会触发onreadystatechange事件，总共会触发四次。
readyState:存有XMLHttpRequest的状态。从0到4发生变化，又称为状态码。
0: 请求未初始化
1: 服务器连接已建立（表示open()方法已经调用）
2: 请求已接收（表示send()方法已经调用）
3: 请求处理中（数据下载中，responseText属性已经包含部分数据）
4: 请求已完成，且响应已就绪（数据接收完成）
简单来说就是记录XMLHttpRequest对象当前是属于什么样的状态，
（2）status: 200: "OK" 404: 未找到页面（当status=200时表示响应已经处理完）
（3）onreadystatechange:存储函数(或函数名),每当readyState属性改变时,就会调用该函数。
简单来说就是发送一个请求后，客户端无法确定是什么时候会完成这个请求，所以需要用事件来捕获请求的状态，XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能。这类似于回调函数的做法。
当readyState等于4且status为 200 时，表示响应已就绪：
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = xhr.responseText;
console.log(txt);
}
}
4、XMLHttpRequest 将页面数据提交给服务器
跟从服务器上获取数据的步骤一样，只不过变量之间的赋值位置交换了。
小结：从服务器上获取数据中服务器数据是以json形式，并且要进行转义。
将页面数据提交给服务器要进行字符串的拼接。