关键词 ：Ajax 跨域访问 php 同源策略 JQueryMobile

前言

在面试的过程中，兄弟连的徐老师提出要求我用JQuery Mobile（前端框架）来实现一个具有“火车时刻表”功能的WebAPP。

在做的过程中，我遇到了

  1. Ajax——更底层地说是JavaScript——的跨域问题；
  2. JQuery Mobile前端框架使用的问题。

开发环境/工具

名称 下载地址
JQuery Mobile 类库  
AJAXCDR 类库  http://blog.zyan.cc/demo/ajaxcdr/ajaxcdr-1.0.zip
Apache2.2  
PHP5.4  
Dreamweaver CS6  
火车时刻api——“聚合数据” http://www.juhe.cn/docs/api/id/79

关键技术及原理分析

由于是该项目的目标是webApp，所以加载火车时刻数据的操作就必须交给前台来实现——JavaScript。在实际操作中我发现，当我使用JQuery从API加载数据时，脚本意外中止，使用Chrome浏览器的调试功能，在控制台那一栏发现报错。如下图。

错误信息：

GET http://localhost/favicon.ico 404 (Not Found)
XMLHttpRequest cannot load http://op.juhe.cn/onebox/train/query_ab.php?key=c18fca22564a4af761bdd7ed52707fb2&from=123&to=321. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

错误原因：JavaScript不能跨域访问。

关于“跨域访问”在这篇博文里讲的非常清楚了。

技术可行性分析——Ajax跨域访问的解决方案

方案一    JSONP

JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

但缺点是不能实现POST请求。

由于数据源是第三方api，我无法更改第三方的后台程序接口。所以，该方案不可行。

方案二    iframe

具体实现可以参考这个博文：《利用iframe实现ajax 跨域通信的解决方案》。

但是相比较JSONP的方法，这个方法比较麻烦，而且还是要修改服务端。

方案三    CORS

关于CORS的方法实现，也是需要修改服务端（晕，基本都要修改服务端）。但是相比较于JSONP，CORS能实现GET和POST请求；相比于iframe，CORS的前端更简单。具体CORS方法的实现，可以参考这篇博文：《CORS——AJAX POST&跨域 解决方案》

方案四    访问同源代理（本项目）

开门见山，该方案的操作方法是在本地写一个代理。

既然“同源策略”规定了Ajax不能访问同以外的域，那么就在本域内写一个代理（proxy）来实现数据的“路由”。前端不做过多修改，就像访问原生API一样。

本文将着重介绍同源代理的实现方案。

方案五    axajcdr跨域访问

AJAXCDR是由张宴实现的一种ajax + flash跨域访问方案。详见这篇博文：AJAXCDR：利用 Flash 完美解决 JavaScript 和 AJAX 跨域 HTTP POST/GET 表单请求

但是在本项目里面不适用，因为该方案需要在服务端根目录下有一个crossdomain.xml文件。还是那个原因，我不能修改服务端。

详细设计

一，代理（proxy）设计

好的代理应该具有非常强的透明性——代理对于上一层的程序员应该是“不存在”的。换句话说，对于前端程序员从代理收发数据和直接访问API是一样的。即使有区别，那也应该是非常微小的区别。这样在将来项目运行环境有变化时，程序员不必用太多时间修改。

proxy.php 代码如下：

<?php

/*

 *file name : proxy.php

 *$_SERVER['REQUEST_URI'] =

 *    'RailwayTimetable_beta/proxy.php?request=http://op.juhe.cn/onebox/train/query_ab.php?key=c18fca22564a4af761bdd7ed52707fb2&from=%E6%8A%9A%E9%A1%BA&to=%E6%B2%88%E9%98%B3';

 */

$requestArr = explode('request=', $_SERVER['REQUEST_URI']);

echo file_get_contents($requestArr[1]);

二，前端设计

前端主要使用了JQuery Mobile类库，访问远程API使用了Ajax。

关于“Ajax拒绝跨域问题”解决方法是修改URL，在“聚合数据API”URL前加上代理的地址，并且把API的url视为参数进行传输。可以参考的例子详见百度搜索引擎的跳转，如下URL：

https://www.baidu.com/link?url=lNW1dzH0BR-EwjQ74kSRXu7j1e-KPPFiwKeF7RYCt1XfloqBnAtE_HUjVCkgTdKsPFyELWHhXz2HRI3iK2KZoa&wd=&eqid=c9519bdb0000520a0000000355a314f9&qid=c9519bdb0000520a&bdlkc=1

本项目前台URL访问的实现如下URL：

