javascript与服务器3

一,  带参数的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 + "\n";
         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 + "\n";
         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 + "\n";
        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 + "\n";
        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.");
    }          
};

 

posted on 2013-10-23 20:08  邵邵  阅读(301)  评论(0编辑  收藏  举报

淘宝美工兼职招聘