构建Ajax应用

利用XMLHttpRequest(XHR)对象，每次构建Ajax应用必须遵循以下步骤：

创建XHR对象

var xmlhttp;

try{

  xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');

}catch(e){

  try{

  xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');

  }catch(e){

  try{

  xmlhttp= new XMLHttpRequest();

  }catch(e){}

  }

} 

创建Ajax请求

Xmlhttp.open(“get”, “ajax.jsp?oper=createUser”);

创建一个请求，利用get方式发送，服务器url为“ajax.jsp?oper=createUser”。

open(method , url , asynchronous , user , password);

其中的参数含义如下：

method：指定请求的类型，一般为get或post;

url：指定请求的地址，可以使用绝对地址或相对地址，可以附带查询字符串

asynchronous：可选参数，标识请求是同步还是异步，异步请求为true,同步请求为false，默认情况下该参数为true；

user：可选参数，指定请求的用户名，没有则省略；

password：可选参数， 指定请求的密码，没有则省略；

发送Ajax请求

var body = “userName=qiyi&sex=male&age=25”;

Xmlhttp.send(body);

该方法仅有一个body参数，它标识要向服务器发送的数据，其格式为查询字符串的形式

处理服务器响应

Http状态码	含义
200	请求成功
202	请求被接收，但处理未完成
400	错误的请求
404	请求资源未找到
500	内部服务器错误

使用status属性判断请求的结果

xmlhttp.onreadystatechange=function(){

  if(xmlhttp.readState ==4){

  if(xmlhttp.status ==200){

  //请求成功完成

  }

  else{

  //网络失败或者服务器错误

  }

  }

}

使用responseText获得返回的文本

定义XMLHttpRequest对象的事件处理程序

xmlhttp.onreadystatechange=function(){ 

  if(xmlhttp.readyState==4){

  if(xmlhttp.status==200){

  //捕捉文本    alert(xmlhttp.responseText);

  }else{

  alert(xmlhttp.status);

  }

  }

}

部分代码如下：

 

 

var xmlHttpRequest = null;

//不同浏览器环境下创建xmlHttpRequest的方式是不一样的 function createXmlHttpRequest() {  try {   //IE5.0   return new ActiveXObject("Msxml2.XMLHTTP");  } catch (e) {   try {    //IE5.0以后版本    return new ActiveXObject("Microsoft.XMLHTTP");   } catch (e) {    try {     //其他浏览器，如Firefox     return new XMLHttpRequest();    } catch (e) {    }   }  } } //验证用户名是否可用 function validateUsername() {  var username = document.getElementById("username").value;  //如果用户名为空，则不执行服务器验证，仅提示用户输入用户名  if (username == "") {   document.getElementById("result").innerText = "请输入用户名";   return;  }  var url = "CheckUserNameServlet?username=" + username;

 //调用createXmlHttpRequest方法创建xmlHttpRequest  xmlHttpRequest = createXmlHttpRequest();

 //发送请求    xmlHttpRequest.open("GET", url, true);  xmlHttpRequest.send(null);    //设置回调函数为getResult  xmlHttpRequest.onreadystatechange = validateResult; } function validateResult() {  //表示请求已完成  if (xmlHttpRequest.readyState == 4) {

  //表示请求成功   if (xmlHttpRequest.status == 200) {    //取得验证结果    var result = xmlHttpRequest.responseText;

   if (result == "1") {     document.getElementById("result").innerText = "该用户已被占用";    } else {     document.getElementById("result").innerText = "该用户可以使用";    }   } else {    alert("请求发送异常，异常编号：" + xmlHttpRequest.status);   }  } }

转载于:https://www.cnblogs.com/loveLiac/archive/2012/06/03/2533215.html