JavaScript前端开发程序设计Ajax初步.pptxVIP

JavaScript前端开发程序设计教程（）第9章 Ajax初步学习目的: ■ 掌握Ajax地基本概念 ■ 掌握Ajax地几种基本操作 ■ 掌握使用Ajax操作表单地方法什么是Ajax1Ajax编程基础2目录CONTENTSAjax应用案例3什么是Ajax1Ajax编程基础2目录CONTENTSAjax应用案例3什么是AjaxAjax是Jesse James Garrett 创造地,是Asynchronous Javascript And XML（异步JavaScript与XML）地缩写,由一组相互关联地Web开发技术（JavaScript,XML,CSS,DOM）组成,用来创建交互式网页应用地网页开发技术。它通过在后台与服务器进行少量数据交换,能够使网页实现异步更新。这意味着可以在不重新加载整个网页地情况下,对网页地某部分进行更新,而且可以实现不用立刻得到结果,也不需要等待结果,实际处理这个调用地部件在完成后,通过状态,通知与回调函数等方式来通知调用者。可以说,Ajax是增强地JavaScript,而且JavaScript提供了很多与Ajax技术有关地API,这样可以方便地实现Ajax功能。有很多使用Ajax地应用程序案例:新浪微博,Google地图等。什么是Ajax1Ajax编程基础2目录CONTENTSAjax应用案例3 Ajax编程基础在Web 1.0时代,多数网站都采用传统地开发模式,随着Web 2.0时代地到来,越来越多地网站采用Ajax开发模式。在这种模式下,首先页面用户地操作将通过Ajax引擎与服务器端进行通信,然后将返回结果提交给客户端页面地Ajax引擎,最后由Ajax引擎来决定将这些数据插入到页面地指定位置。Ajax是XMLHttpRequest对象与JavaScript,XML,CSS,DOM等多种技术地组合。XMLHttpRequest对象是最核心地技术,它是浏览器接口,开发者可以使用它提出HTTP与HTTPS请求,而且不需要刷新就可以修改页面地内容。它可以实现如下功能。（1）在不重新加载页面地情况更新网页。（2）在页面已经加载后从服务器可以接收数据,请求数据。（3）在后台向服务器发送数据。初始化XMLHttpRequest在使用XMLHttpRequest对象进行操作前,首先需要初始化这个对象,由于它不是一个W3C标准,所以对于不同地浏览器,初始化地方法是不同地。通常情况下,初始化XMLHttpRequest对象时只需要考虑两种情况,一种是IE浏览器,另一种是非IE浏览器。下面分别介绍。1．IE浏览器IE浏览器使用Active对象来创建XMLHttpRequest对象,语法如下。var xmlhttp=new ActiveXObject(Micsoft.XMLHTTP);var xmlhttp=new ActiveXObject(Msxml2.XMLHTTP);其Micsoft.XMLHTTP与Msxml2.XMLHTTP是针对不同地IE浏览器地不同版本而进行设置地。初始化XMLHttpRequest2．非IE浏览器非IE浏览器把XMLHttpRequest对象实例化为一个本地地JavaScript对象,语法如下。var xmlhttp=new XMLHttpRequest();那么,综上所述,我们要创建一个跨浏览器地XMLHttpRequest对象时,只需要判断是否是IE浏览器就可以了,具体语法如下。初始化XMLHttpRequestscript type=text/javascriptvar xmlhttp;if(window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest();}else if(window.ActiveXObject){ try{ xmlhttp=new ActiveXObject(Micsoft.XMLHTTP); }catch(e){ try{ xmlhttp=new ActiveXObject(Msxml2.XMLHTTP); }catch(e){ }}} /scriptXMLHttpRequest对象地常用属性XMLHttpRequest对象提供了一些常用地属性,通过访问这些属性可以获取服务器地相应状态及响应内容。常用地属性如表9-1所示。XMLHttpRequest对象地常用方法XMLHttpRequest对象提供了一些常用地方法,通过这些方法可以处理这些请求。常用地方法如表9-2所示。FormData对象FormData 就是 XMLHttpRequest Level 2 新增地一个对象,利用它来提交表单,模拟表单提交,当然最大地优势就是可以上传二进制文件。下面就具体介绍一下如何使用FormData对象。1．创建FormDa