个回答

• njyjm2006

  2015-12-25 23:34:43

  从外界获取的代理很容易失效，为解决跨域问题，可以自行创建一个代理，此处使用php创建一个代理，保存在php_proxy_simple.php中，在客户端调用web服务时，向代理服务器提交一个URL地址，代理服务器使用CURL方法向实际的web服务发送请求，并将返回的XML数据发送给客户端。客户端对收到的XML数据再行解析。
  

  
  

  index.html文件中的script代码如下所示：主要修改了代理服务器地址，以及$.get方法中的参数，index.html和php_proxy_simple.php文件都在train文件夹中，train文件夹在apache服务器的webapps

  \projects文件夹中。可根据实际部署的位置自行调整urlProxy中的URL地址。
  

  <script>
      var urlProxy = "http://localhost:8080/projects/train/php_proxy_simple.php?ws_path="; //跨域中转   
      var url1 = "http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeByStationName?UserID=";
      var url2 = "http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getStationAndTimeDataSetByLikeTrainCode?UserID=";
      var url3 = "http://www.webxml.com.cn/WebServices/TrainTimeWebService.asmx/getDetailInfoByTrainCode?UserID=";
      var isbind = 0;
  
      //获取车次列表
      var getTrainList = function () {
  
          //数据校验
          if ($("#search-no").val() || ($("#search-begin").val() && $("#search-end").val())) {
  
              var searchButton = $(this);
              searchButton.button("option", "disabled", true);
  
              $.mobile.loading("show");
  
              //var _data = {};
              var _url = url1;
              if (!$("#search-no").val()) {
                  //_data.StartStation = $("#search-begin").val();
                  //_data.ArriveStation = $("#search-end").val();
                  _url +="&StartStation=" + $("#search-begin").val()+"&ArriveStation=" + $("#search-end").val();              
  
              } else {
                  //_data.TrainCode = $("#search-no").val();
                  _url = url2;
                  _url += "&TrainCode=" + $("#search-no").val();
              }
  
              $.get(urlProxy + encodeURIComponent(_url),
                      function (data) {
                          $("#list").html("");
                          var list = $("#list");
                          var timeTables = $(data).find("TimeTable");
  
                          var _arr = [];
                          timeTables.each(function (index, obj) {
                              var i = index;
                              if (i > 10) return false; //只载入前10条
  
                              var that = $(this);
                              if (that.find("FirstStation").text() == "数据没有被发现") {
                                  alert("数据没有被发现！");
                                  return false;
                              }
  
                              _arr.push('<li><a href="#" data-no="' + that.find("TrainCode").text() + '">' +
                                      '<h2>' + that.find("TrainCode").text() + '次</h2>' +
                                      '<p>' + that.find("FirstStation").text() + ' - ' + that.find("LastStation").text() + '</p>' +
                                      '<p>用时：' + that.find("UseDate").text() + '</p>' +
                                      '<p class="ui-li-aside">' + that.find("StartTime").text() + ' 开</p>' +
                                      '</a></li>');
  
                          });
  
                          if (_arr.length > 0) {
                              list.html(_arr.join(""));
                              list.listview("refresh");
                          }
  
                          $.mobile.loading("hide");
  
                          searchButton.button("option", "disabled", false);
                      });
          } else {
              alert("请输入发车站和终点站或输入车次！");
          }
      };
      var isAjax=false
  
      //获取详情
      var getInfoByTrainCode = function () {
  
          $.mobile.loading("show");
  
          var trainCode = $(this).attr("data-no");
          var _url=url3;
          if(isAjax) return;
          isAjax=true
          _url += "&TrainCode=" + trainCode;
  
          $.get(urlProxy + encodeURIComponent(_url),
                  function (data) {
                      isAjax=false
                      $("#detail").find(".ui-content h2").html(trainCode + "次");
                      var tbody = $("#detail").find(".ui-content tbody");
                      tbody.html("");
  
                      $(data).find("TrainDetailInfo").each(function (index, obj) {
                          var tr = $("<tr></tr>");
                          var that = $(this);
                          tr.html('<td>' + that.find("TrainStation").text() + '</td>' +
                                  '<td>' + that.find("ArriveTime").text() + '</td>' +
                                  '<td>' + that.find("StartTime").text() + '</td>');
                          tbody.append(tr);
                      });
  
                      $.mobile.loading("hide");
  
                      $.mobile.changePage("#detail");
                  });
  
      };
  
      //绑定事件
      var bindEvent = function () {
          $("#search-submit").on("click", getTrainList);
          $("#list").on("click", "a", getInfoByTrainCode);
      };
  
      $(document).on("pageshow", "#index", function () {
          if (isbind) return
          isbind = 1;
          bindEvent();
      });
  
  </script>

  php_proxy_simple.php文件中的内容如下所示：

  <?php
  // PHP Proxy example for Web services. 
  // Responds to both HTTP GET and POST requests
  
  
  // Get the REST call path from the AJAX application
  // Is it a POST or a GET?
  $url = ($_POST['ws_path']) ? $_POST['ws_path'] : $_GET['ws_path'];
  
  // Open the Curl session
  
  $session = curl_init();
  
  curl_setopt($session, CURLOPT_URL, $url);
  
  //echo $session;
  // If it's a POST, put the POST data in the body
  if ($_POST['yws_path']) {
  	$postvars = '';
  	while ($element = current($_POST)) {
  		$postvars .= urlencode(key($_POST)).'='.urlencode($element).'&';
  		next($_POST);
  	}
  	curl_setopt ($session, CURLOPT_POST, true);
  	curl_setopt ($session, CURLOPT_POSTFIELDS, $postvars);
  }
  
  // Don't return HTTP headers. Do return the contents of the call
  curl_setopt($session, CURLOPT_HEADER, false);
  curl_setopt($session, CURLOPT_RETURNTRANSFER, true);
  
  // Make the call
  $xml = curl_exec($session);
  
  echo $xml;
  curl_close($session);
  
  
  ?>

  
  

  1