总的来说，Ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个网页的情况下，异步请求数据并刷新页面。举一个小的例子：Goole搜索页面。当用户在输入框输入关键字的时候，JavaScript会把这些字符发送到服务器，然后服务器返回一个搜索建议的列表。
原生的Ajax
原生的Ajax请求离不开XHR对象，即XMLHttpRequest对象。所有现代浏览器都内建有这个对象。
创建整个对象：
var xhr = new XMLHttpRequest();这里有个版本的差异，IE5和IE6使用ActiveX对象。不同的浏览器使用不同的对象。
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}向服务器发送请求
如果需要将请求发送到服务器，我们使用XMLHttpRequest对象的open方法和send方法。
xmlhttp.open("GET","text.txt",true);
xmlhttp.send();open方法规定请求的类型，URL以及异步处理请求。
- method：请求的类型：GET/POST
- url：文件在服务器上的位置
- async：true（异步 ），false（同步）
那到底是使用GET还是使用POST
GET比POST要快，也更简单，并且在大部分情况下都能用。
但是在某些情况下，POST也有一定的好处。
- 无法使用缓存文件（更新服务器上的文件或者数据库）
- 向服务器发送大量的数据（POST没有数据量限制）
- 发送包含未知字符的用户输入的时候，POST比GET更稳定也更可靠
注意：有些时候GET请求得到的缓存的结果，为了避免这个情况，有必要向URL添加信息。
xmlhttp.open("GET","text.txt?t="+Math.random(),true);
xmlhttp.send();通过GET方法发送信息，需要向URL添加信息
xmlhttp.open("GET","text.txt?fname=bill&lname=gates",true);
xmlhttp.send();需要像HTML表单那样POST数据，请使用setRequestHeader()添加HTTP头，然后在send方法中规定希望发送的数据。
xmlhttp.open("POST","ajax_text.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=bill&lname=gates");虽然XHR主要用来从服务器获取数据，但它同样能用于把数据传回服务器。数据可以用GET或者POST的方式传回来，包括任意数量的HTTP头信息，这给你很大的灵活性，当你要传回的数据超出浏览器的最大URL尺寸 限制时XHR特别有用。这种情况下，你可以使用POST方法回传数据。
var url = ‘/data.php‘;
var params = [
‘id=88555‘,
‘limit=20‘
];
var req = new XMLHttpRequest();
req.onerror = function(){
//出错
}
req.onreadystatechange = function(){
if(readyState == 4){
//SUCCESS
}
}
req.open("POST",url,true);
req.setRequestHeader(‘Content-type‘,"application/x-www-form-urlencoded");
req.setRequestHeader(‘Content-length‘,params.length);
req.send(params.join(‘&‘));服务器的响应
如果需要获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或者是responseXML属性。
responseText：获得字符串形式的响应数据
responseXML：获得XML形式的响应数据
分别对其进行解析。
原文地址：https://www.cnblogs.com/sminocence/p/8451272.html