强烈推荐-ajax开发人员

七、AJAX发展到这里，已经可以清楚的知道AJAX是什么，AJAX能做什么，AJAX有什么不好。如果你认为AJAX真的可以提高你的开发工作，那么继续看看如何使用AJAX。7.1.应用于AJAX的技术在AJAX涉及的七种技术中，我个人认为Javascript、XMLHttpRequest、DOM和XML更有用。A. XMLHttpRequest对象XMLHttpRequest是XMLHTTP组件的对象。通过这个对象，AJAX只能像桌面应用一样与服务器交换数据，无需每次刷新界面，也无需每次将数据处理交给服务器；这样既减轻了服务器的负担，又加快了响应速度，缩短了用户的等待时间。从IE5.0开始，开发人员可以使用XMLHTTP ActiveX组件来扩展其在网页中的功能，并且可以直接向服务器传输数据或从服务器接收数据，而无需从当前网页导航。Mozilla1.0和NetScape7是创建继承的XML XMLHttpRequest的代理类；在大多数情况下，XMLHTTPRequest对象类似于XMLHttp组件，具有相似的方法和属性，但有些属性不同。XMLHttpRequest对象初始化：script language=" JavaScript " var http _ request=false；//IE浏览器http _ request=new ActiveX object(' MSXML 2 . xmlhttp ')；http _ request=new activexoobject(' Microsoft。XMLHTTP’)；//Mozilla浏览器http _ request=new XMlhttprequest()；/scriptXMLHttpRequest对象的方法：方法descriptionabort()停止当前请求getAllResponseHeaders()以字符串形式返回完整的headers getresponseheader(' header label ')返回单个标头标签open('method ')。URL' [，asyncflag [，' username' [，' password']])设置待处理请求的目标URL、方法和其他参数send(内容)send request请求setRequestHeader('label '，Value ')设置Header并随请求发送XMLHttpRequest对象的属性：该属性描述了onreadystatechange状态更改的事件触发器readyState对象状态(整数)。3360 0=未初始化1=读取2=读取3=交互4=完成responseText服务器进程返回的数据的文本版本；responseXML服务器进程返回的与DOM兼容的XML文档对象返回的状态代码；例如404='找不到文件'，200='成功'，statustext服务器b返回的statusText信息，Javascript Javascript一直定位为客户端的脚本语言，使用最多的地方就是表单数据的验证。现在，您可以使用Javascript来操作XMLHttpRequest来处理数据库。c . DOM(Document Object Model)是一组针对HTML和XML的API，它提供了文件的呈现结构，可以用来改变其中的内容和可见对象。脚本语言只能通过DOM与页面交互。Web开发人员可以操作和创建文件的属性、方法和事件由对象表示。例如，文档表示页面对象本身。d、XML通过XML(可扩展标记语言)，结构化数据可以用标准化的方式定义，这意味着在互联网上传输的数据和文档符合统一的标准。用XML表示的数据和文档可以很容易地被所有程序共享。7.2.AJAX开发框架在这里，我们形成了一个程序框架，用于通过逐步解析来发送和接收XMLHttpRequest请求。AJAX本质上遵循Request/Server模式，所以这个框架的基本流程如下：对象初始化发送请求服务器接收服务器返回客户端接收修改客户端页面内容。只有这个过程是异步的。a .初始化对象并发出一个XMLHttpRequest。为了让Javascript向服务器发送HTTP请求，必须使用XMLHttpRequest对象。在使用之前，实例化XMLHttpRequest对象。正如我之前所说的，每个浏览器以不同的方式实现这个实例化过程。IE以ActiveX控件的形式提供，而Mozilla等浏览器则直接以XMLHttpRequest类的形式提供。