/RailwayTimetable_beta/proxy.php?request=http://op.juhe.cn/onebox/train/query_ab.php?key=c18fca22564a4af761bdd7ed52707fb2&from=%E6%8A%9A%E9%A1%BA&to=%E6%B2%88%E9%98%B3

index.html文件的代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>列车时刻表查询</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/jquery.mobile-1.4.3.css"/>

</head>

<body>

<div data-role="page" id="index">

    <div data-role="header" data-position="fixed">

        <h1>列车时刻表查询</h1>

    </div>

    <div role="main" class="ui-content">

        <div class="ui-field-contain">

            <label>发车站:</label>

            <input type="text" name="text-basic" id="search-begin" value="">

        </div>

        <div class="ui-field-contain">

            <label>终点站:</label>

            <input type="text" name="text-basic" id="search-end" value="">

        </div>

        <input type="button" value="搜索" id="search-submit">

        <div class="ui-grid-c" id="timeTable2">

        　 <div class="ui-block-a">车次</div>

        　 <div class="ui-block-b">发车时间</div>

        　 <div class="ui-block-c">到站时间</div>

        </div>

    </div>

    <div data-role="footer">

        <div data-role="navbar">

            <ul>

                <li><a href="#" data-icon="grid" class="ui-btn-active">查询</a></li>

                <li><a href="#" data-icon="star">收藏</a></li>

                <li><a href="#" data-icon="gear">设置</a></li>

            </ul>

        </div>

    </div>

</div>

<script src="js/jquery-1.11.1.js"></script>

<script src="js/jquery.mobile-1.4.3.js"></script>

<script>

//初始化

var isBind = 0;

var AppKey = "c18fca22564a4af761bdd7ed52707fb2";

var resource = "./proxy.php";

var resourceS2S = "http://op.juhe.cn/onebox/train/query_ab.php";

var resourceTrainNumber = "http://op.juhe.cn/onebox/train/query";

//获取列车车次

function getQueryURL(){

    var url = null;

    if (!$("#search-no").val()) {

        //按照站对站方式查找

        url = resourceS2S

            + "?key="

            + AppKey

            + "&from="

            + encodeURIComponent($("#search-begin").val())

            + "&to="

            + encodeURIComponent($("#search-end").val());

    } else {

        //按照车次方式查找

        url = resourceTrainNumber

        + "?key="

        + AppKey

        + "&train="

        + encodeURIComponent($("#search-no").val());

    }

    return resource + '?request=' + url;

}

//获取车次列表

function getTrainList(){

    //数据校验

    if ($("#search-no").val() || ($("#search-begin").val() && $("#search-end").val())) {

        //按钮失效效果

        var searchButton = $(this);

        searchButton.button("option", "disabled", true);

        //显示加载中

        $.mobile.loading('show');  

        //Ajax 通信

        var url = getQueryURL();

        //$("#list").html(url);

        $.getJSON(url, function(data){

            render(data);

            //alert(data);

        });

        //关闭加载中

        $.mobile.loading("hide");

        //按钮失效恢复

        searchButton.button("option", "disabled", false);

    }else{

        alert("请输入发车站和终点站或输入车次！");

    }

}

//解析JSON，并显示

function render(data){

    //$("#list").append("<li>" + data.result.list.train_no + "</li>");

    if(data.reason != "查询成功"){

        alert(data.reason);

        $("#timeTable2").html("");

    }

    $.each(data.result.list, function(i,item){

        addRow(item.train_no, item.start_time, item.end_time);

        //addRow(item.train_type);

    });

}

function addRow(rowA, rowB, rowC){

    var row =

        "<div class=\"ui-block-a\">"+ rowA +"</div>" +

        "<div class=\"ui-block-b\">"+ rowB +"</div>" +

        "<div class=\"ui-block-c\">"+ rowC +"</div>" ;

    $("#timeTable2").append(row);

}

//绑定事件

var bindEvent = function () {

    $("#search-submit").on("click", getTrainList);

};

$(document).on("pageshow", "#index", function () {

    if (isBind) return

    isBind = 1;

    bindEvent();

});

</script>

</body>

</html>

使用方法及运行效果

使用方法：输入“发车地”名称，输入“终点站”名称，比如：抚顺，沈阳。详见下图：

点击查询按钮，结果如下图：

就酱紫，完毕！

源码下载

http://yunpan.cn/ccdGPTJDR9mtE  访问密码 5c58

参考资料

http://www.cnblogs.com/yjmyzz/archive/2011/04/26/2029699.html

http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html

http://www.cnblogs.com/wangfupeng1988/p/4060747.html

