`

Ajax 例子

AjaxCSSJavaScriptXMLServlet 
阅读更多

 初步的ajax框架

 

 <script language="javascript">
 var XMLHttpReq = false;    
    function createXMLHttpRequest() {
  if(window.XMLHttpRequest) {
   XMLHttpReq = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
   try {
    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
   }
  }
 }
 function sendRequest(url) {
  createXMLHttpRequest();
  XMLHttpReq.open("GET", url, true);
  XMLHttpReq.onreadystatechange = processResponse;
  XMLHttpReq.send(null);
 }
    function processResponse() {
     if (XMLHttpReq.readyState == 4) {
         if (XMLHttpReq.status == 200) {
             var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;
                window.alert(res);               
            } else {
                window.alert("Error Happened!");
            }
        }
    }
 
    function userCheck() {
  var uname = document.myform.uname.value;
  var psw = document.myform.psw.value;
  if(uname=="") {
   window.alert("user name is blank");
   document.myform.uname.focus();
   return false;
  }
  else {
   sendRequest('login?uname='+ uname + '&psw=' + psw);
  }
}

</script>

 

 

 

innerHTML

 

 

 

 

 

的例子（级联菜单的效果）

 

 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link href="images/css.css" type="text/css" rel="stylesheet">
</head>
<script language="javascript" type="text/javascript">
 // 创建级联菜单函数
 function showSubMenu(obj) {
  var currentSort =document.getElementById(obj);
  currentSort.parentNode.style.display = "";
     var subMenu;
     if (currentSort.id=="IBM"){
       subMenu = "&nbsp;&nbsp;IBM-T43";
      }
      else if (currentSort.id=="SONY"){
       subMenu = "&nbsp;&nbsp;SONY-888";
     }
  currentSort.innerHTML = subMenu;
 }

</script>

<table style="BORDER-COLLAPSE: collapse" bordercolor="#111111" cellspacing="0" cellpadding="0" width="200" bgcolor="#f5efe7"

border="0">
 <tr>
  <td align="middle" height="4">
   <img height="4" src="images/promo_list_top.gif" width="100%" border="0" alt="">
  </td>
 </tr>
 <tr>
  <td align="middle" bgcolor="#dbc2b0" height="19">
   <b>笔记本品牌</b>
  </td>
 </tr>
 <tr>
  <td height="20">
   <a onclick="showSubMenu('IBM')">IBM</a>
  </td>
 </tr>
 <tr style="display:none">
  <td height="20" id="IBM">
  </td>
 </tr>
 <tr>
  <td height="20">
   <a onclick="showSubMenu('SONY')">SONY</a>
  </td>
 </tr>
 <tr style="display:none ">
  <td id="SONY" height="20">
  </td>
 </tr>
</table>

操作html文档（动态添加删除行）

 

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link href="images/css.css" type="text/css" rel="stylesheet">
</head>
<script language="javascript" type="text/javascript">

 // 增加品牌函数
 function addSort() {
        var name = document.getElementById("name").value;
     if(name == "" ) {
         return;
     }
    
     var row = document.createElement("tr");
     row.setAttribute("id", name);
     var cell = document.createElement("td");
     cell.appendChild(document.createTextNode(name));
     row.appendChild(cell);
    
     var deleteButton = document.createElement("input");
     deleteButton.setAttribute("type", "button");
     deleteButton.setAttribute("value", "删除");
     deleteButton.onclick = function () { deleteSort(name); };
     cell = document.createElement("td");
     cell.appendChild(deleteButton);
     row.appendChild(cell);
    
     document.getElementById("sortList").appendChild(row);
 //清空输入框
     document.getElementById("name").value = "";
  }

 // 删除品牌函数
 function deleteSort(id) {
  if (id!=null){
      var rowToDelete = document.getElementById(id);
      var sortList = document.getElementById("sortList");
      sortList.removeChild(rowToDelete);
  }
 }

</script>

<table style="BORDER-COLLAPSE: collapse" bordercolor="#111111" cellspacing="0" cellpadding="2" width="400" bgcolor="#f5efe7" border="0">
 <tr>
  <td align="middle" height="4" colspan="3">
   <img height="4" src="images/promo_list_top.gif" width="100%" border="0" alt="">
  </td>
 </tr>
 <tr>
  <td align="middle" bgcolor="#dbc2b0" height="19" colspan="3">
   <b>品牌信息管理</b>
  </td>
 </tr>
 <tr>
  <td height="20">
   增加新品牌:
  </td>
  <td height="20">
   <input id="name" type="text" size="15">
  </td>
  <td height="20">
   <img src="images/ok.gif" onclick="addSort();" alt="">
  </td>

 </tr>
 <tr>
  <td height="20">
   品牌信息管理:
  </td>

 </tr>
 <table border="1" width="400">
  <tr>
   <td height="20" valign="top" align="center">
    品牌名称:
   </td>
   <td id="pos_1" height="20">
    操作
   </td>
  </tr>
  <tbody id="sortList"></tbody>
 </table>
</table>

 

解析xml文档（请求一个xml文档，然后在XMLHttpReq.responseXML中解析，在页面显示出来）

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
 <META http-equiv=Content-Type content="text/html; charset=UTF-8">
 <LINK href="images/css.css" type=text/css rel=stylesheet>
</head>
<script language="javascript">
 var XMLHttpReq;
 var PREFIX = "Sort";
  //创建XMLHttpRequest对象      
    function createXMLHttpRequest() {
  if(window.XMLHttpRequest) { //Mozilla 浏览器
   XMLHttpReq = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) { // IE浏览器
   try {
    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
   }
  }
 }
 // 增加品牌函数
 function sendRequest() {
     var url = "MyXml.xml";
     createXMLHttpRequest();
     XMLHttpReq.onreadystatechange = processResponse;
     XMLHttpReq.open("GET", url, true);
     XMLHttpReq.send(null);
 }
 // 处理增加品牌响应函数
    function processResponse() {
     if (XMLHttpReq.readyState == 4) { // 判断对象状态
         if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
             readXml();
            } else { //页面不正常
                window.alert("您所请求的页面有异常。");
            }
        }
    }

 function readXml() {
  var students = XMLHttpReq.responseXML.getElementsByTagName("student");
  alert(students.length);
  for(var i=0;i<students.length;i++) {
   var stud = students[i];
   var name = stud.getElementsByTagName("sname")[0].firstChild.data;
   var gre = stud.getElementsByTagName("gre")[0].firstChild.data;
   var tse = stud.getElementsByTagName("tse")[0].firstChild.data;
   document.write(name + "<p>");
   document.write(gre + "<p>");
   document.write(tse);
   document.write("");
  }  
 }

 

</script>

<table>
       <input type="button" value="测试" onclick="sendRequest();"/>
</table>

 

 

post方式提交请求

 

 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
 <META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script language="javascript">
 var XMLHttpReq = false;
 var uname;
 var psw;
  //创建XMLHttpRequest对象      
    function createXMLHttpRequest() {
  if(window.XMLHttpRequest) { //Mozilla 浏览器
   XMLHttpReq = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) { // IE浏览器
   try {
    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
   }
  }
 }
 //发送请求函数
 function sendRequest() {
  createXMLHttpRequest();
  XMLHttpReq.open("POST", "login", true);
  XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
     XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   
  XMLHttpReq.send("uname=" + uname + "&psw=" + psw);  // 发送请求
 }
 // 处理返回信息函数
    function processResponse() {
     if (XMLHttpReq.readyState == 4) { // 判断对象状态
         if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
             var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;
                window.alert(res);               
            } else { //页面不正常
                window.alert("您所请求的页面有异常。");
            }
        }
    }
 // 身份验证函数
    function userCheck() {
  uname = document.myform.uname.value;
  psw = document.myform.psw.value;
  if(uname=="") {
   window.alert("用户名不能为空。");
   document.myform.uname.focus();
   return false;
  }
  else {
   sendRequest();
  }
 }

</script>

<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名： <input size="15" name="uname"><p>
密&nbsp;&nbsp;码： <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" onclick="userCheck()" >
</form>

 

 

提交xml格式的请求参数，然后在servlet端解析这个xml (!!!)

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
 <META http-equiv=Content-Type content="text/html; charset=UTF-8">
</head>
<script language="javascript">
 var XMLHttpReq = false;
 var uname;
 var psw;
  //创建XMLHttpRequest对象      
    function createXMLHttpRequest() {
  if(window.XMLHttpRequest) { //Mozilla 浏览器
   XMLHttpReq = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) { // IE浏览器
   try {
    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
   }
  }
 }
 //发送请求函数
 function sendRequest() {
  createXMLHttpRequest();
     var xml = createXML();
     alert(xml);
        XMLHttpReq.open("POST", "login", true);
  XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
     XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   
  XMLHttpReq.send(xml);  // 发送请求
 }
 // 处理返回信息函数
    function processResponse() {
     if (XMLHttpReq.readyState == 4) { // 判断对象状态
         if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
             var res=XMLHttpReq.responseText;
                window.alert(res);               
            } else { //页面不正常
                window.alert("您所请求的页面有异常。");
            }
        }
    }
 // 身份验证函数
    function userCheck() {
  uname = document.myform.uname.value;
  psw = document.myform.psw.value;
  if(uname=="") {
   window.alert("用户名不能为空。");
   document.myform.uname.focus();
   return false;
  }
  else {
   sendRequest();
  }
 }
 //创建XML
 function createXML() {
     var xml = "<user>";
     xml = xml + "<name>" +uname + "<\/name>";
     xml = xml + "<psw>" + psw + "<\/psw>";
     xml = xml + "<\/user>";
     return xml;
 }

</script>

<body vLink="#006666" link="#003366" bgColor="#E0F0F8">
<img height="33" src="enter.gif" width="148">
<form action="" method="post" name="myform">
用户名： <input size="15" name="uname"><p>
密&nbsp;&nbsp;码： <input type="password" size="15" name="psw"><p>
<input type="button" value="登录" onclick="userCheck()" >
</form>

 

servlet端代码

 package classmate;

import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.ParserConfigurationException;

import org.w3c.dom.Document;
import org.w3c.dom.NodeList;
import org.xml.sax.SAXException;


public class LoginXmlAction extends HttpServlet {
   
 public void init(ServletConfig config) throws ServletException {
    }
   
    /*
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {

     request.setCharacterEncoding("UTF-8");
     //
        StringBuffer bxml = new StringBuffer();
        String line = null;
        try {
            BufferedReader reader = request.getReader();
            while((line = reader.readLine()) != null) {
                bxml.append(line);
            }
        }
        catch(Exception e) {
            System.out.println(e.toString());
        }
      
        String xml =bxml.toString();
        Document xmlDoc = null;
        try {
            xmlDoc =
                    DocumentBuilderFactory.newInstance().newDocumentBuilder()
                    .parse(new ByteArrayInputStream(xml.getBytes()));
        }
        catch(ParserConfigurationException e) {
            System.out.println(e);
        }
        catch(SAXException e) {
            System.out.println( e);
        }

  String uname = xmlDoc.getElementsByTagName("name").item(0).getFirstChild().getNodeValue();
  String psw = xmlDoc.getElementsByTagName("psw").item(0).getFirstChild().getNodeValue();  
  String responseText;
  if(uname.equals("jenny") && psw.equals("hi")){
   responseText = "succeed";
  }else{
   responseText = "failed"
  } 
   
        response.setContentType("text/xml; charset=UTF-8");
        response.setHeader("Cache-Control", "no-cache");
        response.getWriter().print(responseText);
      
    }
}

 

 

Autocomplete Jsp 端

 

 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<HTML><HEAD><TITLE>Shopping Online</TITLE>
 <META http-equiv=Content-Type content="text/html; charset=UTF-8">
 <LINK href="images/css.css" type=text/css rel=stylesheet>
</HEAD>
<script language="javascript">
 var XMLHttpReq;
    var completeDiv;
    var inputField;
    var completeTable;
    var completeBody;
   
   
  //创建XMLHttpRequest对象      
    function createXMLHttpRequest() {
  if(window.XMLHttpRequest) { //Mozilla 浏览器
   XMLHttpReq = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) { // IE浏览器
   try {
    XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
   }
  }
 }
 //发送匹配请求函数
    function findNames() {
        inputField = document.getElementById("names");           
        completeTable = document.getElementById("complete_table");
        completeDiv = document.getElementById("popup");
        completeBody = document.getElementById("complete_body");
        if (inputField.value.length > 0) {
            createXMLHttpRequest();           
            var url = "autoComplete?action=match&names=" + escape(inputField.value);                       
            XMLHttpReq.open("GET", url, true);
            XMLHttpReq.onreadystatechange = processMatchResponse;//指定响应函数
            XMLHttpReq.send(null); // 发送请求
        } else {
            clearNames();
        }
    }
 // 处理返回匹配信息函数
    function processMatchResponse() {
     if (XMLHttpReq.readyState == 4) { // 判断对象状态
         if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
                    setNames(XMLHttpReq.responseXML.getElementsByTagName("res"));
            }else { //页面不正常
                window.alert("您所请求的页面有异常。");
            }
        }
    }
 //生成与输入内容匹配行
         function setNames(names) {           
            clearNames();
            var size = names.length;
            setOffsets();

            var row, cell, txtNode;
            for (var i = 0; i < size; i++) {
                var nextNode = names[i].firstChild.data;
                row = document.createElement("tr");
                cell = document.createElement("td");
               
                cell.onmouseout = function() {this.className='mouseOver';};
                cell.onmouseover = function() {this.className='mouseOut';};
                cell.setAttribute("bgcolor", "#FFFAFA");
                cell.setAttribute("border", "0");
                cell.onclick = function() { completeField(this); } ;                            

                txtNode = document.createTextNode(nextNode);
                cell.appendChild(txtNode);
                row.appendChild(cell);
                completeBody.appendChild(row);
            }
        }
 //设置显示位置               
        function setOffsets() {
            completeTable.style.width = inputField.offsetWidth; + "px";
            var left = calculateOffset(inputField, "offsetLeft");
            var top = calculateOffset(inputField, "offsetTop") + inputField.offsetHeight;
            completeDiv.style.border = "black 1px solid";
            completeDiv.style.left = left + "px";
            completeDiv.style.top = top + "px";
        }
  //计算显示位置      
    function calculateOffset(field, attr) {
      var offset = 0;
      while(field) {
        offset += field[attr];
        field = field.offsetParent;
      }
      return offset;
    }
 //填写输入框
    function completeField(cell) {
        inputField.value = cell.firstChild.nodeValue;
        clearNames();
    }
 //清除自动完成行
    function clearNames() {
        var ind = completeBody.childNodes.length;
        for (var i = ind - 1; i >= 0 ; i--) {
             completeBody.removeChild(completeBody.childNodes[i]);
        }
        completeDiv.style.border = "none";
    }
 //搜索请求函数
    function search() {
        var sortName = document.getElementById("names");
        createXMLHttpRequest();           
        var url = "autoComplete?action=search&names=" + escape(inputField.value);                       
        XMLHttpReq.open("GET", url, true);
        XMLHttpReq.onreadystatechange = processSearchResponse;//指定响应函数
        XMLHttpReq.send(null); // 发送请求
    }
 // 处理返回匹配信息函数
    function processSearchResponse() {
     if (XMLHttpReq.readyState == 4) { // 判断对象状态
         if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
                var res=XMLHttpReq.responseXML.getElementsByTagName("res");
                if (res.length>0){
                 document.getElementById("content").value=res[0].firstChild.data;
                }
            }else { //页面不正常
                window.alert("您所请求的页面有异常。");
            }
        }
    }

</script>


<table  style="BORDER-COLLAPSE: collapse" borderColor=#111111
            cellSpacing=0 cellPadding=2 width=400 bgColor=#f5efe7 border=0>
    <TR>
         <TD align=middle height=4 colspan="3"><IMG height=4
         src="images/promo_list_top.gif" width="100%"
         border=0>
   </TD>
 </TR>
 <TR>
       <TD align=middle bgColor=#dbc2b0
                    height=19 colspan="3"><B>商品信息搜索</B>
    </TD>
 </TR>
 <tr>
        <td height="20">
   输入品牌关键字:
  </td>
  <td height="20">
    <input type="text" size="15" id="names" onkeyup="findNames();" style="height:20;">
     <div style="position:absolute;" id="popup">
         <table id="complete_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0"/>           
             <tbody id="complete_body"></tbody>
         </table>
     </div>
  </td>
  
    
  <td height="20">
    <img src="images/search.gif" onclick="search();">
  </td>
  
    </tr>
 <tr>
  <td height="20" valign="top" align="center">
   产品描述:
  </td>
        <td id="pos_1" height="80">
   <textarea id="content">

   </textarea>
  </td>
    </tr>
 
</table>


Autocomplete Servlet 端

 

package classmate;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class AutoCompleteAction extends HttpServlet {
   
 public void init(ServletConfig config) throws ServletException {
    }
   
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
     request.setCharacterEncoding("UTF-8");
  String action = request.getParameter("action");  
  String name = request.getParameter("names");�å�Šå­—符集       
        response.setContentType("text/xml; charset=UTF-8");
        response.setHeader("Cache-Control", "no-cache");
        PrintWriter out = response.getWriter();
        out.println("<response>");  
       
        DB db = new DB();
  ResultSet rs;
        String strSql=null;
        if ("match".equals(action)){
            strSql = "select * from product where name like'" + name + "%'";
      rs = db.executeQuery(strSql);
      try {
       while ( rs.next()) {
        out.println("<res>" + rs.getString("name") + "</res>");
       }
      } catch (SQLException e) {
       e.printStackTrace();
      }
        }
        else if ("search".equals(action)){
            strSql = "select contents from product where name ='" + name + "'";
      rs = db.executeQuery(strSql);
      try {
       if ( rs.next()) {
        out.println("<res>" + rs.getString("contents") + "</res>");
       }
      } catch (SQLException e) {
       e.printStackTrace();
      }
         
        }
  out.println("</response>");
  out.close();
    }
}

 

分享到：
| 防火墙入门
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    很简单的一个AJAX例子

    这个"很简单的一个AJAX例子"的标题和描述表明，我们将会探讨一个基础的AJAX应用实例，它可能包含了一个简单的JavaScript代码示例，用于向服务器发送请求并接收响应，以实现页面的异步更新。 在Web开发中，AJAX的...

    一个简单的Ajax例子

    在这个"一个简单的Ajax例子"中，我们将深入探讨Ajax的核心概念、工作原理以及如何编写基本的Ajax代码。 1. **Ajax核心概念**： - **异步通信**：Ajax允许浏览器与服务器进行非阻塞通信，即用户在请求处理期间仍可...

    ajax例子ajax例子

    在Ajax的例子中，通常会涉及到以下几个关键步骤： 1. **创建XMLHttpRequest对象**：在JavaScript代码中，首先需要创建一个XMLHttpRequest对象，这是Ajax的基础。虽然名称中含有XML，但实际上它不仅可以处理XML，还...

    易懂asp的ajax例子

    总结，"易懂asp的ajax例子"应该包含如何在ASP中使用Ajax进行异步通信的实例，通过XMLHttpRequest或jQuery的$.ajax()方法，结合客户端和服务器端的脚本编写，实现页面部分数据的动态加载，提高用户体验。文件名...

    一些ajax例子,ajax学习例子

    在本案例中，“一些ajax例子,ajax学习例子”是一个学习和实践Ajax技术的资源集合。 Ajax的核心是JavaScript对象XMLHttpRequest，它允许开发者在后台与服务器进行通信，而不会打断用户的交互。以下是一些关键的Ajax...

    jquery+ajax例子

    在这里，我们将深入探讨基于jQuery的Ajax应用，以"jQuery+Ajax例子"为标题，结合项目描述和标签，我们来详细讲解这些技术。 1. **jQuery简介** jQuery由John Resig在2006年创建，旨在使JavaScript编程变得更加简单...

    php+ajax例子

    标题中的“php+ajax例子”指的是使用PHP服务器端语言与AJAX（Asynchronous JavaScript and XML）客户端技术结合的示例应用。在Web开发中，PHP通常用于处理服务器端逻辑，而AJAX则允许网页在不刷新整个页面的情况下，...

    一个最简单的AJAX例子

    这个"一个最简单的AJAX例子"很可能是用来展示如何使用AJAX来动态获取和更新网页内容的基础教程。让我们深入了解一下AJAX的核心概念及其工作原理。 首先，AJAX的关键在于异步性，这意味着用户可以继续在网页上进行...

    JSP使用Ajax 例子

    这个例子展示了如何在JSP中使用Ajax进行异步数据交互，但实际应用中，你可能需要考虑更多的因素，比如错误处理、安全性、性能优化等。了解Ajax的基本原理和使用方式，可以帮助你在开发富客户端Web应用时提高效率和...

    asp.net mvc ajax 例子

    创建一个简单的Ajax例子，我们首先需要一个Controller。在`ajaxMvcApplication`这个项目中，可能会有一个名为`AjaxController`的控制器，包含一个`ActionResult`类型的Action，比如`GetData`： ```csharp public ...

    一个非常简单的ajax例子

    通过学习和实践这个Ajax例子，你可以开始探索更复杂的Ajax应用，比如使用jQuery、axios或fetch等库来简化Ajax操作，或者研究如何在响应式设计中使用Ajax来提高用户体验。记住，理论知识是基础，动手实践才能真正掌握...

    lucene全文搜索ajax例子

    接下来，我们要讨论`ajax例子`。在这个示例中，用户在前端输入搜索关键字后，Ajax会异步发送请求到服务器，而不是刷新整个页面。服务器端的Lucene处理查询，找到匹配的结果，然后将结果返回给前端。前端接收到数据后...

    AJAX例子 结合ASP.NET

    AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。结合ASP.NET，我们可以创建动态、交互性更强的Web应用程序。在这个AJAX与ASP.NET的入门案例中，我们将深入...

    自己写的最简单Ajax例子

    在"自己写的最简单Ajax例子"中，我们可以看到两个简单的实例，适合初学者入门学习。 首先，我们来详细讲解一下Ajax的核心概念： 1. 异步通信：Ajax的核心特性就是异步，这意味着在发送请求后，浏览器不会等待...

    AJAX例子，这是一个页面AJAX的好例子

    这个"AJAX例子"是一个很好的实践展示，它揭示了如何利用JavaScript和XML（或者更现代的JSON）在后台与服务器进行通信，从而实现页面的异步更新。以下是对这个例子中的关键知识点的详细解释： 1. **异步通信**：AJAX...

    ajax例子.rar（含文档）

    在本压缩包"ajax例子.rar"中，包含了一个用于学习Ajax的实例，通过这个实例，我们可以深入理解Ajax的工作原理和使用方法。 Ajax的核心是JavaScript的XMLHttpRequest对象，它允许我们向服务器发送异步请求。这意味着...

    基于java的AJAX例子

    "基于java的AJAX例子"这个压缩包可能包含了多个示例项目，每个项目都展示了不同场景下使用AJAX与Java服务器端通信的方式。这些例子可以帮助你更好地理解AJAX在实际开发中的应用，通过实践加深对AJAX技术的理解。 ...

    不错的 ajax例子

    这个"不错的 Ajax例子"可能是一个展示如何在ASP.NET框架下有效利用Ajax技术的示例项目。Ajax的核心在于利用JavaScript与服务器进行异步通信，从而提升用户体验，因为用户在等待数据加载时不必等待整个页面的重新加载...

    springboot+ajax例子

    Ajax例子可能包含HTML页面、JavaScript脚本以及SpringBoot的控制器类。 综上所述，SpringBoot和Ajax的结合使得前后端能高效地进行数据交互，提升应用性能。通过学习和实践这个小例程，初学者可以更好地理解如何在...

    ajax例子—jquery相关例子

    在“ajax例子—jquery相关例子”这个主题中，我们主要关注的是如何使用jQuery实现Ajax功能。jQuery提供了$.ajax()、$.get()、$.post()等方法来发起Ajax请求，这些方法使得与服务器端的数据交互变得更加直观和简单。 ...

Magicbox
Global site tag (gtag.js) - Google Analytics