对Ajax的简单理解

一、概念

在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。

必须在浏览器上执行。

二、实现过程

//创建Ajax的核心对象XMLHttpRequest,它是ajax的基础
const xhr = new XMLHttpRequest(); 
//与服务端建立连接
xhr.open(method, url, async);    //async true/false 默认为true
//添加http头
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
//向服务端发起请求
xhr.send();
//监听响应状态
xhr.onreadystatechange = function(){
    //请求未完成
    if(request.readyState !== 4) return;
    //请求已成功
    if(xhr.status === 200){
        console.log(xhr.responseText);   //字符串形式的响应数据
        console.log(xhr.responseXml);    //xml形式的响应数据
    }
}

请求方式get/post区别

• 请求方式：get拼接在url后，post是在send(请求体)中；
• 请求数量：get 有数量限制，post没有数量限制；
• 安全性：post安全性较高；

请求状态readyState

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