ajax

前端发请求 ==》 打电话
1、拨号 号码：
url 请求地址
2、请求方式 get / post
安全性： get没有 post安全
数据量： get只能发送 普通的 key=value 拼接在请求的 url后面
post可以发送文件
3、携带的参数（非必要） （文件参数， 键值对参数）

4、设置请求头（告知后端 数据格式，额外信息）

5、接收后端响应代码(响应数据的格式，类型)

把一条请求称为 一个 接口（url,method,data,header, respone）
接口文档： 后端生成

 ajax
     
     1、创建xmlHttpRequest对象  xhr
     2、xhr注册readystatechange 事件处理函数
     3、请求配置 xhr.open(mothed, url, true);
     4、设置请求头 xhr.setRequestHeader('Content-Type','')
     5、发送网络请求 xhr.send()

     请求参数：
             get请求， 请求的键值对参数，拼接在 请求url后面
             post请求，单纯键值对参数， xhr.send("拼接字符串")
                       文件+键值对    
                       var  formData = new FormData()
                       formData.append('file', file.files[0])
                       xhr.send(formData);
     响应
       if(xhr.readyState == 4 ){
           if(xhr.status ==> 200-300 || 304){
                xhr.responseText
           } 
       }

xmlHttpRequest

//1、创建xml对象
    var xhr = new XMLHttpRequest();
   
    //2、开启事件监听后端收到数据，并返回响应
    xhr.addEventListener('readystatechange', function () { 
        /*
            xhr.readyState ：表示当前请求的发送阶段
            默认：0  ==》 xhr.open() 未调用
                  1  ==> xhr.send() 还没有被调用
                  2  ==> 服务器尚未接通
                  3  ==> 服务器接通，正在接收服务器响应中
                  4  ==> 响应接收完毕  要接收的服务器数据，在第四个状态中
        */  
        if(xhr.readyState == 4){
             //网络请求状态码 2xx 4xx 5xx
             if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304 ){
                    //获取后端回发的数据 xhr.responseText
                    var data = JSON.parse(xhr.responseText);
                    alert("网络请求结束")
                    console.log(data);
             }
        } 
    })

    //3、配置请求参数  xhr.open(请求方式,url,true)  bool值用来控制网络请求代码的执行顺序
    // true的 异步。 请求成功后回调。 如果写成false，。网络请求之后所有的代码，都要等待
    // 网络请求结束后，才能执行。 影响效率
    xhr.open('post', 'http://www.balooalex.com/qqApi/search.php', true);
  
    //4、配置请求头
    xhr.setRequestHeader('Content-Type', "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Accept" , "text/html/json")

    //5、发送请求
    xhr.send("content=大风吹&page=1");  //只发送 post的键值对数据
    
    // get请求 如果要携带参数，需要在 将参数以键值对的形式拼接在 请求的url后面
    // xhr.open('get', 'http://www.balooalex.com/qqApi/search.php?content=大风吹&page=1', true);
    
     // post请求，如果只携带 键值对参数。需要将参数，以键值对的形式拼接成字符串。放在 xhr.send(中)
    
     // xhr.send("content=大风吹&page=1");  //只发送 post的键值对数据
     
     // post  键值对 ，文件