Javascript ajax

9.1 学习ajax的前置知识——JSON

• JSON是什么

  • JSON(JavaScript Object Notation)是⼀种轻量级的数据交换格式，它基于JavaScript的⼀个⼦集，易于⼈的编写和阅读，也易于机器解析。 JSON采⽤完全独⽴于语⾔的⽂本格式，但是也使⽤了类似于C语⾔家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等。 这些特性使JSON成为理想的数据交换语⾔
  • JSON是⽤来做数据交换的⼀种语⾔

• JSON的语法格式

  • 属性名称必须是双括号括起来的字符串
  • 最后一个属性不能有逗号

• JSON的作用

  • 用于传输数据

• 序列化和反序列化

  • 对象序列化后可以在⽹络上传输，或者保存到硬盘(浏览器)上。

var obj = {
    name: '张三',
    age: '18',
};
var a = JSON.stringify(obj); // 序列化、转换成JSON格式
var b = JSON.parse(a); // 反序列化 、转换成对象格式
console.log(a)
console.log(b)

9.2 什么是ajax及其使用场景

• 什么是ajax
  • 以前
    • 前后端不分离，后端返回整个html
    • 每次更新⼀些数据，他都会整个网页刷新
  • 现在
    • AJAX 可以在后台与服务器交换数据，无需用户等待整个页面的重新加载。（异步 ）
    • 只需更新页面的局部内容，而不是整个页面，提高了用户体验。
    • 只需传输必要的数据，而不是整个页面，减少了服务器的负载。
    • 前端页面与后端数据逻辑分离，便于开发和维护。
• 同步/异步
  • 在同步请求中，浏览器会等待请求完成后才能继续执行后续的代码。这意味着在请求期间，用户界面可能会冻结，无法响应用户的操作，这会导致用户体验不佳。
  • 在异步请求中，浏览器不会等待请求完成就可以继续执行后续的代码。请求会在后台进行，当请求完成后，通过回调函数（callback）或其他机制（如 Promise）来处理响应结果。
• 原理
  • 通过XmlHttpRequest对象向服务器发异步请求，从服务器获取数据
  • 然后通过js来操作DOM⽽更新⻚⾯
  • 它是在 IE5 中⾸先引⼊的，是⼀种⽀持异步请求的技术
  • 简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，⽽不阻塞程序运⾏，达到⽆刷新的效果
• 注意
  • JavaScript是单线程的，会阻塞代码运⾏，所以引⼊XmlHttpRequest请求处理异步数据

9.3 手写一个ajax请求

• 创建ajax对象

  var xhr
  if(window.XMLHttpRequest){
      // 首先检查当前浏览器的window对象是否具有XMLHttpRequest属性
      // 如果存在则说明浏览器支持XMLHttpRequest对象的标准方式创建
      xhr = new XMLHttpRequest();
  }else{
      // 如果不存在，则为旧版本的IE6或IE5提供兼容处理
      xhr = new ActiveXObject('Microsoft.XMLHTTP')
  }
  

• 设置请求地址及方式

  /*
  第⼀个参数是⽤于指定请求的⽅式，⼀般⽤⼤写
  第⼆个参数代表请求的URL
  第三个参数是表示是否异步发送请求的布尔值，如果不填写，默认为true，表示异步发送，同步已经被弃⽤
  */
  xhr.open("GET","https://api.xdclass.net/pub/api/v1/web/index_card")
  

• 发送请求（可选参数）

  xhr.send()	// get请求默认不发送任何数据，为null
  

• （注册事件）等到浏览器返回结果接受响应

  /*
  注册事件。 onreadystatechange事件，状态改变时就会调⽤。
  如果要在数据完整请求回来的时候才调⽤，我们需要⼿动写⼀些判断的逻辑。
  */
  xhr.onreadystatechange = function () {
  	// 为了保证数据完整返回，我们⼀般会判断两个值
  	if (xhr.readyState === 4 && xhr.status === 200) {
  		alert(xhr.responseText);
  	} else {
  		alert('出错了，Err:' + xhr.status);
   }
  };