Ajax介绍和简单示例

 
一、Ajax基本思想与特点

ajax是使js通过XMLHttpRequest(一个对象)来直接与server交互,而不需要reload页面。ajax利用浏览器和web sever之间的异步数据传输来实现页面的局部数据更新/变化。
因此,ajax使得Internet applications更小,更快,更人性化。

 

二、Ajax简单示例代码

1.页面代码:

<h:form id="myForm">
<table>

<tr>
<td>Customer Name:</td>
<td>
<h:selectOneMenu id="custNameList" value="#{backBean.customerId}"
        onchange="getSelectedCustInfo('myForm:custNameList') ">
    <f:selectItem itemValue="" itemLabel=""/>
    <f:selectItems value="#{backBean.customerNameSelectItems}"/>
</h:selectOneMenu>
</td>
</tr>

<tr>
<td>Customer Info:</td>
<td>
<div id="custInfo"></div>   
</td>
</tr>

</table>
</h:form>

2.js代码:

<script type="text/javascript">

var xmlhttp;//创建一个xmlhttp来hold XMLHttpRequest对象

//创建XMLHttpRequst对象的一个实例
function createRequst(){

if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
}

getSelectedCustInfo (elemId){
        createRequst();
       var selectedCustId = document.getElementById(elemId).value;   
   
    var url = "showCustInfo .do?selectedCustId="+selectedCustId;
    xmlhttp.open("GET", url, true);
    xmlhttp.onreadystatechange = refreshPage;
    xmlhttp.send(null);
   
    return false;
}

refreshPage(){

    if (4 == xmlhttp.readyState) {

    if(200 == xmlhttp.status){
        document.getElementById("custInfo").innerHTML=xmlhttp.responseText;
    }
    }
}
</script>

3.web.xml代码(用于声明servlet)

<servlet>
    <description>
        for showing selected customer info
    </description>
    <servlet-name>CustService</servlet-name>
    <servlet-class>
        com.custSys.ajax.CustService
    </servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>CustService</servlet-name>
        <url-pattern>/showCustInfo .do</url-pattern>
    </servlet-mapping>

4.server端代码(servlet):

public class CustService extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        String xmlout = "";
        String selectedCustId = request.getParameter("selectedCustId");

        //判断selectedCustId是否合法
        if (!(selectedCustId.equals(null) || selectedCustId.equals(""))) {

            session.beginTransaction();
           
            // get cust info from db by selectedCustId
            String sql = "SELECT a.customerName,a.customerAge,a.customerCountry FROM customer a "
                + "WHERE a.customerId =?";

            Query q = session.createSQLQuery(sql);
            q.setParameter(0, selectedCustId);
            List list = q.list();
           
            // put custInfo into <table>
            StringBuffer sb = new StringBuffer();
            sb.append("<table class='form'><tr><th style='text-align: center;'>Customer Name</th>"+
                       "<th style='text-align: center;'>Customer Age</th>"+
                    "<th style='text-align: center;'>Customer Country</th>");

            for (int i = 0; i < list.size(); i++) {
               
                String customerName = ((Object[]) list.get(i))[0].toString();
                String customerAge = ((Object[]) list.get(i))[1].toString();
                String customerCountry = ((Object[]) list.get(i))[2].toString();
                   
                sb.append("<tr align='center'>");
                sb.append("<td>" + customerName + "</td>");
                sb.append("<td>" + customerAge + "</td>");
                sb.append("<td>" + customerCountry + "</td>");
                sb.append("</tr>");
            }
           
           
            sb.append("</table>");
           
            xmlout = sb.toString();

            session.getTransaction().commit();
        }
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
       
        PrintWriter out = response.getWriter();
        out.write(xmlout);
        out.close();
    }
}

 

三、代码解释

 首先在下拉框中选择一个customer,当所选customer的值改变了,就调用getSelectedCustInfo() 方法,而在getSelectedCustInfo()方法中,首先调用了createRequest()方法来创建XMLHttpRequst对象的一个实例, 创建XMLHttpRequst对象相当的简单,首先要创建一个全局作用域变量xmlHttp来保存这个对象的引用.然后根据不同的浏览器创建 XMLHttpRequst对象.

  创建XMLHttpRequst对象后,再来看open("GET", url, true),这个方法会建立对服务器的调用,要提供调用的特定方法(GET,POST或PUT),还要提供用调用资源的URL,另外还可以传递一个 BOOLEAN值,指示这个调用是异步还是同步,默认为TRUE,表示请求本质上是异步的.

  每个状态改变时都会触发onreadystatechange这个事件处理器,通常会调用一个JavaScript函数.这个例子中调用了refreshPage()方法.在refreshPage()方法中,readyState是请求的状态,有5个可取值:0=未初始化,1=正在加载,2=已加载,3=交互中,4=完成. status是服务器的HTTP状态码(200对应OK,404对应NOT FOUND等等).


    xmlhttp.responseText是取得服务器的相应,通常为一个串.最后通过"document.getElementById("custInfo").innerHTML=xmlhttp.responseText;"把信息显示在页面面上.。
这里返回的是一个装有custInfo信息的表格。

你可能感兴趣的:(Ajax,servlet,String,object,服务器,XMLhttpREquest)