要使编写的程序跨浏览器运行，请编写如下内容：if(window . xmlhttprequest){//Mozilla，safari，http _ request=new xmlhttprequest()；}else if(窗口。ActiveX object){//IEhttp _ request=new ActiveX object(' Microsoft。XMLHTTP’)；}某些版本的Mozilla浏览器在处理服务器返回的不包含XML mime类型的标头信息的内容时会出错。因此，请确保返回的内容包含文本/xml信息。http _ request=new XMlhttprequest()；http _ request . overridemimetype(' text/XML ')；b .指定响应处理函数接下来，指定服务器返回信息时客户端的处理模式。只需将相应的处理程序名称分配给XMLHttpRequest对象的onreadystatechange属性。示例：http _ request . onreadystatechange=process request；需要时，函数名不加括号，也不指定参数。您也可以用Javascript立即定义函数的方式来定义响应函数。例如：http _ request . onreadystatechange=function(){ }；c、发送一个HTTP请求并指定一个响应处理程序，那么就可以向服务器发送一个HTTP请求。此步骤调用XMLHttpRequest对象的打开和发送方法。http_request.open('GET '，' http://www.example.org/some.file '，true)；http _ request . send(null)；open的第一个参数是HTTP请求的方法，是Get、Post或Head。open的第二个参数是目标URL。出于安全考虑，该网址只能在同一个域，否则会提示“无权限”的错误。网址可以是任何网址，包括需要服务器解释和执行的页面，而不仅仅是静态页面。网址处理请求XMLHttpRequest请求与普通的HTTP请求相同。例如，JSP可以使用request.getParameter(" ")或request.getAttribute(" ")来获取URL参数值。open的第三个参数仅指定在等待服务器返回信息时是否继续执行以下代码。如果为真，在服务器返回信息之前，执行不会继续。默认值为“真”。根据顺序，在打开调用完成后调用send方法。如果发送参数是在开机自检模式下发送的，它可以是您想要发送到服务器的任何内容。但是，就像表单一样，如果您想向服务器发送文件或发布内容，您必须首先调用setRequestHeader方法来修改MIME类。以下：http _ request . setrequest header(" content-type "，" application/x-www-form-URL encoded ")；此时，材料以查询字符串的形式列为sned的参数，如：name=value other name=other valueso=ond，处理服务器返回的信息。在第二步中，我们已经指定了响应处理功能。在这一步中，我们将看到这个响应处理函数应该做什么。首先，它检查XMLHttpRequest对象的readyState值，以确定请求的当前状态。参考上面的属性表可以知道，当readyState值为4时，意味着服务器已经返回了所有信息，可以开始处理信息并更新页面内容。如下：if (HTTP _ request。ready state==4){//信息已返回，可以开始处理}否则信息未返回。等待服务器返回信息后，需要判断返回的http状态码，确保返回的页面没有错误。所有的状态代码都可以在W3C的官方网站上找到。其中，200表示页面正常。if(http _ request . status==200){//页面正常，可以开始处理信息} else {//页面有问题}XMLHttpRequest有两种方法可以成功处理返回的信息：responseText:将返回的信息作为字符串使用；ResponseXML:将返回的信息作为一个XML文档，可以由DOM进行处理。

e、一个初步的开发框架总结了上面的步骤，我们整理出一个初步的、可用的开发框架供以后使用；在这里，服务器返回的信息以带window的字符串形式显示，alert:script language=' JavaScript ' var http _ request=false；send _ request(URL){//初始化，指定处理函数，发送请求函数http _ request=false//开始初始化XMLHttpRequest对象if(window . XMLHttpRequest){//Mozilla浏览器http _ request=new XMLHttpRequest()；if(http _ request . overridimetype){//设置mime类http _ request . overridimetype(' text/XML ')；} } else if(window . ActiveX object){//ie browser try { http _ request=new ActiveX object(' MSXML 2 . xmlhttp ')；} catch(e){ try { http _ request=new ActiveX object(' Microsoft。XMLHTTP’)；} catch (e) {}}}if(！Http_request) {//异常，对象实例创建失败window.alert ('XMLHttpRequest对象实例无法创建');返回false} http _ request . onreadystatechange=process request；//确定发送请求的方式和URL，是否同步执行下一个代码http _ request.open ('get '，URL，true)；http _ request . send(null)；}//函数process request(){ if(http _ request . readystate==4){//确定对象状态if(http _ request . status==200){//信息已成功返回，开始处理信息告警(http _ request . responsetext)；} else {//页面异常提醒('您请求的页面异常。);}}}/script7.3，简单示例接下来，我们用上面的开发框架做两个简单的应用。一、数据验证在用户注册表单中，经常会遇到要检查待注册用户名是否唯一的情况。传统上，窗口的弹出窗口或窗口的对话框。使用了showModalDialog。但是，两者都需要打开窗口。采用AJAX后，参数直接异步提交给服务器，服务器返回的验证信息通过window.alert显示，代码如下：在body/body之间增加一个表单代码：表单名称=' form1 ' action=' ' method=' post '用户名：input type=' text ' name=' username ' value=' input type=' button ' name=' check ' value=' unique check。Onlick=' usercheck()'输入类型=' submit ' name=' submit ' value=' submit '/form基于开发框架添加了一个调用函数：function user check(){ var f=document . form 1；var username=f . username . value；如果(用户名=='') {window.alert('用户名不能为空。);f . username . focus()；返回false} else { send _ request(' sample 1 _ 2 . JSP？username=' username '；}}看看sample1_2.jsp做了什么：% @ page content type=' text/html；charset=GB 2312 ' error page=' ' % % String username=request . GetParameter(' username ')；If ('educhina '。equals (username)) out.print('用户名已经注册，请更改用户名。' );Else out.print('用户名尚未使用，您可以继续。);%运行它，嗯，没有弹出窗口，也没有页面刷新，和预期的一样。如果需要，可以在sample1_2.jsp中实现更复杂的功能最后，只需打印出反馈信息即可。

b级联菜单在第五部分，我们提到使用AJAX来改进级联菜单的设计。接下来，我们将演示如何“按需获取数据”。首先，在正文/正文中间添加以下HTML代码：表格宽度=' 200 '边框=' 0 '单元格间距=' 0 '单元格填充=' 0 ' trtdheight=' 20 ' a href=' JavaScript 3360 void(0)。onclick=' show roles(' pos _ 1 ')'经理办公室/a/TD/trtr style=' display : none ' TD height=' 20 ' id=' pos _ 1 '/TD/trtd height=' 20 ' a href=' JavaScript 3360 void(0。onclick=' show roles(' pos _ 2 ')'开发部门/a/TD/trtr style=' display : none ' TD id=' pos _ 2 ' height=' 20 '/TD/tr/table基于框架增加了一个响应函数show roles(obj):/根据函数show roles(obj){ document . getelementbyid(obj)。parent node . style . display=' '；Document.getelementbyid (obj)。innerhtml='正在读取数据.'currentPos=objsend_request('sample2_2.jsp？playPos=' obj)；}修改框架的processRequest函数：//函数process request(){ if(http _ request . readystate==4){//判断对象状态if(http _ request . status==200){///。消息已成功返回，消息文档. getelementbyid (currentpos)。inner html=http _ request . response text已被处理。} else {//页面异常提醒('您请求的页面异常。);}}}最后是smap L2 _ 2 . JSP:% @ page content type=' text/html；charset=GB 2312 ' error page=' ' % % String PlayPos=request . GetParameter(' PlayPos ')；If ('pos _ 1 '。等于(playpos))退出。打印('总经理br副总经理')；Elseif ('pos _ 2 '。等于(playpos))退出。println('首席工程师br软件工程师')；%运行一下看看效果：。

7.4.文档对象模型文档对象模型是表示文档(如HTML和XML)并访问和操作构成文档的各种元素的应用程序接口。一般来说，所有支持Javascript的浏览器都支持DOM。本文中的DOM指的是W3C定义的标准文档对象模型，它以树形结构表示HTML和XML文档，定义了遍历树和检查修改树的节点的方法和属性。阅读下一页的全文。