• 1. 北京传智播客教育 www.itcast.cnAjax编程入门
  • 2. 北京传智播客教育 www.itcast.cn什么是AJAXAJAX = Asynchronous JavaScript and XML 一种日渐流行的Web编程方式 Better Faster User-Friendly 不是一种新的编程语言
  • 3. 北京传智播客教育 www.itcast.cn定义者Jesse James Garrett基于标准的表示技术,使用XHTML和CSS 动态显示和交互技术,使用Document Object Model 数据交换和操作技术,使用XML和XSLT 异步数据获取技术,使用XMLHttpRequest 而JavaScript将以上都结合在一起 AJAX = DHTML + XHR
  • 4. 北京传智播客教育 www.itcast.cnAJAX交互模型
  • 5. 北京传智播客教育 www.itcast.cn传统 web交互方式 – 同步
  • 6. 北京传智播客教育 www.itcast.cnAJAX支持 web交互方式 – 异步
  • 7. 北京传智播客教育 www.itcast.cnAJAX GOOGLE 应用Google Suggest Gmail Google Map
  • 8. 北京传智播客教育 www.itcast.cnAJAX快速入门1.创建XMLHttpRequest对象 2.将状态触发器绑定到一个函数 3.使用open方法建立与服务器的连接 4.向服务器端发送数据 5.在回调函数中对返回数据进行处理
  • 9. 北京传智播客教育 www.itcast.cn创建XMLHttpRequest对象不同浏览器提供不同的支持 IE浏览器 new ActiveXObject("Msxml2.XMLHTTP"); new new ActiveXObject("Microsoft.XMLHTTP"); 其它浏览器(火狐) new XMLHttpRequest();
  • 10. 北京传智播客教育 www.itcast.cnXMLHttpRequest方法 open(method,url, asynch) :建立对服务器的调用 send(content) :向服务器发送请求 属性 onreadystatechange :状态回调函数 responseText/responseXML :服务器的响应字符串 status:服务器返回的HTTP状态码 statusText: 服务器返回的HTTP状态信息 readyState :对象状态 0 = 未初始化 1 = 正在加载 2 = 已加载 3 = 交互中 4 = 完成
  • 11. 北京传智播客教育 www.itcast.cn将状态触发器绑定到一个函数var xmlHttp; createXMLHttpRequest() … xmlHttp.onreadystatechange = processor; 这里的processor是回调函数的方法名 function processor (){ … … }
  • 12. 北京传智播客教育 www.itcast.cn使用open方法建立连接open(method,url, asynch) 其中method表示HTTP调用方法,一般使用"GET","POST" url表示调用的服务器的地址 asynch表示是否采用异步方式,true表示异步,一般这个参数不写 范例代码 xmlHttp.open("POST", "url"); xmlHttp.open("GET", "url?name=xxx&pwd=xxx");
  • 13. 北京传智播客教育 www.itcast.cn向服务器端发送数据GET方式提交 数据在URL上 xmlHttp.send(null); POST方式提交 xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); xmlHttp.send("name=xxx&pwd=xxx");
  • 14. 北京传智播客教育 www.itcast.cn在回调函数中对数据进行处理function 回调函数(){ if(xmlHttp.readyState == 4) { //如果响应完成 if(xmlHttp.status == 200) {//如果返回成功 … } } } 常用的服务器返回数据格式 HTML片段 JSON格式的数据 XML格式的数据
  • 15. 北京传智播客教育 www.itcast.cn练习:验证用户名是否有效HTML片段的数据处理 通过xmlHttp.responseText获得返回数据 通过DOM查找获得元素 调用元素的 innerHTML进行操作
  • 16. 北京传智播客教育 www.itcast.cn练习:点击链接获取服务器端数据点击链接
  • 17. 北京传智播客教育 www.itcast.cn学习JSON和XML的生成
  • 18. 北京传智播客教育 www.itcast.cn使用eval将返回json转换为js对象
  • 19. 北京传智播客教育 www.itcast.cn练习:select联动