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 对象。
jqueryajax中各个事件执行顺序
jqueryajax中各个事件执⾏顺序jquery ajax 中各个事件执⾏顺序如下：1.ajaxStart(全局事件)2.beforeSend3.ajaxSend(全局事件)4.success5.ajaxSuccess(全局事件)6.error7.ajaxError (全局事件)plete9.ajaxComplete(全局事件)10.ajaxStop(全局事件)下⾯看个例⼦：$("#ACCOUNT_TYPE").bind('click', function() {//alert( $(this).val());var msg="";if($(this).val()=="B134002")//托管{//msg="托管";msg="ACCOUNT_TYPE_COM_T";}else if($(this).val()=="B134001")//存管{//msg="存管";msg="ACCOUNT_TYPE_COM_C";}else if($(this).val()=="-")//存管和托管all{//msg="存管和托管";msg="ACCOUNT_TYPE_COM_ALL";}else{alert("参数错误！");return;}$("#ACCOUNT_TYPE_COMDiv_son").children().remove();//先清除所有⼦元素$.ajax({type:"post",url:"${ctx}/Rule/Combination/getdict",data:{type:msg},dataType:"json",success:function(json){//$(object).children(selector).remove(); // 删除object元素下满⾜selector选择器的⼦元素，不填写则默认删除所有⼦元素 for(var i=0;i<json.length;i++){var checkBox=document.createElement("input");//checkBox.setAttribute("type","checkbox");checkBox.setAttribute("type","radio");checkBox.setAttribute("id", json[i].value);checkBox.setAttribute("value", json[i].value);checkBox.setAttribute("name", "ACCOUNT_TYPE_COM");checkBox.setAttribute("checked", true);//checkBox.setAttribute("readonly", true);//var li=document.createElement("span");li.style.display = "block";li.style.width = 23+"%";li.style.float = "left";li.appendChild(checkBox);li.appendChild(document.createTextNode(json[i].label));$("#ACCOUNT_TYPE_COMDiv_son").append(li);}},beforeSend:function(mes){alert("beforeSend");},complete:function(){alert("complete");}});});运⾏这段代码，会先弹出 beforeSend 提⽰，然后加载success ⽅法⾥⾯的代码，最后弹出 complete 提⽰，这说明这段代码的⼏个⽅法的执⾏先后顺序是符合上⾯总结的顺序的！全局事件的例⼦：<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("div").ajaxStart(function(){$(this).html("<img src='/i/demo_wait.gif' />");alert("1.最先的全局⽅法");});$("button").click(function(){$("div").load("/example/jquery/demo_ajax_load.asp");});$("div").ajaxSend(function(){alert("2.发送前");});$("div").ajaxSuccess(function(){alert("3.成功后");});$("div").ajaxComplete(function(){alert("4.ajaxComplete");});$("div").ajaxStop(function(){alert("5.ajaxStop");});});</script></head><body><div id="txt"><h2>通过 AJAX 改变⽂本</h2></div><button>改变内容</button></body></html>每次点击 "改变内容" 的这个按钮，都会先加载⼀次demo_wait.gif 这个图⽚，然后执⾏ ajaxSend，然后执⾏ ajaxSuccess，然后执⾏ajaxComplete，然后执⾏ ajaxStop ，这个执⾏顺序也是符合上⾯总结的顺序的！____________________________________________________________________________________⼀、.ajaxStart()——ajax请求开始时触发描述：ajax请求开始时触发 .ajaxStart()的回调函数，全局的，所有的ajax都可以⽤写法：元素.ajaxStart(function({ajax请求开始时触发的代码})$("#loading").ajaxStart(function () {$(this).show(); //ajax请求开始时#loading元素显⽰});作⽤域：全局某个ajax不受全局⽅法的影响：⽅法：将$.ajax({})的global设为false$.ajax({url: "test.html",global:false});⼆、.ajaxStop()——ajax请求结束时触发描述：ajax请求结束时触发 .ajaxStop()的回调函数，全局的，所有的ajax都可以⽤写法：元素.ajaxStop(function({ajax请求结束时触发的代码})$("#loading").ajaxStop(function () {$(this).hide(); //ajax请求结束时#loading元素隐藏});作⽤域：全局某个ajax不受全局⽅法的影响：⽅法：将$.ajax({})的global设为false$.ajax({url: "test.html",global:false});_______________________________________________________________________。
利用Ajax实现长连接
自己画了一个模型图：常规的短连接模式下，都是通过不间断刷新请求实现的，比如每间隔3秒发送一次Ajax 请求，3秒更新一下数据，然后就这样不间断刷新下去，直到用户关闭网页。
这样所带来的弊端就是，如果用户很长时间都没有操作，每次刷新都不会返回新数据，这样就造成了资源的浪费，很多请求都是没必要的；另外一个问题，就是用户的输入，跟数据的请求不是同步的，会造成一定的信息延迟。
2.Ajax长连接方式实现网页聊天模型图：Ajax长连接模式，它的刷新是根据数据来执行的，如果有新数据返回，接收并解析显示数据，然后发起新的Ajax请求，如果一段时间内，用户没有操作，则连接处于睡眠状态，一直等待有用户输入或者请求超时，然后发起下个Ajax请求。
这样做的好处是，每个消息都会即时推送到客户端，延迟极少；另外每次请求都是有意义的，与短连接对比，效率要高很多。
但对于一个用户量很多，并且操作非常频繁的网站，长连接模式也会出现过于频繁的刷新问题。
目前IE对于HTTP连接数是有限制的，每个网页只能同时进行两个长连接，第三个长连接会被阻塞。
利用php在后台sleep，自己做了个模拟的程序，查看效果看了一下别人写的Ajax长连接聊天的案例，以php为例，基本上是在后台进行不间断的检测，如果有新数据就推送，如果没有新数据，就一直阻塞，直到30秒超时，然后客户端重新发起下一个请求。
后台判断里重要的一行代码：usleep(10000); 就是暂停10毫秒，缓解一下CPU压力，个人感觉如果暂停100毫秒，时间延迟也是很难感觉到的。
这种方法基本就是把前端的循环，搬到了后台，中间减少了网络传输的环节，如果是一个Ajax的即时聊天系统，要保存用户的聊天记录，那就需要跟数据库相结合，每秒10次以上的数据查询，这个与短连接比，必定加大了数据库的压力，具体怎么优化，这个应该是交给服务器端人员来处理了。
如果想要了解更多的内容请Google一下comet，或者看看这里(一个很不错的框架，Ajax Push Engine)，这个网站有很多demo，效果很帅。
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、请求方法、参数和回调函数，以及处理返回数据的逻辑。
jq ajax 案例
jq ajax 案例jq ajax 是一种用于在前端网页中发送异步请求的技术。
它基于JavaScript和HTML，可以实现无需刷新整个页面的数据交互。
下面是一些jq ajax的案例，帮助读者了解和掌握这一技术。
1. 实现简单的数据请求和展示在一个网页中，使用jq ajax发送请求获取后端数据，并将返回的数据展示在页面上。
例如，可以通过发送GET请求获取一个用户列表，然后使用jq将返回的数据渲染到页面上的表格中。
2. 动态加载页面内容使用jq ajax动态加载网页内容，可以减少页面加载时间和流量。
例如，可以通过发送GET请求获取一个文章列表，然后使用jq将返回的数据渲染到页面上的列表中。
当用户点击某个文章时，再使用jq ajax发送请求获取该文章的详细内容，并将内容展示在页面上。
3. 实现表单提交和数据验证使用jq ajax可以实现表单提交和数据验证的功能。
例如，在一个注册页面中，当用户填写完表单后，使用jq ajax发送POST请求将表单数据发送到后端进行验证。
如果验证通过，则返回成功的提示信息；如果验证失败，则返回失败的提示信息，并将错误信息展示在页面上。
4. 实现搜索功能使用jq ajax可以实现搜索功能，即在用户输入关键词后，通过发送GET请求获取相关的搜索结果，并将结果展示在页面上。
例如，在一个电影网站中，用户可以输入电影名称进行搜索，使用jq ajax发送请求获取相关的电影列表，并将列表展示在页面上。
5. 实现无限滚动加载使用jq ajax可以实现无限滚动加载功能，即在用户滚动页面到底部时，自动发送请求获取更多的数据，并将数据追加到页面上。
例如，在一个新闻网站中，当用户滚动到页面底部时，使用jq ajax发送请求获取更多的新闻列表，并将列表追加到页面上。
6. 实现图片上传和预览使用jq ajax可以实现图片上传和预览的功能。
例如，在一个头像上传页面中，用户选择一个图片文件后，使用jq ajax将文件发送到后端进行保存，并返回一个预览图片的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()⽅法的全局设置。
jQuery 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对象});这里将显示结果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第1讲Ajax是什么Ajax的运行原理一、ajax是什么？1ajax(asynchronouse javascript and xml)异步的javascript和xml2是7种技术的综合,它包含了七个技术(j avascrip t xml xstl xhtml dom xmlhttprequest,css),ajax是一个粘合剂,3ajax是一个与服务端语言无关的技术.即可以使用在(php/java ee/.net网站/ asp)4ajax可以给客户端返回三种格式数据(文本格式，xml,json格式)5无刷新数据交换技术有以下:flash,java applet,框架,iframe,ajax)二、ajax的运行原理分析三、看一个需求:ajax在什么地方用的多1动态加载数据，按需取得数据。
【树形菜单、联动菜单.../省市联动】2改善用户体验。
【输入内容前提示、带进度条文件上传...】3电子商务应用。
【购物车、邮件订阅...】4访问第三方服务。
【访问搜索服务、rss阅读器】5.数据的局部刷新第2讲Ajax经典的案例使用ajax与服务器通信的的步骤1创建一个XMLHttpRequest对象2创建url,data,通过xmlHttpRequest.send()3服务器端接收ajax的请求,做相应处理(操作数据库)，然后返回结果(echo语句)4客户端通过xmlHttpRequest的属性reponseText,responseXML取的数据，然后就完成局部刷新当前页面任务一、使用ajax完成用户名的验证register.php<html><head><title>用户注册</title><meta http-equiv="content-type"content="text/html;charset=utf-8"/><script type="text/javascript">//创建ajax引擎function getXmlHttpObject(){var xmlHttpRequest;//不同的浏览器获取对象xmlhttprequest对象方法不一样if(window.ActiveXObject){xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");}else{xmlHttpRequest=new XMLHttpReques t();}return xmlHttpRequest;}var myXmlHttpRequest="";//验证用户名是否存在function checkName(){myXmlHttpRequest=getXmlHttpObject();//怎么判断创建okif(myXmlHttpRequest){//通过myXmlHttpRequest对象发送请求到服务器的某个页面//第一个参数表示请求的方式,"get"/"post"//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)//第三个参数表示true表示使用异步机制,如果false表示不使用异步var url="/ajax/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;//打开请求.myXmlHttpRequest.open("get",url,true);//指定回调函数.chuli是函数名myXmlHttpRequest.onreadystatechange=chuli;//真的发送请求,如果是get请求则填入null即可//如果是post请求，则填入实际的数据myXmlHttpRequest.send(null);}}//回调函数function chuli(){//window.alert("处理函数被调回"+myXmlHttpRequest.readyState);//我要取出从registerPro.php页面返回的数据if(myXmlHttpRequest.readyState==4){//取出值,根据返回信息的格式定.text//window.alert("服务器返回"+myXmlHttpRequest.responseText);$('myres').value=myXmlHttpRequest.responseText;}}//这里我们写一个函数function$(id){return document.getElementById(id);}</script></head><body><form action="???"method="post">用户名字:<input type="text"onkeyup="checkName();"name="username1" id="username"><input type="button"onclick="checkName();"value="验证用户名"><input style="border-width:0;color:red"type="text"id="myres"><br/>用户密码:<input type="password"name="password"><br>电子邮件:<input type="text"name="email"><br/><input type="submit"value="用户注册"></form><form action="???"method="post">用户名字:<input type="text"name="username2"><br/>用户密码:<input type="password"name="password"><br>电子邮件:<input type="text"name="email"><br/><input type="submit"value="用户注册"></form></body></html>registerpro.php<?php//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header("Content-Type:text/xml;charset=utf-8");//告诉浏览器不要缓存数据header("Cache-Control:no-cache");//接收数据$username=$_GET['username'];if($username=="shunping"){echo"用户名不可以用";//注意，这里数据是返回给请求的页面.}else{echo"用户名可以用";}?>ajax的post方式请求在前面案例我们修改一下：关键代码register.phpvar url="/ajax/registerProcess.php";//这个是要发送的数据var data="username="+$('username').value;//打开请求.myXmlHttpRequest.open("post",url,true);//还有一句话，这句话必须.myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form -urlencoded");//指定回调函数.chuli是函数名myXmlHttpRequest.onreadystatechange=chuli;//真的发送请求,如果是get请求则填入null即可//如果是post请求，则填入实际的数据myXmlHttpRequest.send(data);registerPro.php关键码：$username=$_POST['username'];☞使用get方式发出请求，如果提交的用户名不变化，浏览器将不会真的发请求，而是缓存取数据.,url解决方法1.url后带一个总是变化的参数,比如当前时间var url="/ajax/registerProcess.php?mytime="+new Date()+"&username="+$("username").value;2.在服务器回送结果时，禁用缓存.//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header("Content-Type:text/xml;charset=utf-8");//告诉浏览器不要缓存数据header("Cache-Control:no-cache");ajax如何处理返回的数据格式是xml的情况register.php<html><head><title>用户注册</title><meta http-equiv="content-type"content="text/html;charset=utf-8"/><script type="text/javascript">//创建ajax引擎function getXmlHttpObject(){var xmlHttpRequest;//不同的浏览器获取对象xmlhttprequest对象方法不一样if(window.ActiveXObject){xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");}else{xmlHttpRequest=new XMLHttpRequest();}return xmlHttpRequest;}var myXmlHttpRequest="";//验证用户名是否存在function checkName(){myXmlHttpRequest=getXmlHttpObject();//怎么判断创建okif(myXmlHttpRequest){//通过myXmlHttpRequest对象发送请求到服务器的某个页面//第一个参数表示请求的方式,"get"/"post"//第二个参数指定url,对哪个页面发出ajax请求(本质仍然是http请求)//第三个参数表示true表示使用异步机制,如果false表示不使用异步var url="/ajax/registerProcess.php";//这个是要发送的数据var data="username="+$('username').value;//打开请求.myXmlHttpRequest.open("post",url,true);//还有一句话，这句话必须.myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form -urlencoded");//指定回调函数.chuli是函数名myXmlHttpRequest.onreadystatechange=chuli;//真的发送请求,如果是get请求则填入null即可//如果是post请求，则填入实际的数据myXmlHttpRequest.send(data);}}//回调函数function chuli(){//window.alert("处理函数被调回"+myXmlHttpRequest.readyState);//我要取出从registerPro.php页面返回的数据if(myXmlHttpRequest.readyState==4){//取出值,根据返回信息的格式定.text//window.alert("服务器返回"+myXmlHttpRequest.responseText);//$('myres').value=myXmlHttpRequest.responseText;//看看如果取出xml格式数据//window.alert(myXmlHttpRequest.responseXML);//获取mes节点varmes=myXmlHttpRequest.responseXML.getElementsByTagName("mes");//取出mes节点值//window.alert(mes.length);//mes[0]->表示取出第一个mes节点//mes[0].childNodes[0]->表示第一个mes节点的第一个子节点var mes_val=mes[0].childNodes[0].nodeValue;$('myres').value=mes_val;}}//这里我们写一个函数function$(id){return document.getElementById(id);}</script></head><body><form action="???"method="post">用户名字:<input type="text"name="username1"id="username"><input type="button"onclick="checkName();"value="验证用户名"><input style="border-width:0;color:red"type="text"id="myres"><br/>用户密码:<input type="password"name="password"><br>电子邮件:<input type="text"name="email"><br/><input type="submit"value="用户注册"></form><form action="???"method="post">用户名字:<input type="text"name="username2"><br/>用户密码:<input type="password"name="password"><br>电子邮件:<input type="text"name="email"><br/><input type="submit"value="用户注册"></form></body></html>regisgerProcess.php<?php//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header("Content-Type:text/xml;charset=utf-8");//告诉浏览器不要缓存数据header("Cache-Control:no-cache");//接收数据(这里要和请求方式对于_POST还是_GET)$username=$_POST['username'];//这里我们看看如何处理格式是xml$info="";if($username=="shunping"){$info.="<res><mes>用户名不可以用,对不起</mes></res>";//注意，这里数据是返回给请求的页面.}else{$info.="<res><mes>用户名可以用,恭喜</mes></res>";}echo$info;?>ajax如何处理json数据格式1json的格式如下："{属性名:属性值,属性名:属性值,....}"因为json数据是原生态数据，因此这种数据格式很稳定，而且描述能力强,我们建议大家使用json格式2json数据格式的扩展如果服务器返回的json是多组数据，则格式应当如下:$info="[{"属性名":"属性值",...},{"属性名":"属性值",...},....]";在xmlhttprequest对象接收到json数据后，应当这样处理//转成对象数组var reses=eval("("+xmlHttpRequest.responseText+")");//通过reses可以取得你希望的任何一个值reses[?].属性名3更加复杂的json数据格式<script language="JavaScript">var people={"programmers":[{"firstName":"Brett","email":"brett@"},{"firstName":"Jason","email":"jason@"}],"writer":[{"writer":"宋江","age":"50"},{"writer":"吴用","age":"30"}],"sex":"男"};window.alert(people.programmers[0].firstName);window.alert(people.programmers[1].email);window.alert(people.writer[1].writer);window.alert(people.sex);</script>小结:当一个ajax请求到服务器，服务器可以根据需求返回三种格式的数据,那么我们应当选择哪一个?1.如果你的项目经理没有特殊的要求，建议使用json2.若应用程序不需要与其他应用程序共享数据的时候,使用HTML片段来返回数据时最简单的3.如果数据需要重用,JSON文件是个不错的选择,其在性能和文件大小方面有优势4.当远程应用程序未知时,XML文档是首选,因为XML是web服务领域的“世界语”二、ajax的省市联动案例(如何动态的从服务器取得数据)showCities.php页面<html><head><meta http-equiv="content-type"content="text/html;charset=utf-8"/><script type="text/javascript">//创建ajax引擎function getXmlHttpObject(){var xmlHttpRequest;//不同的浏览器获取对象xmlhttprequest对象方法不一样if(window.ActiveXObject){xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");}else{xmlHttpRequest=new XMLHttpRequest();}return xmlHttpRequest;}var myXmlHttpRequest="";function getCities(){myXmlHttpRequest=getXmlHttpObject();if(myXmlHttpRequest){var url="/ajax/showCitiesPro.php";//postvar data="province="+$('sheng').value;myXmlHttpRequest.open("post",url,true);//异步方式myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form -urlencoded");//指定回调函数myXmlHttpRequest.onreadystatechange=chuli;//发送myXmlHttpRequest.send(data);}}function chuli(){if(myXmlHttpRequest.readyState==4){if(myXmlHttpRequest.status==200){//取出服务器回送的数据varcities=myXmlHttpRequest.responseXML.getElementsByTagName("city");$('city').length=0;var myOption=document.createElement("option");myOption.innerText="--城市--";//添加到$('city').appendChild(myOption);//遍历并取出城市for(var i=0;i<cities.length;i++){var city_name=cities[i].childNodes[0].nodeValue;//创建新的元素optionvar myOption=document.createElement("option");myOption.value=city_name;myOption.innerText=city_name;//添加到$('city').appendChild(myOption);}}}}//这里我们写一个函数function$(id){return document.getElementById(id);}</script></head><body><select id="sheng"onchange="getCities();"><option value="">---省---</option><option value="zhejiang">浙江</option><option value="jiangsu">江苏</option><option value="sichuan">四川</option></select><select id="city"><option value="">--城市--</option></select><select id="county"><option value="">--县城--</option></select></body></html>**showCitiesProcess.php**<?php//服务器端//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header("Content-Type:text/xml;charset=utf-8");//告诉浏览器不要缓存数据header("Cache-Control:no-cache");//接收用户的选择的省的名字$province=$_POST['province'];file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND);//如何在调试过程中，看到接收到的数据。