2-1初始Ajax|2-2.2-5Ajax基本用法|2-7GET请求|2-8POST请求

什么是Ajax

　　Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，

　　　　包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，

　　　　而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作

Ajax中的异步：可以异步的向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以自己做自己的事情知道成功过去响应后，浏览器才开始处理响应数据

　　xml（可扩展标记语言）是前后端通信时传出的一种格式

　　xml现在已经不怎么用了，现在比较常用的是JSON

Ajax其实就是浏览器与服务器之间的一种异步通信的方式

　　使用Ajax可以不在重新加载整个页面的情况下对页面的某部分进行更新

搭建Ajax开发环境

　　ajax需要服务环境，非服务环境下，很多浏览器无法正常使用Ajax

Ajax的基本用法

　　Ajax想要实现浏览器与服务器之间的异步通信，需要依靠

　　　　XMLHttpRequest，它是一个构造函数

　　不是xmlHttpRequest，还是Ajax，都没有和具体的某种数据格式绑定

Ajax使用步骤

　　创建xhr对象

const xhr  = new XMLHttpRequest（）；

2.2准备发送请求

　　　xhr.open（’http方法 get ，post ，put，Delete‘，’地址URL：https：//www.imooc.com/api/http/search/suggest?words = js./index.html./inde.xml./index.tex‘）

　　调用open并不会真正的发送请求，而只是做好发送请求的准备工作

发送请求

　　调用send（）正式发送请求

　　send（）的参数是通过请求体携带的数据　　

　　xhr.send（null）；

监听事件处理响应

　　当获取到响应后，触发响应xhr对象的readystatechange事件可以在改事件中对应进行处理

　　readystatechange事件监听readyState 这个状态的变化
            它的值从0~4,一共五个状态
             0:未初始化。尚未调用open()
            1:启动。已经调用open)，但尚未调用send()
            2:发送。已经调用send()，但尚未接收到响应
            3:接收。已经接收到部分响应数据
            4:完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了 

 //3.使用Ajax完成前后端通信
            const url ='https://www.imooc.com/api/http/search/suggest?words=js';
            const xhr =new XMLHttpRequest();
            xhr.onreadystatechange = () =>{
            if(xhr.readyState!== 4) return;

            if(xhr.status>= 200&&xhr.status < 300 ||xhr.status===304){
            console.log(xhr.responseText);
        }
        };
            xhr.open('GET',url,true);
            xhr.send(null);

GET请求

get请求不能通过请求提携数据，但通过请求携带

<script>
        //1.携带数据
        //GET请求不能通过请求体携带参数，但是可以通过请求头携带
        /* const url ='https://www.imooc.com/api/http/search/suggest?words=js&username=yth&age=18';
        const xhr =new XMLHttpRequest();
       
        xhr.onreadystatechange = () =>{
            if(xhr.readyState!== 4) return;
            
            if(xhr.status>= 200&&xhr.status < 300 ||xhr.status===304){
                console.log(xhr.responseText);
            }
        };
        xhr.open('GET',url,true);
        xhr.send(null); */
        //不会报错，但不会发送数据    
        //xhr.send('sex = male');

    </script>

Psot请求

post请求主要是通过请求体携带数据，同时可以通过请求头携带

const url ='https://www.imooc.com/api/http/search/suggest?words=js';
      const xhr =new XMLHttpRequest();

      xhr.onreadystatechange = () =>{
          if(xhr.readyState!== 4) return;
          if(xhr.status>= 200&&xhr.status < 300 ||xhr.status===304){
              console.log(xhr.responseText);
          }
      };
      xhr.open('POST',url,true);
      //如果想发送数据，直接写在send（）参数位置，一
      xhr.send('username=lyw&age=18');

      //不能直接传递对象，需要先将对象转换成字符串的形式

      /*     xhr.send({
              username:'lyw',
              age:18
          }); */
      //【object Object】