火车时刻表WebApp的更多相关文章

  1. 常用Web Service汇总（天气预报、时刻表等）

      现成的Web Service中有很多很好用的,比如天气预报,IP地址搜索,火车时刻表等等.本文汇总的一些常用Web Service,希望对大家有所帮助. AD: ================= ...

  2. [转载]常用Web Service汇总（天气预报、时刻表等）

    下面总结了一些常用的Web Service,是平时乱逛时收集的,希望对大家有用. ============================================ 天气预报Web Servic ...

  3. 我的Android进阶之旅------>关于调用Webservice查询火车票时刻表的几个接口介绍

    今天发现一个可以提供火车票时刻表查询的WebService,先记录下来以后如果写一个火车票时刻表查询的Android App的话就用的着.首先该WebService的的名字是TrainTimeWebS ...

  4. java抓取12306火车余票信息

    最近在弄一个微信的公众帐号,涉及到火车票查询,之前用的网上找到的一个接口,但只能查到火车时刻表,12306又没有提供专门的查票的接口.今天突然想起自己直接去12306上查询,抓取查询返回的数据包,这样 ...

  5. 《C#开发常用免费WebServices集合》

    天气预报 Web服务,数据来源于中国气象局 公用事业 http://www.webxml.com.cn/WebServices/WeatherWebService.asmx 中国股票行情 分时走势预览 ...

  6. 最实用的IT类网站及工具大集合

    1.聚合数据 大家在开发过程中,可能会用到各种各样的数据,想找一些接口来提供一些数据.比如天气预报查询,火车时刻表查询,彩票查询,身份证查询等等.有了这个接口,直接调用即可.各种各样的API接口满足你 ...

  7. 干货！IT小伙伴们实用的网站及工具大集合！持续更新！

    1.Git 还在担心自己辛辛苦苦写的代码被误删了吗?还在担心自己改错了代码不能挽回吗?还在苦恼于多人开发合作找不到一个好的工具吗?那么用Git就对 了,Git是一个开源的分布式版本控制系统,用以有效. ...

  8. jQuery Mobile应用之火车票查询

    效果图: 在CMD中输入如下代码 corsproxy (前提是有node.js环境,并先安装corsproxy) html: <!DOCTYPE html> <html> &l ...

  9. 常用的WEB服务

     1.股票行情数据 Web Service(支持香港.深圳.上海基金.债券和股票:支持多股票同时查询) http://www.webxml.com.cn/WebServices/StockInfoWS ...

随机推荐

  1. 懒汉处理dapper字段名与属性名的映射方式

    你还以为走路是世上最简单的事情呢?只不过是把一只脚放到另一只脚前面.但我一直很惊讶这些原本是本能的事情实际上做起来有多困难.而吃,吃也是一样的,有些人吃起东西来可困难了.说话也是,还有爱.这些东西都可 ...

  2. 记录一则RMAN恢复到历史备份（多个incarnation）

    环境: OEL 5.7 + Oracle 11.2.0.4 1.直接restore到想要恢复的时间点报错: RMAN> sql "alter session set nls_date_ ...

  3. eclipse的调试模式以及断点运行

    先在代码序号处打个点. 点击debug调试模式 然后再点击 如果有打断点,则会在断点处结束,如果没有,会一直一步一步向下直至结束.

  4. 8.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

    注:这题胜在区分度高,知识点覆盖广,再不懂的人,也能答出几句, 而高手可以根据自己擅长的领域自由发挥,从URL规范.HTTP协议.DNS.CDN.数据库查询. 到浏览器流式解析.CSS规则构建.lay ...

  5. 简易C# socket

    服务器 using System; using System.Net; using System.Net.Sockets; using System.Text; using System.Thread ...

  6. PHP 中最全的设计模式（23种）

    https://my.oschina.net/botkenni/blog/1603660 PHP 中最全的设计模式(23种) 原 botkenni 发布于 01/07 21:22 字数 8726 阅读 ...

  7. Docker中mysql修改配置导致无法启动的docker容器

    宿主机中查找my.cnf文件 # find / -name my.cnf |grep '/etc/mysql/my.cnf' 找到: /data/docker/overlay2/dfc2ddbed53 ...

  8. MongoDB Driver：使用正确的姿势连接复制集

    from:https://yq.aliyun.com/articles/8461?spm=5176.7937264.222114.10.s2oqcT   摘要: MongoDB复制集(Replica ...

  9. C# JArray与JObject 的使用

    STEP1.using Newtonsoft.Json.Linq; STEP2 如何获取json里的某个属性(节点)值,对其删改,新增 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  10. caffe神经网络中不同的lr_policy间的区别

    lr_policy可以设置为下面这些值,相应的学习率的计算为: - fixed:  保持base_lr不变. - step:  如果设置为step,则还需要设置一个stepsize,  返回 base ...