教程教案新ajax课件

1、AJAX技术什么是Ajax?AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。不是一种新技术，是如下几种技术的组合应用：基于web标准（standards-based presentation）XHTML+CSS的表示；使用 DOM（Document Object Model）进行动态显示及交互；使用 XML 和 XSLT 进行数据交换及相关操作；使用 XMLHttpRequest 进行异步数据查询、检索；使用 JavaScript 将所有的东西绑定在一起。Ajax本质上是一个浏览器端的

2、技术。为什么学习Ajax?通过异步模式，提升了用户体验 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用现在几乎所有的B/S软件项目都会增加Ajax，从而提高用户体验度。最典型的应用：Google Maps!Ajax基本原理创建ajax程序的基本流程(1.html)创建XMLHttpRequest对象使用XMLHttpRequest对象创建请求监视response的状态，写回调函数处理服务器返回的数据使用XMLHttpRequest对象发送请求var request;if (window.XMLHttpRequest) / Mozilla,. request = new X

3、MLHttpRequest(); else if (window.ActiveXObject) / IE request = new ActiveXObject(“Msxml2.XMLHTTP”); request.open(get, “testAjaxServlet );request.onreadystatechange = function()if(request.readyState=4)var result = request.responseText; /得到服务器端返回的数据document.getElementById(“div2”).innerHTML=result; /局部

4、刷新;request.send(null); /如果不写null,火狐会报错。课堂练习(20分钟)自己动手完成第一个Ajax程序。模仿老师代码完整的Ajax实例代码(2.html)readyState值含义 0 表示XMLHttpRequest已建立，但还未初始化，这时尚未调用open方法 1 表示open方法已经调用，但未调用send方法（已创建，未发送） 2 表示send方法已经调用，其他数据未知 3 表示请求已经成功发送，正在接受数据 4 表示数据已经成功接收。 Http状态码含义 200 请求成功 404 请求资源未找到 500 内部服务器错误 课堂练习(15分钟)完善自己的第一个aj

5、ax程序Ajax的两种传参方式(3.html)Get方式传参直接通过url传参注意：get方式提交经常会遇到浏览器缓存问题，浏览器不对同样的url重复提交。这时可以在url后面增加参数：?rand = Math.random() 或者：rand = new Date()Post方式传参request.open(“post”,url);req.setRequestHeader(Content-Type,application/x-www-form-urlencoded);req.send(a=3&b=中国); Ajax接受数据的几种方式(4.html)普通文本数据req.responseText

6、得到返回的文本数据。XML数据（testxml.jsp）服务器端response.setContentType(text/xml;charset=utf-8); /通过ajax写xml数据最好使用utf-8response.getWriter().println(“朱元璋”); /一端完整的xml数据,有根节点、形式良好的！客户端req.responseXML.getElementsByTagName(name)0.firstChild.data; xpath解析xml数据： selectNodes、selectSingleNode（只有ie适用！）为了让火狐也能用，引入：selectNode

7、.js即可！Ajax接受数据的几种方式JSON(javascript object native)严重推荐大家使用JSON!服务器端sb.append(“var a= name:朱元璋,age:32,zhiye:皇帝; var b = age:1,name:a,age:2,name:b,age:3,name:c;); 客户端eval(xmlHttp.responseText); /利用eval函数将返回的文本转化成js对象alert();课堂练习(20分钟)测试ajax的两种传参方式测试ajax获得数据的三种方式自己封装Ajax通用工具方法！详见：5.html, myAjaxUtil.js注意领悟：函数也