AJAX：post方式 AND get方式

A.名词解释

           1.Synchronize （同步）

                 在一个任务进行时，不能开启其他任务

                  同步访问：浏览器在向服务器发送请求时只能等待服务器响应，不能做其他事情。

                   ex：

                      a. 地址栏访问 页面（www.baidu.com）

                       b. a标记的默认跳转

                       c.submit按钮的表单提交

             2.Asynchronous（异步）

                   在一个任务进行中时，可以开启其它的任务

                   异步访问：浏览器在向服务器发送请求时，不耽误用户在网页上做其他的操作。

                       ex:

                         a.用户名的重复验证

                         b.搜索提示

                         c.聊天室

                         d.股票走势

B. AJAX（Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）） 

       1.本质

         使用js提供的异步对象（XMLHttpRequest）（xhr），异步的向服务器发送请求，并接受相应数据（数据类型是Xml）

         AJAX请求中，服务器响应回来的是部分数据而不是完整页面，并且可以以无刷新效果来更改页面的局部内容。

          2.创建xhr对象

              标准创建：

                     var xhr=new XMLHttpRequest()

                IE8以下：

                     var xhr=new ActiveXObject("Microsoft.XMLHttp")(注意符号)

                  允许通过window.XMLHttpRequest来判断浏览器是否支持标准创建，如果浏览器不支持标准创建

                   那么window.XMLHttpRequest的值就是null

                            if(window.XMLHttpRequest){

                                     var  xhr=new XMLHttpRequest();

                             }else{

                                    var xhr=new ActiveXObjext("Microsoft.XMLHttp");  

                           }       

           3.XHR常用方法和属性（常用重点）

                  a.  open（）

                      xhr.open("method","url",isAsyn) ; 

                         1.method

                               string 类型

                                请求方式：get/post             

                          2.url

                                string类型  

                                请求地址

                          3.isAsyn

                             boolean类型

                             指定采用同步（false）还是异步（true）的方式发送请求

                   b.readyState 属性

                          作用：表示xhr对象的请求状态

                           值：0-4表示5个状态

                                0：请求尚未初始化

                                1：已经打开服务器的链接，正在发送请求中

                                2：请求完成

                                3.正在接受服务器端的响应

                                4.接收响应数据成功

                            （当readyState的值为4时，才表示所有响应都已经接收完毕）

                   c.status属性

                          作用：服务器的响应状态码

                           值：

                                记住一个值：200

                             当status的值是200时，表示服务器已经正确处理请求并给出响应

                    d.onreadystatechange事件

                            作用：当xhr的readyState属性值发生改变时要自动激发的操作

                               (在xhr对象的状态改变时，这个事件会一直监视它)

                             判断xhr的状态为4并且xhr的status的值为200时，就可以获取/响应数据

                             语法：

                              onreadystatechange=function(){

                                     if（xhr.readyState==4&&xhr.status==200）{

                                             //接收响应回来的值  

                                            var resText=xhr.responseText;

                                             console.log(resText);

                                                }

                                        }

                        e.  send()

                               作用：发送请求

                                语法：xhr.send(body)

                                        body:请求主体

                                        如果没有请求主体，body位置处为null（get），如果有请求主体，则

                         放请求主体数据到body位置(post)

                      发送异步请求的步骤：

                                a.创建xhr对象

                                b.创建请求
                                c.设置xhr的onreadystatechange(回调函数)

                                    判断状态,并接收响应回来的数据   

                                d.发送请求 

                                                                                                                                                                                                    

                        f.

                  get

                  使用get提交方式，发送请求数据（带参数）

                           http://127.0.0.1/login.php?uname=value1&upwd=value2

    function CreateXhr() {
      var  xhr= window.XMLHttpRequest? new XMLHttpRequest():new ActiveXObject("Microsoft XMLHttp")
        return xhr
    }
    console.log(CreateXhr())
var i1=document.getElementById("i1")
     i1.addEventListener("click",function () {
        //创建xhr对象
         var xhr=CreateXhr()
         //创建请求
         var value="xiaoming";
         xhr.open("get",`demo01.php?uname=${value}`,true)
             //设置回调函数
         xhr.onreadystatechange=function () {
             //判断readyState和status
             if(xhr.readyState==4&&xhr.status==200){
                 //接收响应数据
                 var resText=xhr.responseText
                 console.log(resText)
             }
         }
         //发送请求
         xhr.send(null)
     })

                      post

                       使用ajax发送post请求

                               注意：

                                     post请求将数据放在请求主体中

                                        xhr.send(body)

                                        ex: xhr.send("uname=value1");

                                      在发送请求(send)之前需要手动修改请求头 

                                          xhr.setRequestHeader("Content-Type":"application/x-www-form-urlencoded");

      function CreactXhr() {
              var xhr=window.XMLHttpRequest? new XMLHttpRequest():ActiveXObject("Microsoft XMLHttp")
              return xhr
          }
          function login() {
              //创建xhr
               var xhr=CreactXhr();
               //创建请求
              xhr.open("post","post.php",true)
              //设置回调函数
              xhr.onreadystatechange=function () {
                  if(xhr.readyState==4&&xhr.status==200){
                      var res=xhr.responseText;
                      d1.innerHTML=res;
                  }
              }
              //更改请求消息头(get方法没有)
              xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
              var uname=name1.value;
              var upwd=pwd.value;
              //请求主体（get方法没有请求主体）
              var msg=`uname=${uname}&&upwd=${upwd}`;
              xhr.send(msg)
          }