javascript与服务器2
一, 通过IE建立XMLHTTP请求 这种请求方式源自与微软创建了XMLHTTP请求对象,只要用户的机器上安装了MSXML就可以发送XMLHTTP请求来创建客户端和服务器端的通信, XMLHTTP请求本质上是添加了额外的用于发送和接收XML代码的功能的普通http请求. 要在IE中创建XMLHTTP请求对象,需要使用ActiveXObject对象. 1. 建立请求对象 var oRequest = new ActiveXObject("Microsoft.XMLHTTP"); 发展至今,XMLHTTP请求有了多个版本, 为了使用最新版本的XMLHTTP请求对象, 我们建立如下代码: function createXMLHTTP(){ var arr =["MSXML2.XMLHTTP5.0", "MSXML2.XMLHTTP4.0", "MSXML2.XMLHTTP3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ] for(var i=0; i<arr.length; i++){ try{ var oRequest = new ActiveXObject(arr); //为确保用户使用的是最新版本的XMLHTTP请求对象而特殊处理 return oRequest; } catch(oError){ //处理错误 } } throw new Error("MSXML is not installed on your system."); // 如果系统没有安装MSXML,则抛出异常 } var oRequest =createXMLHTTP(); //初始化一个XMLHTTP对象,用于同步或异步向服务器发送消息,并接收返回结果 2. 通过open方法,建立与服务器的通信地址URL,并指定是同步或异步方式建立 oRequest.open("get","example.txt",false) //参数说明, 1.请求类型 2.URL 3.是否异步发送请求,false =同步, true=异步 3. 建立请求后,发送请求,通过触发onreadystatechange事件获取返回结果 oRequest.send(null); send方法必须接收一个参数,表示发送时附加的请求参数, 如果是get请求 设置为null,因为参数可以直接附加到URL后面,而如果是post请求则需要使用如:name1=value1&name2=value2形式显示的设置参数. 发送请求后,如果是同步发送的话,javascript解释程序则会等待请求返回,返回响应后,status特性则会放入请求的HTTP状态(200 是正常,404表示没有找到页面).同时,statusText特性中放入描述状态的信息, 可以通过responseText接收服务器返回的文本.如果返回的是xml,还要在reponseXML特性中放入一个由返回的文本 构造的XML DOM对象. 例如: var oRequest =createXMLHTTP(); oRequest.open("get","example.txt",false) //同步请求 oRequest.send(null); //发送get请求 alert("Status is "+ oRequest.status +"( "+ oRequest.statusTest +")"); //显示状态号,状态信息 alert("Response text is :"+ oRequest.responseText); //获取服务器返回的文本 如果请求的是一个xml,则要通过responseXML来读取. oRequest.responseXML.documentElement.tagname; //获取从服务器返回的xml文档元素的标签名 以上例子必须在服务器上运行才能返回正确的结果,因为xml http对象通过服务器报告mime类型来判读返回的内容是否为xml文档. 前面通过同步发送请求获取服务器端响应来获取数据,如果是异步发送的话,还必须使用onreadystatechange事件,通过处理readyState特性是否等于4来判断 服务器是否请求完毕. 因为reponse特性在请求完毕前是不可用的.所以我们改写上面的例子,以异步发送请求: var oRequest =createXMLHTTP(); oRequest.open("get","example.txt",true) //异步请求 oRequest.onreadystatechange = function(){ if(oRequest.readyState ==4) { alert("Status is "+ oRequest.status +"( "+ oRequest.statusTest +")"); //显示状态号,状态信息 alert("Response text is :"+ oRequest.responseText); //获取服务器返回的文本 } } oRequest.send(null); //发送get请求 以上顺序不可颠倒, 当异步发送一个请求以后, 就会触发onreadystatechange事件, 通过readystate状态来判断请求是否结束并返回了数据. 当然我们也可以通过调用abort()方法来取消请求,如: var oRequest =createXMLHTTP(); oRequest.open("get","example.txt",true) //异步请求 oRequest.onreadystatechange = function(){ if(oRequest.readyState ==3){ oRequest.abort(); //因为请求还没完成就终止了, 所以下面就不会弹出提示框. } else if(oRequest.readyState ==4) { alert("Status is "+ oRequest.status +"( "+ oRequest.statusTest +")"); //显示状态号,状态信息 alert("Response text is :"+ oRequest.responseText); //获取服务器返回的文本 } } oRequest.send(null); 4. 可利用的http首部 每个HTTP请求发送时都包含一个HTTP首部,这个首部对用户来说是隐藏,但对于开发人员来说却是一个很有利用价值的东西. 我们可以通过设置HTTP首部来发送一些信息,在服务器处理后,又可以把这个首部发送回来,从而达到client和server之间的交互. 前面我们建立了XMLHTTP请求对象, 其实该对象还有一些方法用于设置或获取HTTP首部信息. getAllResponseHeaders() 用于返回所用响应的HTTP首部信息字符串, 它看起来如下: Date: Sun,14 Nov 2009 20:10:00 GMT Server: Apache/1.3 (Unix) Vary:Accept X-Powered-By:PHP/4.3.8 Connection:close Content-Type: text/html;charset=iso-8859-1; 从该首部信息中,我们就可以看出,使用的是什么服务器,是否支持php等.如果来获取特定的信息,如下: var sDate = oRequest.getResponseHeader("Date"); //获取日期信息 向Http首部设置自己的信息 oRequest.setRequestHeader("name","XX"); oRequest.setRequestHeader("age",18); 二. 通过Mozilla建立XMLHTTP请求 由于IE的XMLHTTP请求对象获得了大多数web开发人员的青睐,所以其他浏览器的开发人员加以效仿, 而Mozilla是第一个完成这个任务的,它创建了XMLHttpRequest请求对象. 与IE有略微的区别,行为完全与微软的版本相同, 后来Safari和Opera复制了Mozilla的实现,也创建了自己的XMLHttpRequest对象来建立XMLHTTP请求. Mozilla中建立XMLHTTP请求的方式如下: var oRequest = new XMLHttpRequest(); 三. 创建统一的XMLHTTP请求对象 为了建立起一个统一的XMLHttpRequest对象我们封装成一个函数. 这样方便调用. function createXMLHttpRequest(){ if (typeof XMLHttpRequest == "undefined" && window.ActiveXObject) { //如果是微软的话,则需要复杂处理,其他浏览器直接创建XMLHttpRequest对象来创建XMLHTTP请求. function XMLHttpRequest() { var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i=0; i < arrSignatures.length; i++) { try { var oRequest = new ActiveXObject(arrSignatures); return oRequest; } catch (oError) { //ignore } } throw new Error("MSXML is not installed on your system."); } } else return new XMLHttpRequest(); } } var xmlHttp=createXMLHttpRequest(); //这样就创建了一个统一的XMLHTTP请求对象 创建XMLHTTP请求对象以后就可以使用前面讨论过的方法来发送请求,接收响应. 请方式基本一致.