原生JS AJAX POST请求和GET请求的详细讲解和不同之处

什么是AJAX

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术

GET请求

var xhr = null  // 创建一个xhr空变量

// 1.处理兼容问题  使用try{}catch(error){} 要比if(){}else{}性能更好
try{
    xhr = new XMLHttpRequest() // IE8以上会进入此区间
}catch(error){
    xhr = new ActiveXObject("Microsoft.XMLHTTP");  // IE8以下会进入此区间
}

// 2.初始化  
/*
	参数一 使用get方式 还是 使用post方式  
	参数二 写 url地址
	参数三 false(同步) 还是 true(异步) 默认为true(异步)
*/
xhr.open('get','1.php?name="zhangsan"&age=18',false)

// 3.发送 '名称=值&名称=值&名称=值'
xhr.send('x=7&y=9')

// 4.响应数据
xhr.onreadystatechange=function(){
    if(xhr.readyState == 4){
        if(xhr.status ==200){
            // 状态码 200代表请求成功,一般用于GET与POST请求
            // 404代表没有找到页面
            console.log(xhr.response)
        }
    }
}

POST请求

var xhr = null  // 创建一个xhr空变量

// 1.处理兼容问题  使用try{}catch(error){} 要比if(){}else{}性能更好
try{
    xhr = new XMLHttpRequest() // IE8以上会进入此区间
}catch(error){
    xhr = new ActiveXObject("Microsoft.XMLHTTP");  // IE8以下会进入此区间
}

// 2.初始化  
/*
	参数一 使用get方式 还是 使用post方式  
	参数二 写 url地址
	参数三 false(同步) 还是 true(异步) 默认为true(异步)
*/
xhr.open('post','1.php?name="zhangsan"&age=18',true)

// 如果使用 post 方法需要设置请求头信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

// 3.发送 '名称=值&名称=值&名称=值'
xhr.send('x=7&y=9')

// 4.响应数据
xhr.onreadystatechange=function(){
    if(xhr.readyState == 4){
        if(xhr.status ==200){
            // 状态码 200代表请求成功,一般用于GET与POST请求
            // 404代表没有找到页面
            console.log(xhr.response)
        }
    }
}

POST请求和GET请求的不同之处

1. get是从服务器上获取数据(会暴露客户端ip)，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到action属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5. get安全性非常低，post安全性较高。但是执行效率却比post方法好。

建议：

1. get方式的安全性较post方式要差些，包含机密信息的话，建议用post数据提交方式
2. 在做数据查询时，建议用get方式；而在做数据添加、修改或删除时，建议用post方式