AJAX

什么是AJAX

异步JavaScript和XML。ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。 实现在页面不刷新的情况下和服务端进行数据交互。

//创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest()
//第三个参数的值为 false，则该 XMLHttpRequest请求以同步模式进行，否则该过程将以异步模式完成。
xhr.open('GET', 'url', true)
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4) {
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            //成功了
            console.log(xhr.responseText)
        } else {
            console.log('服务器异常')
        }
    }
}
xhr.send()

readyState状态码

• 0 UNSENT 代理被创建，但尚未调用 open() 方法。
• 1 OPENED open() 方法已经被调用。
• 2 HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。
• 3 LOADING 下载中； responseText 属性已经包含部分数据。
• 4 DONE 下载操作已完成。

var xhr = new XMLHttpRequest()
xhr.open('GET', 'url', true)
xhr.onload = function(){
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        //成功了
        console.log(xhr.responseText)
    } else {
        console.log('服务器异常')
    }
}
xhr.onerror = function(){
    console.log('服务器异常')
}
xhr.send()

封装AJAX

function ajax(method, url) {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open(method, url);
    request.onreadystatechange = () => {
      if (request.readyState === 4) {
        if (request.status === 200) {
          resolve(request.response);
        } else {
          reject(request);
        }
      }
    };
    request.send();
  });
}
ajax("get", "http://qq.com:8888/friends.json").then(response => {
  console.log("这是 AJAX");
  console.log(response);
});

JSON

支持的数据类型

• string，只支持双引号，不支持单引号和无引号
• number，支持科学计数法
• bool， true和false
• null
• object
• array
  不支持函数，也不支持变量

JSON.parse

JSON字符串 => JS数据
将符合 JSON语法的字符串转换成 JS对应类型的数据

JSON.stringify

JS数据 => JSON字符串