一个完整的Ajax请求

Ajax

ajax 全名 async javascript and XML(异步JavaScript和XML)
是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面

Ajax的操作流程

具体的使用及实现步骤

1.创建XMLHttpRequest对象,也就是创建一个异步调用对象.
 var xhr = new XMLHttpRequest();
        console.log('XHR的就绪状态：',xhr.readyState);
        console.log(xhr.status);
         // 2、监听XHR状态改变事件
        xhr.onreadystatechange = function(){
            console.log('XHR的就绪状态改变了：',xhr.readyState);
            // 只有在xhr.readystate 变为2以后才值
            console.log(xhr.status);
            console.log(xhr.statusText);
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    //处理响应回来的数据
                    doresponse(xhr);
                }
                
            }
        }
        //3、使用XHR连接到Web服务器
        xhr.open('GET','01-ajax.php', true);
        // 4、发送异步的HTTP请求消息
        xhr.send(null);
       //5使用JavaScript和DOM实现局部刷新.
        function doresponse(xhr){
            // 
            document.body.innerHTML = xhr.responseText;
        }
        

请求类型：GET与POST的区别

open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。   
▪ method:请求的类型:GET 或 POST； 
+ ▪ url：文件在服务器上的位置,相对位置或绝对位置；  
▪ async：true（异步）或 false（同步）
send(string) 将请求发送到服务器。string：仅用于 POST 请求

一个简单的Get请求

     xhr.open('GET','01-ajax.php', true);
      xhr.send(null);

与POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
GET请求的特点
· GET 请求可被缓存
· GET 请求保留在浏览器历史记录中
· GET 请求可被收藏为书签
· GET 请求不应在处理敏感数据时使用
· GET 请求有长度限制
· GET 请求只应当用于取回数据

一个简单的Post请求

xmlhttp.open("POST","demo_post.html",true); 
xmlhttp.send();

post请求的特点
· POST 请求不会被缓存
· POST 请求不会保留在浏览器历史记录中
· POST 请求不能被收藏为书签
· POST 请求对数据长度没有要求