JavaScript异步Ajax与json总结

文献种类：专题技术总结文献；
开发工具与关键技术：DW与 JavaScript
作者： 陈良鑫 ；年级： 19 ；撰写时间： 2020 年 4 月 28 日

JavaScript异步Ajax与json总结

开发工具与关键技术：Adobe Dreamweaver JavaScript
作者：陈良鑫
撰写时间：2020年4月28日

通过XMLHttpRequest对象获取json文件中的数据
读取本地的json数据，并反序列化成对象
什么是 AJAX ？
Ajax不是某种编程语言
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图等等
AJAX-创建XMLHttpRequest 对象
什么是XMLHttpRequest对象？
XMLHttpRequest对象用于在后台与服务器交换数据（具体介绍可见w3c）
创建XMLHttpRequest对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari
以及 Opera）均内建 XMLHttpRequest 对象。
创建XMLHttpRequest对象的语法：
var xhr = new XMLHttpRequest();
老版本的Internet Explorer(IE5和IE6)使用ActiveXObject对象：
var xhr=new ActiveXObject(“Microsoft.XMLHTTP”);
为了应对所有的现代浏览器,包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象.如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xhr;
AJAX - 向服务器发送请求
向服务器发送请求,我们使用XMLHttpRequest对象的 open() 和 send() 方法：
open(method,url,asyns) 规定请求的类型、URL 以及是否异步处理请求。
参数说明：
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）Asynchronous
send(string):将请求发送到服务器
参数说明:string 仅用于POST请求
一个简单的GET请求:
xhr.open(“GET”,"/Ajax02/getInfor",true)
xhr.send();
一个简单的POST请求:
xhr.open(“POST”,"/Ajax02/getInfor",true)
xhr.send();
如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头然后在 send() 方法中规定您希望发送的数据：
xhr.open(“POST”,"/jQueryAjax/postPersonInfor",true);
xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
xhr.send(data);//data表单中需要提交的数据（字符串）
setRequestHeader语法：
setRequestHeader(header,value)：向请求添加HTTP头。
参数说明：
header: 规定头的名称
value: 规定头的值
AJAX 服务器响应
使用XMLHttpRequest对象的responseText或responseXML属性获取来自服务器的响应
responseText:获得字符串形式的响应数据。
responseXML：获得 XML 形式的响应数据
AJAX onreadystatechange事件
在XMLHttpRequest对象中，readyState属性存有XMLHttpRequest的状态信息，
每当readyState改变时，就会触发onreadystatechange事件。
下面是XMLHttpRequest对象的三个重要属性：
onreadystatechange:存储函数(或函数名),每当readyState属性改变时,就会调用该函数。
readyState:存有XMLHttpRequest的状态。从0到4发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status: 200: “OK” 404: 未找到页面
在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当readyState等于4且status为 200 时，表示响应已就绪：
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = xhr.responseText;
console.log(txt);
JSON:JavaScript对象表示法（JavaScript Object Notation）
JSON是存储和交换文本信息的语法：
1.JSON是轻量级的文本数据交换格式
2.JSON独立于语言和平台
3.JSON具有自我描述性，更容易理解。
类似于xml,比XML更小、更快、更易解析
(XML:指可扩展标记语言。XML被设计用来传输和存储数据。)
SON语法是JavaScript对象表示语法的子集
1.数据在名称/值对中(数据在键值对中)
2.数据由逗号分隔
3.花括号保存对象({})
4.方括号保存数组([])
JSON值可以是：
数字（整数或浮点数）
字符串（在双引号中）
布尔值（true或false）
数组（在方括号中）
对象（在花括号中）
null
js对象的属性值：
JS的数据类型：String Number Boolean Undefined Null Object（内建对象 自定义对象）
JSON对象与JS对象有2个地方不一样：
1.没有声明变量（JSON中没有变量的概念）
2.末尾没有分号（因为这不是JavaScript语句，所以不需要分号）
JSON数组（在方括号中书写，数组可包含多个对象）
在JSON中，可以采用同样的语法表示一个数组
[23, “hello”, true]
同样注意：JSON数组中没有变量和分号
把数组和对象结合起来，可以构成更加复杂的数据集合，例如：
json数组和对象结合的数据集合
{
“employees”: [
{ “firstName”: “Bill”, “lastName”: “Gates” },
{ “firstName”: “George”, “lastName”: “Bush” },
{ “firstName”: “Thomas”, “lastName”: “Carter” }
]
}
JSON对象有两个方法：
stringify():将JS对象序列化为JSON字符串
parse() [pɑ:z] :将JSON字符串解析为原生的JS值

  链接

发表平台 文章发表网站链接URL 文章发表网站链接【二维码】 发表者
CSDN个人博客
https://blog.csdn.net/

https://blog.csdn.net/weixin_44563954/article/details/86534500

 	学生本人

陈良鑫
CSDN专业技术论坛
https://bbs.csdn.net/
.NET、Java、Web、数据库开发、企业IT（地理信息系统）、云计算、移动开发、开发语言等 每个月发布在同一个主题下，每个月的网页链接和二维码都是同一个。 学生本人

陈良鑫

https://bbs.csdn.net/topics/392512019

百度贴吧：广信IT学院吧
https://tieba.baidu.com/f?kw=%E5%B9%BF%E4%BF%A1it%E5%AD%A6%E9%99%A2

（百度贴吧正文开头添加本文章CSDN的两个发表链接） 每个月发布在同一个主题下，每个月的网页链接和二维码都是同一个。 学生本人

陈良鑫

百度贴吧：广东信息科技职业培训学院吧
https://tieba.baidu.com/f?kw=%E5%B9%BF%E4%B8%9C%E4%BF%A1%E6%81%AF%E7%A7%91%E6%8A%80%E8%81%8C%E4%B8%9A%E5%9F%B9%E8%AE%AD%E5%AD%A6%E9%99%A2
（百度贴吧正文开头添加本文章CSDN的两个发表链接） 学生本人

陈良鑫
广信IT学院
官网
www.gxrjxy.cn

学院督导