下载文档原格式
PHP+AJAX教程(5):AJAX MySQL数据库实例AJAX 可用来与数据库进行交互式通信。
AJAX 数据库实例在下面的AJAX 实例中，我们将演示网页如何使用AJAX 技术从MySQL 数据库中读取信息。
在下拉列表中选择一个名字（测试说明：该实例功能未实现）在此列出用户信息。
此列由四个元素组成：MySQL 数据库简单的HTML 表单JavaScriptPHP 页面数据库将在本例中使用的数据库看起来类似这样：idFirstNameLastNameAgeHometownJob1PeterGriffin41QuahogBrewery2LoisGriffin40NewportPiano Teacher3JosephSwanson39QuahogPolice Officer4GlennQuagmire41QuahogPilotHTML 表单上面的例子包含了一个简单的HTML 表单，以及指向JavaScript 的链接：<html><head><script src="selectuser.js"></script></head><body><form> Select a User:<select name="users" onchange="showUser(this.value)"><option value="1">Peter Griffin</option><option value="2">Lois Griffin</option><option value="3">Glenn Quagmire</option><option value="4">JosephSwanson</option></select></form><p><divid="txtHint"><b>User info will be listed here.</b></div></p></body></html>例子解释- HTML 表单正如您看到的，它仅仅是一个简单的HTML 表单，其中带有名为"users" 的下拉列表，okooo澳客网这个列表包含了姓名，以及与数据库的"id" 对应的选项值。
div 部分用于显示来自服务器的信息。
当按钮被点击时，它负责调用名为loadXMLDoc() 的函数：<html><body><div id="myDiv"><h3>Let AJAX change this text</h3></div><button type="button" onclick="loadXMLDoc()">Change Content</button></body></html>接下来，在页面的 head 部分添加一个 <script> 标签。
该标签中包含了这个loadXMLDoc() 函数：<head><script type="text/javascript">function loadXMLDoc(){.... AJAX script goes here ...}</script></head>AJAX - 创建 XMLHttpRequest 对象∙Previous Page∙Next PageXMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 对象所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：variable=new XMLHttpRequest();老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：variable=new ActiveXObject("Microsoft.XMLHTTP");为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持XMLHttpRequest 对象。
jquery ajax 表格实例-范文模板及概述示例1:标题：使用jQuery Ajax创建动态表格的实例引言：在Web开发过程中，动态表格是一个常见的需求。
使用jQuery Ajax 可以方便地向服务器请求数据，并将其填充到表格中。
本文将介绍如何使用jQuery Ajax创建动态表格的实例，以便读者能够快速上手实现类似的功能。
段落1：介绍jQuery Ajax的基本概念和用途jQuery Ajax是一种在JavaScript中使用异步HTTP请求的技术。
通过使用它，我们可以通过与服务器进行通信来获取数据，而不必刷新整个页面。
这种技术在动态表格的创建中非常有用，因为我们可以根据用户的操作实时地更新表格内容。
在本例中，我们将使用jQuery Ajax来获取服务器上的数据，并将其填充到表格中。
段落2：创建HTML结构和样式首先，我们需要在HTML中创建一个表格结构，并为其添加一些样式。
可以使用HTML的table、tr和td标签来表示表格和其行和列。
此外，添加一些CSS样式可以使表格看起来更加美观。
这一步是为了为后续的JavaScript代码做好准备。
段落3：编写JavaScript代码在JavaScript代码中，我们需要使用jQuery的AJAX函数来发送HTTP请求。
我们将使用GET请求从服务器获取数据，并将其作为参数传递给AJAX函数。
然后，我们可以在AJAX的回调函数中处理服务器返回的数据。
在这个例子中，我们将使用获取到的数据来动态地在表格中创建行和列。
段落4：测试和调试完成代码编写后，我们需要对代码进行测试和调试以确保其正常工作。
可以使用浏览器的开发者工具来查看请求的网络状态和服务器返回的数据。
同时，对于可能出现的错误或异常情况，我们也应该进行适当的处理和优化。
段落5：总结使用jQuery Ajax可以方便地在网页上创建动态表格。
通过向服务器发送请求并将数据填充到表格中，我们可以实现实时更新和交互性较强的表格功能。
妙⽤Ajax技术实现局部刷新商品数量和总价实例代码1. 问题的分析 先看⼀下页⾯中的情况： 功能如上，在没有Ajax之前，⼀般都是根据⽤户修改的值去找Action，然后返回新的jsp页⾯重新加载整个页⾯，完成数字的更新。
但是有了Ajax技术后，我们可以利⽤Ajax技术局部刷新要改变的地⽅，⽽不是重新加载整个页⾯。
⾸先看⼀下上图对应的jsp部分的代码：<div class="section_container"><!-- 购物车 --><div id="shopping_cart"><div class="message success">我的购物车</div><table class="data-table cart-table" cellpadding="0" cellspacing="0"><tr><th class="align_center" width="10%">商品编号</th><th class="align_left" width="35%" colspan="2">商品名称</th><th class="align_center" width="10%">销售价格</th><th class="align_center" width="20%">数量</th><th class="align_center" width="15%">⼩计</th><th class="align_center" width="10%">删除</th></tr><c:forEach items="${sessionScope.forder.sorders }" var="sorder" varStatus="num"><tr lang="${sorder.product.id}"><td class="align_center"><a href="#" class="edit">${num.count }</a></td><td width="80px"><img src="${shop}/files/${sorder.product.pic}" width="80" height="80" /></td><td class="align_left"><a class="pr_name" href="#">${ }</a></td><td class="align_center vline">${sorder.price }</td><td class="align_center vline"><!-- ⽂本框 --><input class="text" style="height: 20px;" value="${sorder.number }" lang="${sorder.number }"></td><td class="align_center vline">${sorder.price*sorder.number }</td><td class="align_center vline"><a href="#" class="remove"></a></td></tr></c:forEach></table><!-- 结算 --><div class="totals"><table id="totals-table"><tbody><tr><td width="60%" colspan="1" class="align_left"><strong>⼩计</strong></td><td class="align_right" style=""><strong>￥<spanclass="price" id="total">${sessionScope.forder.total}</span></strong></td></tr><tr><td width="60%" colspan="1" class="align_left">运费</td><td class="align_right" style="">￥<span class="price" id="yunfei">0.00</span></td></tr><tr><td width="60%" colspan="1" class="align_left total"><strong>总计</strong></td><td class="align_right" style="">￥<span class="total" id="totalAll"><strong>${sessionScope.forder.total}</strong></span></td></tr></tbody></table><div class="action_buttonbar"><font><a href="${shop}/user/confirm.jsp"><button type="button" title="" class="checkout fr" style="background-color: #f38256;">订单确认</button></a></font><font><a href="#"><button type="button" title="" class=" fr"><font>清空购物车</font></button></font><a href="${shop}/index.jsp"><button type="button" title="" class="continue fr"><font>继续购物</font></button></a><div style="clear:both"></div></div></div></div> 看着貌似很多的样⼦，其实功能很简单，就是从域中拿出相应的数据显⽰出来⽽已，我们现在要实现上⾯描述的功能的话，先来分析⼀下思路：⾸先得注册⼀个事件：即修改了数量那⾥的⽂本框触发的事件；在该事件中，我们拿到⽤户输⼊的数，判断输⼊的合法性，因为要防⽌⽤户乱输⼊；如果合法，通过Ajax请求将数据发送到后台；后台针对新的数量，调⽤相应的业务逻辑⽅法得到新的结果，并将其通过流返回到前台；Ajax收到结果后，再对相应位置的数据进⾏更新。
以下是一个简单的Ajax接口调用案例：
首先，我们定义一个后端接口：
{
"name": "test",
"version": "1.0.0"
}
然后，我们在前端页面中使用Ajax进行调用：
// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方法为GET
xhr.open('GET', URL, true);
// 监听请求状态的改变
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功，获取响应数据
var data = JSON.parse(xhr.responseText);
console.log( + ' ' + data.version);
}
}
// 发送请求
xhr.send();
在这个例子中，我们创建了一个XMLHttpRequest对象，并设置请求方法为GET。
然后，我们监听请求状态的改变，并在请求成功并且状态码为200时获取响应数据。
最后，我们将响应数据解析为JSON对象，并打印出来。
这只是一个简单的例子，实际上Ajax可以支持更多的请求方法和更复杂的请求参数。
同时，还需要考虑安全性和性能等方面的问题。
jq ajax 写法在使用jQuery 的Ajax 功能发送异步请求时，可以使用$.ajax() 方法。
以下是一个常见的jQuery Ajax 的写法示例：javascriptCopy Code$.ajax({url: 'your-url', // 请求的URLmethod: 'POST', // 请求方法，可以是GET、POST等data: { key1: 'value1', key2: 'value2' }, // 请求参数dataType: 'json', // 服务器返回的数据类型，这里设置为JSONsuccess: function(response) {// 请求成功时的回调函数console.log(response); // 输出服务器返回的数据},error: function(xhr, status, error) {// 请求失败时的回调函数console.log(error); // 输出错误信息}});在上述代码中，使用$.ajax() 方法发送一个POST 请求到指定的URL，并传递一些参数。
url 属性指定请求的URL，method 属性指定请求的方法（如GET 或POST），data 属性指定请求的参数。
dataType 属性指定了服务器返回的数据类型，这里设置为JSON。
success 属性指定了请求成功时的回调函数，当服务器成功返回数据时，该函数会被调用。
在示例中，我们将返回的数据打印到控制台。
error 属性指定了请求失败时的回调函数，当请求发生错误时，该函数会被调用。
在示例中，我们将错误信息打印到控制台。
你可以根据自己的需求修改示例代码中的URL、请求方法、参数和回调函数，以及处理返回数据的逻辑。
Ajax基本语法案例代码：$(function(){$('#send').click(function(){$.ajax({type: "GET",url: "test.json",data: {username:$("#username").val(), content:$("#content").val()},//发送到服务器的数据dataType: "json",success: function(data){$('#resText').empty(); //清空resText⾥⾯的所有内容var html = '';$.each(data, function(commentIndex, comment){html += '<div class="comment"><h6>' + comment['username']+ ':</h6><p class="para"' + comment['content']+ '</p></div>';});$('#resText').html(html);}});});});1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。
2.type:要求为String类型的参数，请求⽅式（post或get）默认为get。
注意其他http请求⽅法，例如put和delete也可以使⽤，但仅部分浏览器⽀持。
3.timeout:要求为Number类型的参数，设置请求超时时间（毫秒）。
此设置将覆盖$.ajaxSetup()⽅法的全局设置。
Web前端开发实训案例教程初级AJAX异步请求与数据交互在Web前端开发中，实现异步请求和数据交互是一个非常重要的技能。
AJAX（Asynchronous JavaScript and XML）是一种用于在Web应用程序中向服务器发送和接收数据的技术，它可以实现页面的无刷新更新，提升用户体验。
本文将介绍初级AJAX异步请求和数据交互的案例教程。
一、AJAX基础知识概述AJAX使用JavaScript和XML来实现异步数据交互。
在传统的Web 开发中，页面的更新通常需要重新加载整个页面，这对于用户体验来说是一个很大的缺点。
而AJAX可以通过局部更新页面的方式，只重新加载需要变化的部分，从而提升用户的交互体验。
AJAX的基本原理是通过XMLHttpRequest对象向服务器发送异步请求，然后在服务器返回数据后再进行页面的更新。
在实际开发中，可以使用现代的Web开发框架如jQuery等来简化AJAX的操作。
二、案例教程：实现实时搜索建议功能在本案例教程中，我们将展示如何使用AJAX实现一个实时搜索建议功能。
该功能可以在用户输入关键词时，实时向服务器发送请求获取匹配的搜索建议，并将结果显示在页面上。
1. 准备工作首先，我们需要准备一个用于接收搜索请求的后端API。
这个API 可以是一个简单的服务器接口，接收带有关键词参数的GET请求，并返回匹配的搜索建议结果。
2. 前端代码实现在HTML页面上，我们需要添加一个输入框和一个用于展示搜索建议的区域。
用户输入关键词时，将触发一个JavaScript函数，该函数将使用AJAX向后端API发送请求，并将返回的结果渲染到页面上。
以下是一个简单的示例代码：```html<input type="text" id="keyword" onkeyup="getSuggestions()"><ul id="suggestions"></ul><script>function getSuggestions() {var keyword = document.getElementById("keyword").value;var url = "/api/suggestions?keyword=" + keyword;// 创建XMLHttpRequest对象var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {var suggestions = JSON.parse(xmlhttp.responseText);var suggestionsList = document.getElementById("suggestions");suggestionsList.innerHTML = "";// 渲染搜索建议for (var i = 0; i < suggestions.length; i++) {var li = document.createElement("li");li.appendChild(document.createTextNode(suggestions[i]));suggestionsList.appendChild(li);}}};// 发送AJAX请求xmlhttp.open("GET", url, true);xmlhttp.send();}</script>```以上代码使用了原生的JavaScript来实现AJAX请求和数据的更新。
jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。
废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到).1. load( url, [data], [callback] ) ：载入远程HTML 文件代码并插入至DOM 中。
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
这个方法默认使用GET 方式来传递的，如果[data]参数有传递数据进去，就会自动转换为POST方式的。
jQuery 1.2 中，可以指定选择符，来筛选载入的HTML 文档，DOM 中将仅插入筛选出的HTML 代码。
语法形如"url #some > selector"。
这个方法可以很方便的动态加载一些HTML文件，例如表单。
示例代码：$(".ajax.load").load("/yeer/archive/2009/06/10/ 1500682.html .post",function (responseText, textStatus, XMLHttpRequest){this;//在这里this指向的是当前的DOM对象，即$(".ajax.load")[0]//alert(responseText);//请求返回的内容//alert(textStatus);//请求状态：success，error//alert(XMLHttpRequest);//XMLHttpRequest对象});这里将显示结果。
∙AJAX实例入门网友评论0 条转载到博客2007-7-7 15:59:22来源: 本站整理∙顶一下最大的网站源码资源下载站，.一、开门见山这些时间，瞎子也看得见，AJAX正大踏步的朝我们走来。
不管我们是拥护也好，反对也罢，还是视而不见，AJAX像一阵潮流，席转了我们所有的人。
关于AJAX的定义也好，大话也好，早有人在网上发表了汗牛充栋的文字，在这里我也不想照本宣科。
只想说说我感觉到的一些优点，对于不对，大家也可以和我讨论：首先是异步交互，用户感觉不到页面的提交，当然也不等待页面返回。
这是使用了AJAX技术的页面给用户的第一感觉。
其次是响应速度快，这也是用户强烈体验。
然后是与我们开发者相关的，复杂UI的成功处理，一直以来，我们对B/S 模式的UI不如C/S模式UI丰富而苦恼。
现在由于AJAX大量使用JS，使得复杂的UI的设计变得更加成功。
最后，AJAX请求的返回对象为XML文件，这也是一个潮流，就是WEB SERVICE潮流一样。
易于和WEB SERVICE结合起来。
好了，闲话少说，让我们转入正题吧。
我们的第一个例子是基于Servlet为后台的一个web应用。
二、基于Servlet的AJAX这是一个很常见的UI，当用户在第一个选择框里选择ZHEJIANG时，第二个选择框要出现ZHEJIANG的城市；当用户在第一个选择框里选择JIANGSU时，第二个选择框里要出现JIANGSU的城市。
首先，我们来看配置文件web.xml，在里面配置一个servlet，跟往常一样： <web-app version="2.4"xmlns="/xml/ns/j2ee"xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/xml/ns/j2ee/xml/ns/j2ee/web-app_2_4.xsd"><servlet><servlet-name>SelectCityServlet</servlet-name><servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class></servlet><servlet-mapping><servlet-name>SelectCityServlet</servlet-name><url-pattern>/servlet/SelectCityServlet</url-pattern></servlet-mapping></web-app>然后，来看我们的JSP文件：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>MyHtml.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><script type="text/javascript">function getResult(stateVal) {var url = "servlet/SelectCityServlet?state="+stateVal;if (window.XMLHttpRequest) {req = new XMLHttpRequest();}else if (window.ActiveXObject) {req = new ActiveXObject("Microsoft.XMLHTTP");}if(req){req.open("GET",url, true);req.onreadystatechange = complete;req.send(null);}}function complete(){if (req.readyState == 4) {if (req.status == 200) {var city =req.responseXML.getElementsByTagName("city");file://alert(city.length);var str=new Array();for(var i=0;i<city.length;i++){str[i]=city[i].firstChild.data;}file://alert(document.getElementById("city"));buildSelect(str,document.getElementById("city"));}}}function buildSelect(str,sel) {sel.options.length=0;for(var i=0;i<str.length;i++) {sel.options[sel.options.length]=new Option(str[i],str[i]) }}</script><body><select name="state" onChange="getResult(this.value)"><option value="">Select</option>><option value="zj">ZEHJIANG</option>><option value="zs">JIANGSU</option>></select><select id="city"><option value="">CITY</option></select></body></html>第一眼看来，跟我们平常的JSP没有两样。
仔细一看，不同在JS里头。
我们首先来看第一个方法：getResult(stateVal)，在这个方法里，首先是取得XmlHttpRequest；然后设置该请求的url：req.open("GET",url, true);接着设置请求返回值的接收方法：req.onreadystatechange = complete;该返回值的接收方法为——complete();最后是发送请求：req.send(null);然后我们来看我们的返回值接收方法：complete()，这这个方法里，首先判断是否正确返回，如果正确返回，用DOM对返回的XML文件进行解析。
关于DOM的使用，这里不再讲述，请大家参阅相关文档。
得到city的值以后，再通过buildSelect(str,sel)方法赋值到相应的选择框里头去。
最后我们来看看Servlet文件：import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/*** @author Administrator** TODO To change the template for this generated type comment go to* Window - Preferences - Java - Code Style - Code Templates*/public class SelectCityServlet extends HttpServlet {public SelectCityServlet() {super();}public void destroy() {super.destroy();}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/xml");response.setHeader("Cache-Control", "no-cache");String state = request.getParameter("state");StringBuffer sb=new StringBuffer("<state>");if ("zj".equals(state)){sb.append("<city>hangzhou</city><city>huzhou</city>");} else if("zs".equals(state)){sb.append("<city>nanjing</city><city>yangzhou</city><cit y>suzhou</city>");}sb.append("</state>");PrintWriter out=response.getWriter();out.write(sb.toString());out.close();}}这个类也十分简单，首先是从request里取得state参数，然后根据state 参数生成相应的XML文件，最后将XML文件输出到PrintWriter对象里。
