ajax概要.docVIP

Ajax概要 目录 ?为什么需要AJAX？？？ ?什么是AJAX？？？？ ?AJAX的组成？？？（老技术，新思想） ?AJAX的优缺点？？？？ ?Ajax的工作流程-----核心是XMLHTTPREQUEST ?XMLHttpRequest对象简介 ?各种模板------老师的总结 ?什么是JSON？？？？********* 记录: — 网上看电影 同时提供了类似C/S的交互效果，操作更加方便----百度地图，网页游戏 ?什么是AJAX？？？？ AJAX ：Asynchronous JavaScript And XML 异步的脚步和XML能实现异步请求和局部更新的web2.0客户端开发技术； 主要作用是 使JavaScript从服务器获取数据而不必刷新整个页面； ?AJAX的组成？？？（老技术，新思想） 1----使用XHTML和CSS标准化呈现； 2---使用DOM实现动态显示和交互； 3---使用xml和XSLT进行数据交互和处理； 4---使用XMLHTTPREQUEST进行异步数据读取； 5---最后用JavaScript整合上述所有技术； ?AJAX的优缺点？？？？ 1----页面无刷新的动态数据交换； 2----局部刷新页面【验证用户名是否唯一】； 3----界面的美观【增强用户的体验】； 4----对数据库的操作-----但，在实际工作中很少这么做，防止黑客 5---可以返回简单的文本格式，也可以返回xml,json数据格式； Ajax典型的应用场景： 1----动态加载数据，按需取得数据【树形菜单，联动菜单】 2----改善用户体验【输入内容前提示，带进度条的文件上传】 3----电子商务应用【购物车，邮件订阅】 4----访问第三方服务【访问搜素服务，rss阅读器】 ?Ajax的工作流程-----核心是XMLHTTPREQUEST 具体步骤： 用户触发一个脚本的事件，此事件将交给相关的函数来处理； On***=**(); 在此函数运行过程中，首先创建XMLHttpRequest（XHR）对象 createXMLHTTPRequest(); 在创建XMLHttpRequest对象的过程中需要我们判断浏览器类型 IE浏览器和非IE浏览器 利用XHR在里面用open(“GET/POST”,url,true)指定XMLHttpRequest对象（Ajax引擎自动提交给后台的服务器端程序（JSP/Servlet）） 里面的第一个参数是请求方法， 第二个参数是指定JSP/Servlet的url地址 第三个参数是决定是否使用异步的方式； XMLHttpRequest对象当中指定用于处理的JSP/Servlet返回结果的回调函数； XHR.onreadystatechange=callback; XMLHttpRequest对象当中调用send方法向后台的servlet发送请求； XHR.send(XX); XX---取决于提交方式，get-(null; post-(url; 7-servlet接收到Ajax的引擎(XMLHttpRequest)的请求，处理请求并把处理结果放到xml或JSON形式的文件中，返回给客户端Ajax的引擎； 8-客户端将调用回调函数来进行处理，处理时，先判断是否正确接收服务端返回的数据，然后，用DOM解析器解析服务端所返回的xml文档，最后，将结果显示在div/span的指定位置上； 至此，完成了局部刷新--------------------- If(req.readyState==4){ If(req.status==200){ } } ?XMLHttpRequest对象简介-----AJAX引擎 XMLHTTPREQUEST是整个Ajax开发的基础，核心； 提供客户端和服务器端异步通信的能力； 能够向服务器发出异步通信请求； 能够接收服务器的返回页面； 最早出现于IE浏览器中，随着应用的广泛，渐渐推广到其他浏览器中 ?创建XMLHttpRequest对象的模板----------------------- var XMLHttpReq; //创建XMLHttpRequest对象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ //判断是否为Mozilla浏览器 XMLHttpReq=new XMLHttpRequest(); }else{ //IE浏览器