【JavaWeb学习】02Ajax

一、JSON

全称：JavaScript Object Notation，即JavaScript 对象表示法。JSON 是轻量级的文本数据交换格式，它独立于语言，更易理解

1.1 标准JSON格式

标准JSON格式要求key必须用双引号包起来。

value的值根据数据类确定，数据类型有：

数据类型	写法
数字（整数或浮点数）	直接写数字
字符串	用双引号括起来
逻辑值	true / false
数组	在方括号中
对象	在花括号中
null

JSON标准字符串就是将标准JSON数据用引号括起来

let jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'

1.2 JSON对象和JSON串的相互转换

代码演示

let jsonStr = '{"name":"Lisi","age":23,"addr":["北京","上海","西安"]}'
//json串转换为对象
let obj = JSON.parse(jsonStr);
 ​
console.log(obj.name + "..." + obj.addr[1])
//对象转换为json串
jsonStr = JSON.stringify(obj);
 ​
console.log(jsonStr);

标准的JSON串才能转换成JSON对象，否则会报错

二、Ajax

全称：Asynchronous JavaScript and XML。允许浏览器在不刷新整个页面的情况下，向服务器发送请求。

2.1 Ajax技术的组成

AJAX并不是一项新技术,其实是多种技术的综合，包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。

XML	AJAX 程序需要某种格式在服务器和客户端之间传递数据，现在已经被JSON代替了
XHTML+CSS	实现基于web标准的数据展示
DOM	实现动态显示和交互
XMLHttpRequest	Ajax的核心，对象进行异步数据读取
JavaScrip	绑定和处理所有数据

使用Ajax的好处：

通过异步交互模式， 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用，最终提升了用户体验 。

异步交互：

可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页技术

2.2 原生Ajax的代码编写

//1. 创建核心对象
     let xhr;
     if (window.XMLHttpRequest) {
         xhr = new XMLHttpRequest();
     } else {
         // code for IE6, IE5，兼容低版本浏览器
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
     
     //2. 发送请求
     xhr.open("GET", "http://localhost:8080/web10-ajax/ajaxServlet");
     xhr.send();
 ​
     //3. 获取响应
     xhr.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
             //获取响应的数据
             alert(this.responseText);
         }
     };