AJAX实例入门
PHP+AJAX教程(5)-AJAX MySQL数据库实例
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" 对应的选项值。
AJAX案例
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 表格 实例-概述说明以及解释
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技术实现局部刷新商品数量和总价实例代码
妙⽤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基础教程PPT课件
▪ 无刷新页面更新，减少用户等待时间。 ▪ 更好的客户体验，可以将一些服务器的工作转移到客户
端完成，节约网络资源，提高用户体验。 ▪ 基于标准化的对象，不需要安装特定的插件绝大多数的
游览器都能执行 ▪ 彻底将页面与数据分离。
9
9
.
AJAX应用开发
AJAX
1
.
目标
❖ Ajax简介 ❖ Ajax原理 ❖ XMLHttpRequest的使用 ❖ DOM简介 ❖ 利用DOM操纵HTML文档 ❖ Ajax请求响应使用XML文档
2
2
.
AJAX简介
❖AJAX（Asynchronous JavaScript and XML）它 是一种由多种技术组合的技术。
❖ 不同的readyState值对应响应的不同阶段，当 readyState的值为4时表示服务器响应完成。
❖ 示例代码中根据返回的状态及响应的结果状态， 执行处理。
if (http_request.readyState == 4) { // 信息已经返回，可以开始处理
if (http_request.status == 200) { // 页面正常，可以开始处理信息
❖ 包括Javascript、XHTML和CSS、DOM、XML和 XSTL、XMLHttpRequest 等
▪ XHTML，CSS用于呈现 ▪ DOM实现动态显示和交互 ▪ XML和XSTL进行数据交换与处理 ▪ XMLHttpRequest对象用于进行异步数据读取 ▪ Javascript绑定和处理所有数据
true);
open方法的三个参数分别为：
请求的方式GET,POST,HEAD 请求的路径 是否异步请求，如果指定为异步，在请求发送后，浏
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 写法
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基本语法
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()⽅法的全局设置。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
∙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对象里。