如何在Google Chrome上通过HTTPS使XMLHttpRequest工作?

时间:2013-01-30 15:11:53

标签: ajax https

我对此研究了很多但却找不到魔法。 实际上我想填写城市密码列表号。使用JQuery自动完成UI。这是一个https页面。 它在Firefox中工作,但在谷歌浏览器中没有。任何人都可以帮我解决这个问题。在Advancce的Thans。

以下是我的代码:

function zipAutoCompletet(prefix){

                jQuery( "#"+prefix+"_zip" ).autocomplete({

                                source: function( request, response ) {
                                                jQuery.ajax({
                                                                url: "http://ws.geonames.org/postalCodeSearchJSON",
                                                                dataType: "jsonp",
                                                                data: {
                                                                                style: "full",
                                                                                maxRows: 12,
                                                                                postalcode_startsWith: request.term
                                                                },
                                                                success: function( data ) {


                                                                                response( jQuery.map( data.postalCodes, function( item ) {

                                                                                return {
                                                                                                                label: item.placeName + (item.adminCode1 ? ", " + item.adminCode1 : "") + ", " + item.postalCode + ", "+item.countryCode,
                                                                                                                value: item.postalCode
                                                                                                }

                                                                }));
                                                                                                                                                                jQuery('.ui-autocomplete').css('width', '188px');
                                                                }

                                                });
                                },
                                minLength: 2,
                                select: function( event, ui ) {

                                                var myString= new String(ui.item.label);
                                                var address = myString.split(',')

                                                jQuery('#'+prefix+'_city').val(address[0]);
                                                jQuery('#'+prefix+'_city').addClass('activated');
                                                jQuery('#'+prefix+'_city').trigger('change');
                                                jQuery('#'+prefix+'_city').parents('.row').removeClass('error-row')
                                                jQuery('#'+prefix+'_city').parents('.row').addClass('ok-row')

                                                var countryCode = address[3] ? address[3]: address[2] 
                                                countryCode      = jQuery.trim(countryCode);
                                                var countryName = jQuery('#'+prefix+'_country option[value="'+jQuery.trim(countryCode)+'"]').text()
                                                jQuery('#countryContainer .jqTransformSelectWrapper span').html(countryName)  
                                                jQuery('#countryContainer .jqTransformSelectWrapper').addClass('selected-jqtranform');
                                                jQuery('#'+prefix+'_country').parents('.row').addClass('ok-row') 
                                                jQuery('#'+prefix+'_country').parents('.row').removeClass('error-row')
                                                jQuery('#'+prefix+'_country').val(jQuery.trim(countryCode)) 

                                                var stateCode = address[2] ? address[1]: '';
                                                stateCode           =  jQuery.trim(stateCode)

                                                if(countryCode == 'US'){

                                                                var base=base_url;
base=base.replace("https", "http");

                                jQuery.ajax({
                                                                                url: base+"/getStateName",
                                                                                dataType: "jsonp",
                                                                                data: { stateCode: stateCode },
                                                                                success: function( data ) 
                                                                                {                                                                                                                                              
                                                                                                stateName = data  

                                                                                                jQuery('#jc_state').val(stateName);
                                                                                                jQuery('#jc_state').addClass('activated');
                                    jQuery('#jc_state').parents('.row').removeClass('error-row')
                                                                                                jQuery('#jc_state').parents('.row').addClass('ok-row')
                                                                                                jQuery('#jc_state').trigger('change');
                                                                                                formValidate();
                                                                                }
                                                                });
                                                }else{

                                                                stateName = stateCode  

                                                                jQuery('#jc_state').val(stateName);
                                                                jQuery('#jc_state').addClass('activated');
                jQuery('#jc_state').parents('.row').removeClass('error-row')
                                                                jQuery('#jc_state').parents('.row').addClass('ok-row')
                                                                jQuery('#jc_state').trigger('change');
                                                                formValidate();
                                                }

                                                jQuery('#'+prefix+'_zip').parents('.row').addClass('ok-row')
                                                jQuery('#'+prefix+'_zip').parents('.row').removeClass('error-row');
                                },
                                open: function() {
                                                jQuery( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
                                },
                                close: function() {
                                                jQuery( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
                                },
                                change: function (event, ui) {
            if (ui.item === null) {
                jQuery("#"+prefix+"_zip").parents('.row').removeClass('ok-row');
                                                    jQuery("#"+prefix+"_zip").parents('.row').addClass('error-row');
                 $("#"+prefix+"_zip").val('');

                                                }
        }
                });
}

1 个答案:

答案 0 :(得分:2)

如果您在https页面上,浏览器将阻止对非安全资源(http)的请求。 通常你应该看到一些关于这一点的通知。看起来其他浏览器默认情况下不会阻止安全页面上的非安全AJAX请求,但谷歌浏览器会这样做。

在您的代码中,您有硬编码的网址:

url: "http://ws.geonames.org/postalCodeSearchJSON",

如果这是跨域请求并且它支持HTTPS,您可以像这样更改它:

url: "//ws.geonames.org/postalCodeSearchJSON",

如您所见,协议未在此处指定。浏览器将采用页面默认协议(http或https)并使用它来请求数据。