怎么使用AJAX的GET和POST异步请求

Posted 2020-10-14

1.创建XMLHttpRequest对象
var xmlHttp=createXMLHttpRequest();
function createXMLHttpRequest()
{ 
 var xmlHttp;
 if(Window.XMLHttpRequest)
 { 
  //IE6以上版本和其他浏览器内置XMLHttpRequest对象
  xmlHttp=new XMLHttpRequest();
 }
 else if(Window.ActiveXObject)
 {
  //在IE6及其以下浏览器可以通过ActiveXObject的两个控件来创建，将版本新的放在前面
  var activexName=["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
  for(var i=0; i<activexName.length; i++)
  {
   try
   { //取出一个控件名进行创建，创建成功就终止循环
    xmlHttp=new ActiveXObject(activexName[i]);
    break;
   }
   catch(e){};
  }
 }
 //确认XMLHttpRequest对象创建成功
 if(!xmlHttp)
 {
  alert("XMLHttpRequest对象创建失败！");
  return;
 }
 else 
 {
  //alert(xmlHttp);
  return xmlHttp;
 }
}

2.注册回调函数
xmlHttp.onreadystatechange=callback;

3.初始化XMLHttpRequest对象，设置连接信息
//第一个参数表示http的请求方式，分为GET和POST两种，GET方式请求的参数在URL中
//第二个参数表示请求的url地址，该地址会被解析为绝对地址
//第三个参数表示请求方式是同步或是异步，默认是同步true，第四，五个参数通常不用
xmlHttp.open("GET",url, true);

4.发送数据，开始和服务器端进行交付
//同步方式下：send()这句话会在服务器端的数据传送回来后才执行完，再执行下一条语句
//异步方式下：send()这句话会立即执行完，接着执行下一条语句
//若以POST方式,需要自己设置http的请求头
//xmlHttp.open("POST",url,true);
//xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//xmlHttp.send("name="+value);
xmlHttp.send(null); //该参数为可选，此时也可不写

5.定义回调函数，该函数主要负责接收从服务器端传回来的数据，并在页面上显示
function callback()
{
 //判断对象的交互状态是否完成
 if(xmlHttp.readyState==4)
 {
  //判断http的交互是否成功
  if(xmlHttp.status==200)
  {
   //获取服务器端返回的数据，以纯文本数据或xml文档格式的数据
   var responseText=xmlHttp.responseText;
   //将响应数据显示在页面上
   //以DOM方式或JQuery方式获取文档节点
   var divNode=document.getElementById("#divNode_ID");
   divNode.innerhtml=responseText;
  }
 }
 
}