Ajax入门例子

来源：互联网发布：443端口是什么编辑：程序博客网时间：2024/04/26 19:48

Ajax的入门例子不少，这里也写一个凑个热闹。

1）最核心的ajax.js文件SRC

/**
* Create HTTPRequest
*
* @sample oj = createHttpRequest()
* @return   HTTPRequest
**/
function createHttpRequest(){
  if(window.ActiveXObject){
    //Win e4,e5,e6
   try {
    return new ActiveXObject("Msxml2.XMLHTTP") ;
   } catch (e) {
    try {
     return new ActiveXObject("Microsoft.XMLHTTP") ;
    } catch (e2) {
     return null ;
   }
  }
  } else if(window.XMLHttpRequest){
    //Win Mac Linux m1,f1,o8 Mac s1 Linux k3?p
   return new XMLHttpRequest() ;
  } else {
   return null ;
  }
}

// httpReqeust send function
//
// @sample         sendRequest(onloaded,'&prog=1','POST','./about2.jsp',true,true)
// @param callback received to callback function name
// @param data   request Data (&Name1=Value1&Name2=Value2...)
// @param method   "POST" or "GET"
// @param url         URL
// @param async    async= true sync=false
// @param sload
// @param user
// @param password
function sendRequest(callback,data,method,url,async,sload,user,password){
  //XMLHttpRequest
  var oj = createHttpRequest();
  if( oj == null ) return null;

  //URL Data Encode
  data = uriEncode(data)
  if(method.toUpperCase() == 'GET') {
   url += data
  }

  //Open http Connection
  oj.open(method,url,async,user,password);

//Header Encode
setEncHeader(oj)

  //Send request
  oj.send(data);

  //Decode result
     var res ;
   oj.onreadystatechange = function (){
   if (oj.readyState == 4) {
  res = decodeURIComponent(oj.responseText)
  callback(res);
  }
}
    return res;


  ///////////Private Function Area///////////////

  /**
    * HttpRequest Header setting
    **/
  function setEncHeader(oj){
   var contentTypeUrlenc = 'application/x-www-form-urlencoded; charset=UTF-8';
   if(!window.opera){
    oj.setRequestHeader('Content-Type',contentTypeUrlenc);
   } else {
    if((typeof oj.setRequestHeader) == 'function')
     oj.setRequestHeader('Content-Type',contentTypeUrlenc);
   }
   return oj
  }

  function uriEncode(data){
   if(data!=""){
    //encode
    var encdata = '';
    var datas = data.split('&');
    for(i=1;i<datas.length;i++){
     var dataq = datas[i].split('=');
     encdata += '&'+encodeURIComponent(dataq[0])+'='+encodeURIComponent(dataq[1]);
    }
   } else {
    encdata = "";
   }
   return encdata;
  }

  return oj
}

2)jsp代码

<%@ page language="java" contentType="text/html; charset=GBK"
pageEncoding="GBK"%>

<html>
<head>
<title>Dynamic Column</title>
<script type="text/javascript" src = "ajax.js"></script>
<script language="javascript">
function setAjax(result){
document.all("testFrm:ajaxTxt").value=result;
document.all("testFrm:ajaxTxt").style.color="green";
}

function getValue(){

var rst =sendRequest(setAjax,"","POST","ajaxServerlet.jsp",true,true,true);
}
</script>
<body>
<B>AJAX SAMPLE</B>
onblur AJAX:<input type=text value=""id="ajaxTxt" onblur="getValue()" style="width:120px;color:red"/>

</body>
</html>

3)Servlet代码

非常简单的例子，也是一个jsp文件：

System.out.println("AJAX Servlet Run!");
out.println(new Date().getTime());
%>