前端工程师前端工程师必知必会共15页.docx
- 文档编号:9150754
- 上传时间:2023-02-03
- 格式:DOCX
- 页数:9
- 大小:23.03KB
前端工程师前端工程师必知必会共15页.docx
《前端工程师前端工程师必知必会共15页.docx》由会员分享,可在线阅读,更多相关《前端工程师前端工程师必知必会共15页.docx(9页珍藏版)》请在冰豆网上搜索。
前端工程师前端工程师必知必会共15页
上海腾一研发部内部技术文档前端工程师对这些东西要"想都不用想就知道么前端工程师对这些东西要想都不用想"就知道么想都不用想*XMLHttpRequest这是什么,怎样完整地执行一次GET请求,怎样检测错误.
XMLHttpRequest对象还没有标准化,但是W3C已经开始了标准化的工作,本手册介绍的内容都是基于标准化的工作草案.http:
//w3.org/TR/XMLHttpRequest/http:
//blueidea/tech/web/2008/5329.asphttp:
//hfcn/Html/?
7593_1.html
1,XMLHTTPRequest对象什么是?
对象什么是?
最通用的定义为:
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:
//example.org/some.file',true);http_request.send(null);
2082591.doc(3/13)
上海腾一研发部内部技术文档
open()的第一个参数是http请求方式–get,post,head或任何服务器所支持的您想调用的方式.按照http规范,该参数要大写;否则,某些浏览器(如firefox)可能无法处理请求.有关http请求方法的详细信息可参考http:
//w3.org/protocols/rfc2616/rfc2616-sec9.htmlw3cspecs第二个参数是请求页面的url.由于自身安全特性的限制,该页面不能为第三方域名的页面.同时一定要保证在所有的页面中都使用准确的域名,否则调用open()会得到"permissiondenied"的错误提示.一个常见的错误是访问站点时使用domain.tld,而当请求页面时,却使用domain.tld.第三个参数设置请求是否为异步模式.如果是true,javascript函数将继续执行,而不等待服务器响应.这就是"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{//stillnotready
readystate的取值如下:
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;
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.} pointer;text-decoration: underline">makearequest}}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"? > 在该脚本中,我们只需修改请求部分,接着在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.firstchild.data); 这里,我们使用了responsexml提供的xmldocument对象并用dom方法获取存于xml文件中的内容. 3.属性与方法举例: 属性与方法举例: 属性与方法举例 Html代码1.2.3.4.5.6.7.8.9.10.11.12.13.}elseif(window.XMLHTTPRequest){xmlhttp=newXMLHTTPRequest(); -varxmlhttp;//创建一个XMLHTTPRequest对象functioncreateXMLHTTPRequext(){if(window.ActiveXObject){xmlhttp=newActiveXObject('Microsoft.XMLHTTP'); 2082591.doc(7/13) 上海腾一研发部内部技术文档 14.15.16.17.18.19.20.21.22.//方法: open//创建一个新的http请求,并指定此请求的方法,URL以及验证信息//语法: oXMLHttpRequest.open(bstrMethod,bstrUrl,varAsync,bstrUser,bstrPassword);23.24.25.26.27.28.29.//参数//bstrMethod//http方法,例如: POST,GET,PUT及PROPFIND.大小写不敏感.//bstrUrl//请求的URL地址,可以为绝对地址也可以为相对地址.//varAsync[可选]//布尔型,指定此请求是否为异步方式,默认为true.如果为真,当状态改变时会调用onreadystatechange属性指定的回调函数.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.函数,45.46.47.48.49.50.51.52.//方法: send//发送请求到http服务器并接收回应//语法: oXMLHttpRequest.send(varBody);//参数: varBody(欲通过此请求发送的数据.)//当数据接收完毕后(readystate==4)此页面上的一个按钮将被激活//备注: 此属性只写,为W3C文档对象模型的扩展.xmlhttp.onreadystatechange=HandleStateChange;//属性: onreadystatechange//onreadystatechange: 指定当readyState属性改变时的事件处理句柄//语法: oXMLHttpRequest.onreadystatechange=funcMyHandler;//如下的例子演示当XMLHTTPRequest对象的readyState属性改变时调用HandleStateChange//备注: 调用此方法后,可以调用send方法向服务器发送数据.xmlhttp.Open("get","http: //localhost/example.htm",false);//varbook=xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");//alert(book.xml);//bstrUser[可选]//如果服务器需要验证,此处指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口.//bstrPassword[可选]//验证信息中的密码部分,如果用户名为空,则此值将被忽略.}functionPostOrder(xmldoc){createXMLHTTPRequext();} 2082591.doc(8/13) 上海腾一研发部内部技术文档 53.//备注: 此方法的同步或异步方式取决于open方法中的bAsync参数,如果bAsync==False,此方法将会等待请求完成或者超时时才会返回,如果bAsync==True,此方法将立即返回.54.//Thismethodtakesoneoptionalparameter,whichistherequestBodytouse.TheacceptableVARIANTinputtypesareBSTR,SAFEARRAYofUI1(unsignedbytes),IDispatchtoanXMLDocumentObjectModel(DOM)object,andIStream*.Youcanuseonlychunkedencoding(forsending)whensendingIStream*inputtypes.ThecomponentautomaticallysetstheContent-LengthheaderforallbutIStream*inputtypes.55.//如果发送的数据为BSTR,则回应被编码为utf-8,必须在适当位置设置一个包含charset的文档类型头.56.//IftheinputtypeisaSAFEARRAYofUI1,theresponseissentasiswithoutadditionalencoding.ThecallermustsetaContent-Typeheaderwiththeappropriatecontenttype.57.//如果发送的数据为XMLDOMobject,则回应将被编码为在xml文档中声明的编码,如果在xml文档中没有声明编码,则使用默认的UTF-8.58.//IftheinputtypeisanIStream*,theresponseissentasiswithoutadditionalencoding.ThecallermustsetaContent-Typeheaderwiththeappropriatecontenttype.59.60.61.62.63.64.65.66.67.68.69.话70.//xmlhttp.getResponseHeader("Content-Type");将返回字符串"text/xml".可以使用getAllResponseHeaders方法获取完整的http头信息.71.alert(xmlhttp.getResponseHeader("Content-Type"));//输出http头中的Content-Type列: 当前web服务器的版本及名称.72.73.74.75.76.77.78.79.80.document.frmTest.myButton.disabled=true;//方法: abort//取消当前请求//语法: oXMLHttpRequest.abort();//备注: 调用此方法后,当前请求返回UNINITIALIZED状态.//xmlhttp.abort();//方法: getAllResponseHeaders//获取响应的所有http头//语法: strValue=oXMLHttpRequest.getAllResponseHeaders();//备注: 每个http头名称和值用冒号分割,并以\r\n结束.当send方法完成后才可调用该方法.alert(xmlhttp.getAllResponseHeaders());//方法: getResponseHeader//从响应信息中获取指定的http头//语法: strValue=oXMLHttpRequest.getResponseHeader(bstrHeader);//备注: 当send方法成功后才可调用该方法.如果服务器返回的文档类型为"text/xml",则这句xmlhttp.Send(xmldoc); 2082591.doc(9/13) 上海腾一研发部内部技术文档 81.82.83.84.85.86.87.88.89.90.91.92.93.94.95.96.97.98.}functionHandleStateChange(){//属性: readyState//返回XMLHTTP请求的当前状态//语法: lValue=oXMLHttpRequest.readyState;//备注: 变量,此属性只读,状态用长度为4的整型表示.定义如下: //0(未初始化)对象已建立,但是尚未初始化(尚未调用open方法)//1(初始化)对象已建立,尚未调用send方法//2(发送数据)send方法已调用,但是当前的状态及http头未知//3(数据传送中)已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,99.据100.101.102.103.104.105.106.制数据.107.108.109.110.111.112.113.114.115.116.11
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 前端 工程师 必知必会共 15