前端工程师-前端工程师必知必会

上海腾一研发部内部技术文档前端工程师对这些东西要想都不用想就知道么前端工程师对这些东西要想都不用想就知道么想都不用想*XMLHttpRequest这是什么,怎样完整地执行一次GET请求,怎样检测错误.XMLHttpRequest对象还没有标准化,但是W3C已经开始了标准化的工作,本手册介绍的内容都是基于标准化的工作草案.://://对象什么是?,对象什么是?最通用的定义为:XmlHttp是一套可以在Javascript,VbScript,Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面.(这个功能正是AJAX的一大特点之一:))来自MSDN的解释:XmlHttp提供客户端同http服务器通讯的协议.客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft?XMLDocumentObjectModel(DOM)处理回应.这里说些题外话,其实这个东西很早就出现了,只是以前浏览器的支持不够,只有IE中才支持,所以大多数的WEB程序员都没有怎么用他,但是现在情况发生了很大地改变,Mozilla和Safari把它采用为事实上的标准,主流的浏览器都开始支持XMLHTTPRequest对象了.但是这里需要重点说明的是XMLHTTPRequest目前还不是一个W3C的标准,所以在不同的浏览器上表现也稍有些区别.2.使用XMLHTTPRequest使用步骤1–请!---如何发送一个http请求请为了用javascript向服务器发送一个http请求,需要一个具备这种功能的类实例.这样的类首先由internetexplorer以activex对象引入,被称为xmlhttp.后来mozilla,safari和其他浏览器纷纷仿效,提供了xmlhttprequest类,它支持微软的activex对象所提供的方法和属性.因此,为了创建一个跨浏览器的这样的类实例(对象),可以应用如下代码:2082591.doc(2/13)上海腾一研发部内部技术文档Js代码1.2.3.4.5.}if(window.xmlhttprequest){//mozilla,safari,...http_request=newxmlhttprequest();}elseif(window.activexobject){//iehttp_request=newactivexobject(microsoft.xmlhttp);(上例对代码做了一定简化,这是为了解释如何创建xmlhttp类实例.实际的代码实例可参阅本篇步骤3.)如果服务器的响应没有xmlmime-typeheader,某些mozilla浏览器可能无法正常工作.为了解决这个问题,如果服务器响应的header不是text/xml,可以调用其它方法修改该header.Js代码1.2.http_request=newxmlhttprequest();http_request.overridemimetype('text/xml');接下来要决定当收到服务器的响应后,需要做什么.这需要告诉http请求对象用哪一个javascript函数处理这个响应.可以将对象的onreadystatechange属性设置为要使用的javascript的函数名,如下所示:Js代码1.http_request.onreadystatechange=nameofthefunction;注意:在函数名后没有括号,也无需传递参数.另外还有一种方法,可以在扉页(fly)中定义函数及其对响应要采取的行为,如下所示:Js代码1.2.3.};http_request.onreadystatechange=function(){//dothething在定义了如何处理响应后,就要发送请求了.可以调用http请求类的open()和send()方法,如下所示:Js代码1.2.http_request.open('get',');http_request.send(null);2082591.doc(3/13)上海腾一研发部内部技术文档open()的第一个参数是http请求方式–get,post,head或任何服务器所支持的您想调用的方式.按照http规范,该参数要大写;否则,某些浏览器(如firefox)可能无法处理请求.有关http请求方法的详细信息可参考第二个参数是请求页面的url.由于自身安全特性的限制,该页面不能为第三方域名的页面.同时一定要保证在所有的页面中都使用准确的域名,否则调用open()会得到permissiondenied的错误提示.一个常见的错误是访问站点时使用domain.tld,而当请求页面时,却使用函数将继续执行,而不等待服务器响应.这就是ajax中的a.如果第一个参数是post,send()方法的参数可以是任何想送给服务器的数据.这时数据要以字符串的形式送给服务器,如下所示:name=value&anothername=othervalue&so=on收到!步骤2–收到---处理服务器的响应收到当发送请求时,要提供指定处理响应的jvascript函数名.Js代码1.http_request.onreadystatechange=nameofthefunction;我们来看看这个函数的功能是什么.首先函数会检查请求的状态.如果状态值是4,就意味着一个完整的服务器响应已经收到了,您将可以处理该响应.Js代码1.2.3.4.5.}if(http_request.readystate==4){//everythingisgood,theresponseisreceived}else{//stillnotreadyreadystate的取值如下:0(未初始化)1(正在装载)2(装载完毕)3(交互中)4(完成)2082591.doc(4/13)上海腾一研发部内部技术文档接着,函数会检查http服务器响应的状态值.完整的状态取值可参见w3csite.我们着重看值为200ok的响应.Js代码1.2.3.4.5.6.7.}if(http_request.status==200){//perfect!}else{//therewasaproblemwiththerequest,//forexampletheresponsemaybea404(notfound)//or500(internalservererror)responsecodes在检查完请求的状态值和响应的http状态值后,您就可以处理从服务器得到的数据了.有两种方式可以得到这些数据:http_request.responsetext–以文本字符串的方式返回服务器的响应http_request.responsexml–以xmldocument对象方式返回响应.处理xmldocument对象可以用javascriptdom函数3–万事俱备-简单实例万事俱备!万事俱备我们现在将整个过程完整地做一次,发送一个简单的http请求.我们用javascript请求一个html文件,test.html,文件的文本内容为i'matest..然后我们alert()test.html文件的内容.Html代码1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.}}elseif(window.activexobject){//ietry{http_request=newactivexobject(mxml2.xmlhttp);}catch(e){try{if(window.xmlhttprequest){//mozilla,safari,...http_request=newxmlhttprequest();if(http_request.overridemimetype){http_request.overridemimetype('text/xml');http_request=false;scripttype=text/javascriptlanguage=javascriptvarhttp_request=false;functionmakerequest(url){2082591.doc(5/13)上海腾一研发部内部技术文档17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48./span}/scriptspanstyle=cursor:pointer;text-decoration:underlinemakearequest}}if(http_request.readystate==4){if(http_request.status==200){alert(http_request.responsetext);}else{alert('therewasaproblemwiththerequest.');functionalertcontents(){}}http_request.onreadystatechange=alertcontents;http_request.open('get',url,true);http_request.send(null);if(!http_request){alert('givingup:(cannotcreateanxmlhttpinstance');returnfalse;}}http_request=newactivexobject(microsoft.xmlhttp);}catch(e){}本例中:用户点击浏览器上的请求链接;接着函数makerequest()将被调用.其参数–html文件test.html在同一目录下;这样就发起了一个请求.onreadystatechange的执行结果会被传送给alertcontents();alertcontents()将检查服务器的响应是否成功地收到,如果是,就会alert()test.html文件的内容.步骤4–x-文档---处理xml响应文档文档在前面的例子中,当服务器对http请求的响应被收到后,我们会调用请求对象的2082591.doc(6/13)上海腾一研发部内部技术文档reponsetext属性.该属性包含了test.html文件的内容.现在我们来试试responsexml属性.首先,我们新建一个有效的xml文件,后面我们将使用这个文件.该文件(test.xml)源代码如下所示:Xml代码1.2.3.4.?xmlversion=1.0?rooti'matest./root在该脚本中,我们只需修改请求部分,接着在alertcontents()中,我们将alert()的代码Js代码1.alert(http_request.responsetext);换成:Js代码1.2.3.varxmldoc=http_request.responsexml;varroot_node=xmldoc.getelementsbytagname('root').item(0);alert(root_node.