ES6（4）ajax

1. ajax原理

1. 创建 XMLHttpRequest 对象

 var xmlhttp; //（实例化对象）
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

2. 向服务器发送请求
   open 第一个参数请求类型 GET POST
   第二个参数请求地址
   第三个参数是否是异步操作

    xmlhttp.open("GET", "Data.json", true);//  规定请求的类型、URL 以及是否异步处理请求。
    xmlhttp.send();// 将请求发送到服务器。

3. 响应
   onreadystatechange: 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

xmlhttp.onreadystatechange = function () {
      // 当 readyState 等于 4 且状态为 200 时，表示响应已就绪
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log(xmlhttp.responseText)
        // 返回的信息是json(字符串类型)，转换成对象类型 便于后续使用
        let res = JSON.parse(xmlhttp.responseText)
        console.log(res)
      }
    }

2. ajax在query下的写法

   <button>登录</button>
   <div></div>
    <script>
        $('button').on('click',function(){
            $.ajax({
                data:{
                    name:'zs',
                    pwd:'xxx'
                },
                method:'GET',
                url:'Data.json',
                dataType:'json',
                success(res){
                    if(res.errno*1 == 0){
                        $('button').html('已登录')
                        $('div').html(res.data.name+'欢迎回来')
                    }else if(res.errno*1 == 1){
                        $('div').html('请重新输入用户名')
                    }else{
                        $('div').html('请重新输入密码')
                    }
                },
                error(res){
                    alart('请重新加载')
                }
            })
        })

3. readyState：

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

4.

200: ok
304: Not Modified 客户端有缓存的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
400: Bad Request 请求出现语法错误
404: 找不到资源
500: 服务器错误
505: HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本