Ajax 入門.pptVIP

Ajax入门 form表单提交过程 单击提交按钮 向action属性指定的url请求新的响应网页 当前网页被清空 解析、显示新到达的网页 JavaScript 代码在幕后发送请求 JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说 JavaScript 代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。 要实现上述功能必须借助XMLHttpRequest对象 Ajax请求过程 通过js 向指定的url请求新的响应数据 当前网页保持不变 新到达的数据被缓存到后台 通过js显示后台缓存数据 创建新的 XMLHttpRequest 对象 script language=javascript type=text/javascript var xmlHttp = new XMLHttpRequest(); /script 微软的XMLHttpRequest对象 xmlHttp = new ActiveXObject(Microsoft.XMLHTTP) xmlHttp = new ActiveXObject(Msxml2.XMLHTTP) xmlHttp = new XMLHttpRequest() Ajax组成部分 声明XMLHttpRequest对象 发送请求 检查接收状态，接收数据 显示数据、使用数据 跨浏览器的XMLHttpReques对象 发送请求 检查接收状态，接收数据 显示数据（例子） JQuery ajax框架 /visual/cn/index.xml 什么是JQuery jQuery是JavaScript语言的一个新的资源库(框架) jQuery能快速,简洁的使用HTML documents, handle events, perform animations,并且能把Ajax交互应用到网页,jQuery能够改变你书写JavaScript的方式. JQuery特点 简化元素（node）的定位、选择 简化样式单的操作 简化node添加、移动、删除操作 简化Ajax操作 hello例子 script src=”jquery库.js” type=”text/javascript”/script script type=”text/javascript” $(document).ready(function(){ $(”#p1”).text(”hello”) }) /script body p id=”p1”xxx/p /body 又一个例子 Selectors element #id .class :first/last/eq(index) :contains(text) [attr]/[attr=value]/[attr=v1][attr=v2] 举例 $(.myClass).css(border,3px solid red); $(tr:first).css(font-style, italic); $(td:eq(2)).css(color, red); $(div:contains(John)).css(text-decoration, underline); $(div[id]).one(click, function(){ var idString = $(this).text()+ = +$(this).attr(id); $(this).text(idString); }); Attributes html text attr val xxClass (addClass/removeClass/hasClass/toggleClass) 举例 $(div).html(span class=redHello bAgain/b/span); $(p).text(Some new text.); var title = $(em).attr(title); $(div).text(title); $(button).click(function () { var text = $(this).text(); $(input).val(text); }); $(p:last).addClass(selected); CSS css(name) css(name,value) Manipulation html(), html(val) text(), text(val) append(content), appendTo(selector) prepend(content),prependTo(selector) after(con