JS中的Ajax操作实例，get方式和post方式对比

AJAX有另外一个名字叫XML HTTP请求，是微软首先创建的。

get和post方式对比

1、get是最常用的方式，get请求的参数数据会追加在请求URL中末尾，用查询语句的形式，即用？符合开始，后面跟着&符号链接起来的名称/值。 如： http://www.somewhere.com/page.php?name1=value1&name2=value2&name3=value3

注意：

所有的名称和值都要经过编码后才能添加到URL中，使用encodeURIComponent（）进行编码。

由于URL最长为2048字节即2KB，所以get方式不适合发送大量数据。

2、post是第二常见的方式，一般来说，post请求用于在表单中数据提交后的过程。因为post方式可以比get方式发送更多的数据，大约2GB，因为post方式发送的数据不是添加在URL中的。

post请求的参数也和get一样，要进行编码，并用&符号分割名称/值。同时还有设置HTTP请求头部。

Get方式

Post方式

function doRequestUsingGET(){ //1、创建XMLHttpRequest对象 if(window.ActiveXObject){   //IE5、IE6浏览器 var xmlHttp = new ActiveXObject("Microsoft.XMLHttp"); }else if(window.XMLHttpRequest){   //其他浏览器 var xmlHttp = new XMLHttpRequest(); } //2、设置回调函数  xmlHttp.onreadystatechange = function() {  if(xmlHttp.readyState==4 && xmlHttp.status==200){  var responseDiv = document.getElementById(serverResponse); responseDiv.innerHTML = decodeURI(xmlHttp.responseText);       }  } //3、创建连接 var queryString = “name1=value1&name2=value2”; var url = “test.php” var data = url+”?”+queryString;  xmlHttp.open("GET",data); //4、发送数据  xmlHttp.send(null);  }

function doRequestUsingPOST(){ //1、创建XMLHttpRequest对象 if(window.ActiveXObject){   //IE5、IE6浏览器 var xmlHttp = new ActiveXObject("Microsoft.XMLHttp"); }else if(window.XMLHttpRequest){   //其他浏览器 var xmlHttp = new XMLHttpRequest(); } //2、设置回调函数  xmlHttp.onreadystatechange = function() {  if(xmlHttp.readyState==4 && xmlHttp.status==200){  var responseDiv = document.getElementById(serverResponse); responseDiv.innerHTML = decodeURI(xmlHttp.responseText);       }  } //3、创建连接 var queryString = “name1=value1&name2=value2”; var url = “test.php” xmlHttp.open("POST",url); //4、设置HTTP请求头部 xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”) //5、发送数据  xmlHttp.send(queryString);  }