Javascript之 Ajax 与 JSON

AJAX 概念

AJAX 全名是“Async JavaScript and XML”，直译为“异步加载 JavaScript 和 XML”，

它的内容为“JS 发请求和收响应”。AJAX里的“X”就指代XML。但由于时代变迁，JSON逐渐取代了XML。

1. AJAX 是浏览器的功能

浏览器可以发送请求，接收响应，浏览器在 window 上加了一个 XMLHttpRequest 函数，

用这个构造函数（类）可以构造一个对象 Node.js，JS 通过它实现发送请求，接收响应

2. 对 AJAX 的理解

AJAX 的内容不影响着后端代码的书写，是前端里面的操作。

AJAX 是把写在 HTML 中有相关路径内容，转移到 JS 里，HTML 里面做一个标记或者不做，当有请求时再给它显示出来到 HTML。

AJAX 可以做到轻量级的请求。

封装AJAX

第一步，创建 XMLHttpRequest对象

function ajax(method, url, callback, data, flag){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();//兼容IE
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHttp');
    }
}

第二步

xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    //监听状态
                    if(xhr.status==200){
                    //监听状态码
                        callback(xhr.responseText);
                    }else{
                        console.log('error');
                    }
                }
            }

第三步

method = method.toUpperCase();
            if (method == 'GET') {
                var date=new Date(),
                    timer=date.getTime();
            //date.getTime()返回 距1970年1月1日的 毫秒数
            //获取到 时间戳
            xhr.open(method,url+'?'+data+'&timer'+timer,flag);
            //打开
            xhr.send();
            //发送数据        
            }else if (method='POST') {
                    xhr.open(url,method,flag);
                    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
                    xhr.send(data);
                }

JSON 概念

JSON 是一门语言，跟 HTML、CSS、XML、JS 一样，是一门独立的语言

JSON 不是编程语言，是标记语言，跟 HTML、XML、Markdown 一样，用来展示数据

JSON 的写法继承于JS中的对象的写法，可以说是一种有严格书写规范的用于传输数据的

对象。

JSON 语法

 JSON 支持的数据类型

• string -- 只支持双引号，不支持单引号和无引号
• number -- 支持科学计数法
• bool -- true 和 false
• null -- 没有 undefined
• object
• array
• // 就这六种，注意跟 JS 的七种数据类型区别开来

不支持函数，不支持变量，也不支持引用

JSON 的使用

五个步骤：

1. 创建 HttpRequest 对象（全称是 XMLHttpRequest）
2. 调用对象的 open 方法
3. 监听对象的 onreadystatechange 事件
4. 调用对象的 send 方法（发送请求）
5. 查验收到的信息 status

window.JSON

1. JSON.parse

将符合 JSON 语法的字符串转换成 JS 对应类型的数据，JSON 字符串 => JS 数据，由于 JSON 只有六种类型，

所以转成的数据也只有 6 种，如果不符合 JSON 语法，则直接抛出一个 Error 对象，一般用 try catch 捕获错误。

2. JSON.stringify

是 JSON.prase 的逆运算，JS 数据 => JSON 字符串，由于 JS 的数据类型比 JSON 多，所以不一定能成功，如果失败，就抛出一个 Error 对象。