一, 带参数的XMLHTTP请求 1, 进行get请求 get请求最常见的是在浏览器地址栏中输入URL并打开页面时,这就是向服务器发送一个get请求. 它的限制是URL最大长度不能超过2048字符(2KB) 例如: var oRequest = CreateXMLHttpRequest(); //利用上篇创建的方法获得一个XMLHTTP对象 var url = "http://www.cnblogs.com/article?id=1001&name="12345"; oRequest.open("get",url,false); // 同步发送一个带有参数的get请求 为了能够更好的设置参数, 我们来创建一个函数 function setURLParam(url,paramName,paramValue){ url += (url.indexOf("?")==-1? "?": "&"); url += encodeURIComponent(paramName)+ "=" +encodeURIComponent(paramValue); --URL必须要编码,否则可能出错. return url } 改写上面的例子通过get方式发送请求: var oRequest = CreateXMLHttpRequest(); var url = "http://www.cnblogs.com/article"; url = setURLParam(url,"id",1001); //设置第一个参数 url = setURLParam(url,"name","12345"); //设置第二个参数 oRequest.open("get",url,false); oRequest.send(null); 2, 进行post请求 post请求常用于表单提交, 因为post请求可以比get请求发送的数据更多(约2GB). 另外post请求附加的参数不会添加到url上,所以必须通过send()方法添加参数.如: oRequest.send("name1=value1&name2=value2"); 所以我们也通过函数来添加参数. function addPostParam(sParams,sParamName,sParamValue){ if(sParams.length>0) //判断是否设置过参数 sParams +="&"; return sParams +encodeURIComponent(sParamName) + "=" + encodeURIComponent(sParamValue); } 改写前面的例子通过post方式发送请求: var oRequest = CreateXMLHttpRequest(); var url = "http://www.cnblogs.com/article"; var sParams =""; sParams = addPostParam(sParams,"id",1001); //设置第一个参数 sParams = addPostParam(sParams,"name","12345"); //设置第二个参数 oRequest.open("post",url,false); //post请求 oRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //进行post请求必须要设置此项 oRequest.send(sParams); //请求的参数在这里设置 二, LiveConnect请求 在客户端没有安装MSXML进行XMLHTTP请求时,还有另外一种请求方式,它是LiveConnect请求,是Netscape Navigator创建的请求方式,它是一种可以让javascript调用java类来实现客户端和服务器交互的方式. 使用这种请求客户端必须安装Java运行时环境(Java Runtime Environment,JRE), 同时浏览器还要启用Java才可以.既然能把这种方式拿出来讲, 一定有它特殊意义. 因为现代的浏览器(除IE外)都支持LiveConnect. 它允许访问Java提供的所有HTTP相关的库. 1. 使用LiveConnect进行get请求 本质上是通过调用Java中的HTTP类库来实现的. function httpGet(sURL){ var sResponseText = ""; var oURL = new java.net.URL(sURL); //通过URL实例化一个Java对象 var oStream = oURL.openStream(); //打开一个输入流 var oReader = new java.io.BufferedReader(new java.io.InputStreamReader(oStream)); //创建缓冲阅读器 var sLine = oReader.readLine(); //逐行读取 while (sLine != null) { sResponseText += sLine + " "; sLine = oReader.readLine(); } oReader.close(); return sResponseText; //返回服务器响应文本 } 使用: <html> <head> <title>LiveConnect Example</title> function getServerInfo() { var sURL ="http://www.cnblogs.com/article/" sURL = addURLParam(sURL,"id",1001); sURL = addURLParam(sURL,"name","12345"); var sResponseText = httpGet(sURL); alert("Response text is: " + sResponseText); } </script> </head> <body> <input type="button" onclick="getServerInfo()" value="点击获取服务器信息" /> </body> </html> 2. 使用LiveConnect进行post请求 function httpPost(sURL, sParams) { var oURL = new java.net.URL(sURL); //实例化Java请求对象 var oConnection = oURL.openConnection(); //创建连接对象 oConnection.setDoInput(true); //设置连接对象可以接收输入和输出 oConnection.setDoOutput(true); oConnection.setUseCaches(false); //连接不使用缓存数据 oConnection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded"); //添加http首部, 因为post必须此设置. var oOutput = new java.io.DataOutputStream(oConnection.getOutputStream()); //从连接对象中获取请求的输入流 oOutput.writeBytes(sParams); // 把参数写入到输入流中 oOutput.flush(); //立刻发送请求 oOutput.close(); //关闭输入流 var sLine = "", sResponseText = ""; var oInput = new java.io.DataInputStream(oConnection.getInputStream()); //从连接对象中获取输出流 sLine = oInput.readLine(); //逐行读取输出流 while (sLine != null){ sResponseText += sLine + " "; sLine = oInput.readLine(); } oInput.close(); //关闭输出流 return sResponseText; //返回文本 } 使用: <html> <head> <title>LiveConnect Example</title> <script type="text/javascript"> function getServerInfo() { var sURL ="http://www.cnblogs.com/article/"; //请求的URL var sParams = ""; sParams = addPostParam(sParams, "id", 1001); //添加第一个参数 sParams = addPostParam(sParams, "name", "12345"); //添加第二个参数 var sResponseText = httpPost(sURL , sParams); //通过LiveConnect进行post请求 alert("Response text is: " + sResponseText); } </script> </head> <body> <input type="button" onclick="getServerInfo()" value="Get Server info" /> </body> </html> 三, 构建一个智能的HTTP请求函数库. 如果客户端不能进行XMLHTTP请求则进行LiveConnect请求,这就是所谓的智能HTTP请求. 我们封装在一个http.js里, 便于使用. // 判断客户端是否支持XMLHTTP请求 var bXmlHttpSupport = (typeof XMLHttpRequest == "object" || window.ActiveXObject); //LiveConnect对象进行post请求 function httpPost(sURL, sParams) { var oURL = new java.net.URL(sURL); var oConnection = oURL.openConnection(); oConnection.setDoInput(true); oConnection.setDoOutput(true); oConnection.setUseCaches(false); oConnection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded"); var oOutput = new java.io.DataOutputStream(oConnection.getOutputStream()); oOutput.writeBytes(sParams); oOutput.flush(); oOutput.close(); var sLine = "", sResponseText = ""; var oInput = new java.io.DataInputStream(oConnection.getInputStream()); sLine = oInput.readLine(); while (sLine != null){ sResponseText += sLine + " "; sLine = oInput.readLine(); } oInput.close(); return sResponseText; } //添加Post请求需要发送的参数 function addPostParam(sParams, sParamName, sParamValue) { if (sParams.length > 0) { sParams += "&"; } return sParams + encodeURIComponent(sParamName) + "=" + encodeURIComponent(sParamValue); } //添加get请求需要发送的参数 function addURLParam(sURL, sParamName, sParamValue) { sURL += (sURL.indexOf("?") == -1 ? "?" : "&"); sURL += encodeURIComponent(sParamName) + "=" + encodeURIComponent(sParamValue); return sURL; } //LiveConnect对象get请求 function httpGet(sURL) { var sResponseText = ""; var oURL = new java.net.URL(sURL); var oStream = oURL.openStream(); var oReader = new java.io.BufferedReader(new java.io.InputStreamReader(oStream)); var sLine = oReader.readLine(); while (sLine != null) { sResponseText += sLine + " "; sLine = oReader.readLine(); } oReader.close(); return sResponseText; } // 创建统一的的XMLHTTP请求对象 if (typeof XMLHttpRequest == "undefined" && window.ActiveXObject) { 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."); } } //进行智能请求 var Http = new Object; Http.get = function (sURL, fnCallback) { if (bXmlHttpSupport) { var oRequest = new XMLHttpRequest(); oRequest.open("get", sURL, true); oRequest.onreadystatechange = function () { if (oRequest.readyState == 4) { fnCallback(oRequest.responseText); } } oRequest.send(null); } else if (navigator.javaEnabled() && typeof java != "undefined" && typeof java.net != "undefined") { setTimeout(function () { fnCallback(httpGet(sURL)); }, 10); } else { alert("Your browser doesn't support HTTP requests."); } }; Http.post = function (sURL, sParams, fnCallback) { if (bXmlHttpSupport) { var oRequest = new XMLHttpRequest(); oRequest.open("post", sURL, true); oRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); oRequest.onreadystatechange = function () { if (oRequest.readyState == 4) { fnCallback(oRequest.responseText); } } oRequest.send(sParams); } else if (navigator.javaEnabled() && typeof java != "undefined" && typeof java.net != "undefined") { setTimeout(function () { fnCallback(httpPost(sURL, sParams)); }, 10); } else { alert("Your browser doesn't support HTTP requests."); } };