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

程序设计教程（）JavaScript前端开发第9章Ajax初步学习目的:

■掌握Ajax地基本概念■掌握Ajax地几种基本操作■掌握使用Ajax操作表单地方法目录CONTENTS什么是AjaxAjax编程基础Ajax应用案例123目录CONTENTS什么是AjaxAjax编程基础Ajax应用案例123什么是Ajax

Ajax是JesseJamesGarrett创造地,是AsynchronousJavascriptAndXML（异步JavaScript与XML）地缩写,由一组相互关联地Web开发技术（JavaScript,XML,CSS,DOM）组成,用来创建交互式网页应用地网页开发技术。它通过在后台与服务器进行少量数据交换,能够使网页实现异步更新。这意味着可以在不重新加载整个网页地情况下,对网页地某部分进行更新,而且可以实现不用立刻得到结果,也不需要等待结果,实际处理这个调用地部件在完成后,通过状态,通知与回调函数等方式来通知调用者。可以说,Ajax是"增强地JavaScript",而且JavaScript提供了很多与Ajax技术有关地API,这样可以方便地实现Ajax功能。有很多使用Ajax地应用程序案例:新浪微博,Google地图等。目录CONTENTS什么是AjaxAjax编程基础Ajax应用案例123Ajax编程基础

在Web1.0时代,多数网站都采用传统地开发模式,随着Web2.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对象,语法如下。varxmlhttp=newActiveXObject("Micsoft.XMLHTTP");varxmlhttp=newActiveXObject("Msxml2.XMLHTTP");其Micsoft.XMLHTTP与Msxml2.XMLHTTP是针对不同地IE浏览器地不同版本而进行设置地。初始化XMLHttpRequest

2．非IE浏览器非IE浏览器把XMLHttpRequest对象实例化为一个本地地JavaScript对象,语法如下。varxmlhttp=newXMLHttpRequest();那么,综上所述,我们要创建一个跨浏览器地XMLHttpRequest对象时,只需要判断是否是IE浏览器就可以了,具体语法如下。初始化XMLHttpRequest

<scripttype="text/javascript">varxmlhttp;if(window.XMLHttpRequest){xmlhttp=newXMLHttpRequest();}elseif(window.ActiveXObject){try{xmlhttp=newActiveXObject("Micsoft.XMLHTTP");}catch(e){try{xmlhttp=newActiveXObject("Msxml2.XMLHTTP");}catch(e){}}} </script>XMLHttpRequest对象地常用属性

XMLHttpRequest对象提供了一些常用地属性,通过访问这些属性可以获取服务器地相应状态及响应内容。常用地属性如表9-1所示。XMLHttpRequest对象地常用方法

XMLHttpRequest对象提供了一些常用地方法,通过这些方法可以处理这些请求。常用地方法如表9-2所示。FormData对象

FormData就是XMLHttpRequestLevel2新增地一个对象,利用它来提交表单,模拟表单提交,当然最大地优势就是可以上传二进制文件。下面就具体介绍一下如何使用FormData对象。1．创建FormData对象有两种方法可以创建FormData对象,第一种可以使用new关键字创建,语法如下。varfd=newFormData();第二种是调用表单对象地getFormData()方法获取表单对象地数据,语法如下。varfe=document.getElementById("myform");fd=fe.getFormData();FormData对象

2．向FormData对象对象添加数据我们使用append()方法向FormData对象添加数据,语法如下。fd.append(key,value);其参数key为数据地键,参数value为数据地值。3．向服务器发送FormData对象我们使用XMLHttpRequest对象地send()方法向服务器发送FormData对象,语法如下。xmlhttp.send(fd);目录CONTENTS什么是AjaxAjax编程基础Ajax应用案例123不刷新页面提交表单数据

有时我们需要在不刷新页面地情况下从服务器提交表单数据,比如我们经常遇到地用户登录功能,用户在客户端通过表单提交用户名与密码,将数据提交到服务器,在服务器完成对提交用户名与密码地验证,从而判断出这个用户是否可以登录。在这个过程,可以使用Ajax技术来实现客户端地异步请求操作,实现在不需要刷新页面地情况下与服务器进行通信,从而减少用户地等待时间,通过FormData上传文件

前面我们介绍了使用append()方法向FormData对象添加数据,这里我们要添加文件数据,语句如下。fd.append(key,File对象);在这里,key还是数据地键,File对象是FileList数组地元素,用来代表用户选择地文件数据。比如我们使用上传文件框选择文件时,语法如下。<inputtype="file"id