韩顺平AJAX和jquery笔记整理.doc

第一天3ajax是什么3ajax 的运行原理分析3ajax在什么地方用的多4使用ajax与服务器通信的的步骤4ajax的post方式请求8ajax处理返回xml9ajax处理返回的json12小结:13省市联动14黄金价格波动图17第二天20ajax实现聊天室的功能20第4天22jquery是什么22为什么需要javascript框架?22目前流行的js22安装js开发插件(apatana)22快速入门案例23为什么可以使用jquery方法?24jquery对象和dom对象切换24jquery的选择器261 基本选择器26改变 class 为 mini 的所有元素的背景色为 #FF003328改变元素名为 的所有元素的背景色为 #00FFFF28改变所有元素的背景色为 #00FF3328改变所有的元素和 id 为 two class .mini 的元素的背景色为 #3399FF292 层次选择器30改变 内所有 的背景色32改变 下 的背景色body div32改变 id 为 one 的下一个 的背景色#one + div33改变 id 为 two 的元素后面的所有兄弟的元素的背景色#two div33改变 id 为 two 的元素所有 兄弟元素的背景色333 过滤选择器333.1 基础过滤选择器34改变第一个 div 元素的背景色:eq(0)37改变最后一个 div 元素的背景色:last37改变class不为 one 的所有 div 元素的背景色:not(.one)37改变索引值为偶数的 div 元素的背景色:odd37改变索引值为大于 3 的 div 元素的背景色:gt(3)38改变索引值为等于 3 的 div 元素的背景色:eq(3)38改变索引值为小于 3 的 div 元素的背景色:lt(3)38改变所有的标题元素的背景色:header38改变当前正在执行动画的所有元素的背景色:animated393.2 内容选择器41改变含有文本 di 的 div 元素的背景色:contains(di)43改变不包含子元素(或者文本元素) 的 div 的背景色:empty43改变含有 class 为 mini 元素的 div 元素的背景色:.mini44改变含有子元素(或者文本元素)的div元素的背景色:parent44改变不含有文本 di; 的 div 元素的背景色:not(contains(di)44改变索引值为大于 3 的 div 元素的背景色:gt(3)443.3 可见度选择器44改变所有可见的div元素的背景色:visible45选取所有不可见的元素并设置其背景:hidden，show() 方法45选取所有的文本隐藏域, 并打印它们的值45如何使用 each对数组遍历（重要）46第6天473.4 属性选择器（不以 : 开头）47含有属性title 的div元素divtitle48属性title值等于test的div元素divtitle=test49属性title值不等于test的div元素divtitle!=test49属性title值 以te开始 的div元素divtitle=te49属性title值 以est结束 的div元素divtitle$=est49属性title值 含有es的div元素divtitle*=es49选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素dividtitle*=es503.5 子元素选择器50每个class为one的div父元素下的第2个子元素div .one:nth-child(1)52每个class为one的div父元素下的第一个子元素div .one:first-child52每个class为one的div父元素下的最后一个子元素div .one:last-child53如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素div .one:only-child533.6表单对象选择器53获取表单元素的两种方式55改变表单内 type=text 可用 元素的值inputtype=text:enabled57获取多选框选中的个数inputtype=checkbox:checked58获取下拉框选中的内容select option:selected58总结一下过滤器使用的方式59jquery对象集合遍历的四种形式59总结如何使用我们的选择器59jquery如何操作dom60第7天61创建对象61一步到位添加重庆li到 上海下（有缺陷）63逐步添加我们的dom对象64append和appendTo的区别64添加成都li到 北京前64外部插入在北京后面添加成都65使用jquery去查找某对象，如果这个对象(id/class.)不存在，jquery不报错, val()65删除节点66删除所有p67所有p清空67删除上海这个li67复制节点clone68clone()和clone(true)69节点替换replaceWith69在jquery开发中有这样几个函数，可以获取值，同时也可以设置值70当dom对象加载完毕后，给 b1绑定一个focus事件72再绑定一个事件 blur72如何获取子元素和兄弟元素的方法73查找所有子元素（class 为 one 的div的子元素) children75获取后面的同辈元素（class 为 one 的div的子元素) nextAll75获取前面的同辈元素（class 为 one 的div的子元素) prevAll75获取所有的同辈元素siblings76jquery和ajax整合的使用方法（重要）78传统的ajax步骤781，load(url,data,callfunction)782，get(url,data,callfunction);793，post(url,data,callfunctino);79第一天ajax是什么 ？ ajax(asynchronouse javascript and xml) 异步的javascript 和 xml 是7种技术的综合,它包含了七个技术( javascript xml xstl xhtml dom xmlhttprequest , css), ajax 是一个粘合剂, ajax是一个与服务端语言无关的技术. 即可以使用在(php/java ee/.net网站/ asp) ajax可以给客户端返回三种格式数据(文本格式 ，xml , json格式) 无刷新数据交换技术有以下: flash, java applet, 框架, iframe, ajax)ajax 的运行原理分析看一个需求:ajax在什么地方用的多1 动态加载数据，按需取得数据。【树形菜单、联动菜单./省市联动】2 改善用户体验。【输入内容前提示、带进度条文件上传.】3 电子商务应用。【购物车、邮件订阅.】4 访问第三方服务。【访问搜索服务、rss阅读器】5. 数据的布局刷新u 经典的案例使用ajax与服务器通信的的步骤 创建一个XMLHttpRequest对象 创建url,data,通过 xmlHttpRequest.send() 服务器端接收 ajax的请求,做相应处理(操作数据库)，然后返回结果(echo 语句) 客户端通过xmlHttpRequest的属性 reponseText , responseXML 取的数据，然后就完成局部刷新当前页面任务1. 使用 ajax完成用户名的验证register.php用户注册/创建ajax引擎function getXmlHttpObject()var xmlHttpRequest;/不同的浏览器获取对象xmlhttprequest 对象方法不一样if(window.ActiveXObject)xmlHttpRequest=new ActiveXObject(Microsoft.XMLHTTP);elsexmlHttpRequest=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?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); 用户名字: 用户密码: 电子邮件: 用户名字: 用户密码: 电子邮件: registerpro.phpajax的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=$_POSTusername; 使用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用户注册/创建ajax引擎function getXmlHttpObject()var xmlHttpRequest;/不同的浏览器获取对象xmlhttprequest 对象方法不一样if(window.ActiveXObject)xmlHttpRequest=new ActiveXObject(Microsoft.XMLHTTP);elsexmlHttpRequest=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节点var mes=myXmlHttpRequest.responseXML.getElementsByTagName(mes);/取出mes节点值/window.alert(mes.length);/mes0-表示取出第一个mes节点/mes0.childNodes0-表示第一个mes节点的第一个子节点var mes_val=mes0.childNodes0.nodeValue;$(myres).value=mes_val;/这里我们写一个函数function $(id)return document.getElementById(id); 用户名字: 用户密码: 电子邮件: 用户名字: 用户密码: 电子邮件: regisgerProcess.php?php/这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header(Content-Type: text/xml;charset=utf-8);/告诉浏览器不要缓存数据header(Cache-Control: no-cache);/接收数据(这里要和请求方式对于 _POST 还是 _GET)$username=$_POSTusername;/这里我们看看如何处理格式是xml$info=;if($username=shunping)$info.=用户名不可以用,对不起;/注意，这里数据是返回给请求的页面.else$info.=用户名可以用,恭喜;echo $info;?ajax处理返回的json json的格式如下 ：属性名:属性值,属性名:属性值,. 因为json数据是原生态数据，因此这种数据格式很稳定，而且描述能力强,我们建议大家使用json格式 json数据格式的扩展如果服务器返回的json 是多组数据，则格式应当如下:$info=属性名:属性值,.,属性名:属性值,.,.;在xmlhttprequest对象接收到json数据后，应当这样处理/转成对象数组var reses=eval(+xmlHttpRequest.responseText+);/通过reses可以取得你希望的任何一个值reses?.属性名 更加复杂的json数据格式 var people = programmers: firstName: Brett, email: brettnewI , firstName: Jason, email: , writer:writer:宋江,age:50,writer:吴用,age:30,sex:男 ;window.alert(grammers0.firstName);window.alert(grammers1.email);window.alert(people.writer1.writer);window.alert(people.sex); 小结:当一个ajax请求到服务器，服务器可以根据需求返回 三种格式的数据,那么我们应当选择哪一个?1. 如果你的项目经理没有特殊的要求，建议使用json2. 若应用程序不需要与其他应用程序共享数据的时候, 使用 HTML 片段来返回数据时最简单的3. 如果数据需要重用, JSON 文件是个不错的选择, 其在性能和文件大小方面有优势4. 当远程应用程序未知时, XML 文档是首选, 因为 XML 是 web 服务领域的 “世界语”省市联动showCities.php页面/创建ajax引擎function getXmlHttpObject()var xmlHttpRequest;/不同的浏览器获取对象xmlhttprequest 对象方法不一样if(window.ActiveXObject)xmlHttpRequest=new ActiveXObject(Microsoft.XMLHTTP);elsexmlHttpRequest=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)/取出服务器回送的数据var cities=myXmlHttpRequest.responseXML.getElementsByTagName(city);$(city).length=0;var myOption=document.createElement(option);myOption.innerText=-城市-;/添加到$(city).appendChild(myOption);/遍历并取出城市for(var i=0;icities.length;i+)var city_name=citiesi.childNodes0.nodeValue;/创建新的元素optionvar myOption=document.createElement(option);myOption.value=city_name;myOption.innerText=city_name;/添加到$(city).appendChild(myOption);/这里我们写一个函数function $(id)return document.getElementById(id); -省- 浙江 江苏 四川 -城市- -县城- *showCitiesProcess.php*?php/服务器端/这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header(Content-Type: text/xml;charset=utf-8);/告诉浏览器不要缓存数据header(Cache-Control: no-cache);/接收用户的选择的省的名字$province=$_POSTprovince;file_put_contents(d:/mylog.log,$province.rn,FILE_APPEND);/如何在调试过程中，看到接收到的数据 。/到数据库去查询省有那些城市(现在先不到数据库)$info=;if($province=zhejiang)$info=杭州温州宁波;else if($province=jiangsu)$info=南京徐州苏州;echo $info;?黄金价格波动图glodPrice.php界面var myXmlHttpRequest;function updateGoldPrice()myXmlHttpRequest=getXmlHttpObject();if(myXmlHttpRequest)/创建ajax引擎成功var url=glodPriceProcess.php;var data=city=dj&city=tw&city=ld;myXmlHttpRequest.open(post,url,true);myXmlHttpRequest.setRequestHeader(Content-Type,application/x-www-form-urlencoded);myXmlHttpRequest.onreadystatechange=function chuli()/接收数据json if(myXmlHttpRequest.readyState=4)if(myXmlHttpRequest.status=200)/取出并转成对象数组var res_objects=eval(+myXmlHttpRequest.responseText+);$(dj).innerText=res_objects0.price;$(tw).innerText=res_objects1.price;$(ld).innerText=res_objects2.price;myXmlHttpRequest.send(data);/使用定时器 每隔5 秒window.setInterval(updateGoldPrice(),5000);每隔5秒中更新数据(以1000为基数计算涨跌)市场最新价格$涨跌伦敦788.7211.3台湾854.0146.0东京1791.3791.3glodPriceProcess.php?php/这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header(Content-Type: text/html;charset=utf-8);/告诉浏览器不要缓存数据header(Cache-Control: no-cache);/接收$cities=$_POSTcity;/随机的生成 三个 500-2000间数/$res=price:400,price:1000,price:1200;$res=;for($i=0;$i晚上的练习1. 把省市联动 和数据库2. 把黄金价格波动的 上下箭头指示做出来3. 把用户管理系统(信息共享系统)，使用更加规范的mvc模式开发(引入smarty)如果我们的代码比较复杂，可以通过file_put_contents来输出信息到某个日志文件.(!)第二天ajax实现聊天室的功能需求如下:分析实现的思路,如图所示:1. 创建数据库create database chat;create table messages(id int unsigned primary key auto_increment,sender varchar(64) not null,getter varchar(64) not null,content varchar(3600) not null,sendTime datetime not null,isGet tinyint default 0)2. 界面添加如下功能:1. 增加用户表(通过id登录，并且对身份验证)2. 防止同一个用户，多次登录.?-session和数据库3. 公共聊天室.4. 界面做成(框架-div+css)5. 数据库的信息，怎么清理(后台管理),发布广告，用户的管理（后台管理程序）第4天jquery是什么 jquery是一个 javascript框架/javascript 库所谓库就是很多现成的函数的集合 write less do more jquery是一个轻量级的js库，给使用者提供一系列的函数为什么需要javascript框架?设计者认为有很多代码像AJAX在很多地方要重复编写，能不能写成一个函数让开发人员直接使用从而提高开发效率呢？于是就出了框架比如: 为了获取 id 对应对象document.getElementById(id号);为了获取标签名获取对象document.getElmentsByTagName(tagname);如果使用框架$(#id) $(.classname)如果使用jquery框架发送 ajax请求Jquery.send(.);得出结论是: 使用js框架可以提高我们开发js的效率目前流行的js1. jquery 2. extjs 3. prototype 4. dwr(运行服务器) 5. dojo安