前端工程师前端工程师必知必会共15页Word文档下载推荐.docx
《前端工程师前端工程师必知必会共15页Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《前端工程师前端工程师必知必会共15页Word文档下载推荐.docx（9页珍藏版）》请在冰豆网上搜索。
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函数名.
我们来看看这个函数的功能是什么.首先函数会检查请求的状态.如果状态值是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（'
http_request=false;
<
scripttype="
text/javascript"
language="
javascript"
>
varhttp_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>
}<
/script>
spanstyle="
cursor:
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（'
url,true）;
if（!
http_request）{alert（'
givingup:
（cannotcreateanxmlhttpinstance'
returnfalse;
}}http_request=newactivexobject（"
}catch（e）{}
本例中:
用户点击浏览器上的"
请求"
链接;
接着函数makerequest（）将被调用.其参数–html文件test.html在同一目录下;
这样就发起了一个请求.onreadystatechange的执行结果会被传送给alertcontents（）;
alertcontents（）将检查服务器的响应是否成功地收到,如果是,就会"
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"
?
root>
i'
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.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（）;
html>
head>
title>
XMLHTTPRequest对象的说明DEMO<
/title>
scriptlanguage="
type="
!
-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"
"
//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（"
））;
//输出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方法成功后才可调用该方法.如果服务器返回的文档类型为"
则这句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
升级会员 