使用FF浏览器时未调用AJAX [英] AJAX not being called when using FF browser
本文介绍了使用FF浏览器时未调用AJAX的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在处理此测试页: http://www.comehike.com/test_fb_connect.php
I am working off this test page: http://www.comehike.com/test_fb_connect.php
当用户使用Facebook登录时，系统应调用ajax脚本.使用Chrome而不是Firefox时会发生这种情况.
When the user logs in using facebook, the system should call an ajax script. It happens when using Chrome, but not Firefox.
这是页面上的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '***REDACTED***']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Live page for testing Facebook login and to learn how it works." />
<title property="dc:title">Facebook Login Test Page - Come Hike</title>
<link rel="shortcut icon" type="image/x-icon" href="http://www.comehike.com/img/ui/favicon.jpg">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css&2.8.2r1/build/base/base-min.css">
<link rel="stylesheet" type="text/css" href="../hike_layout.css"/>
<link rel="stylesheet" type="text/css" href="../menusystem.css"/>
<meta name="google-site-verification" content="RJcu8ObHW6huUbyea336xJ1WgLiC4478fz3_3r_zthc" />
<meta name="alexaVerifyID" content="-2hEyu8phk6CFHF-PTqdQvP2B8k" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</head>
<script type="javascript">
function loadfb()
{
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/es_EN/all.js';
document.getElementById('fb-root').appendChild(e);
};
</script>
<!--<body onload="loadfb();">-->
<body>
Array<br />
(<br />
[OPENID_AUTH] => <br />
)<br />
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '***REDACTED***',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true
});
FB.Event.subscribe('auth.login',
function(response)
{alert("login");
FB.getLoginStatus(function(response)
{
if (response.status == "connected")
{
FB.api('/me', function(response)
{
// alert ("First Name:" + response.first_name);
// alert ("Last Name:" + response.last_name);
// alert ("Email:" + response.email);
// alert ("Location name:" + response.location.name);
// alert ("Bio:" + response.bio);
// alert ("Id:" + response.id);
// <img src="https://graph.facebook.com/FBNeedsADontLikeButton/picture"/>
// Now need to go send an AJAX call :)
var url="/auth/facebook_login_ajax.php?first_name="+response.first_name+"&email="+response.email+"&last_name="+response.last_name+"&bio="+response.bio+"&location="+response.location.name;
alert("sending request");
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.open("GET", url , true);
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
var xmlDoc = request.responseXML;
}
location.reload(true);
}
request.send(null);
// Check if the request was successfull and refresh the page
});
}
else
{
// user not connected
}
});
});
FB.Event.subscribe('auth.logout',
function(response)
{alert("log-out");
// Now need to go send an AJAX call to log out :)
var url="/auth/facebook_logout_ajax.php";
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.open("GET", url , true);
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
//result = xmlDoc.documentElement.getElementsByTagName("result");
}
location.reload(true);
}
request.send(null);
// TODO: Check if the request was successfull and refresh the page
});
</script>
<div class="banner">
<!-- title and login/sign up go here -->
<a href="/"><div class="site_title">Hike!</div></a>
<div class="site_login">
<fb:login-button show-faces="false" perms="user_about_me,email,user_location" autologoutlink="true" width="200" max-rows="1">
</fb:login-button> |
<a class="login_link" id="login" href="/auth/log_in.php">Log in</a> |
<a href="/auth/create_profile.php">Sign up</a> |
<a href="/auth/forgot_password.php">Forgot Password</a>
</div>
</div>
<div class="nav_bar">
<!-- connect buttons and menu go here -->
<div class="nav">
<div class="icons">
<!--
<div id="fb">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="button_count" show_faces="false"></fb:like>
</div>
-->
<!--
<div id="badge">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>
</div>
-->
<!--
<div id="tweet">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="comehike">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
-->
</div>
<div class="menusystem" id="site_nav">
<ul class="main_menu_ul">
<li class="main_menu_li"><a href="/community/support.php">SUPPORT</a>
</li>
<li class="main_menu_li"><a href="/community/search_hikers.php?all=yes&redirect=yes">COMMUNITY</a>
<ul class="child_menu_ul">
<li class="first"><a href="/community/search_hikers.php">Search Hikers</a></li>
<li><a href="/hikes/search_hiking_groups.php">Search Groups</a></li>
<li class="last"><a href="/hikes/start_hiking_group.php">Start Regular Hiking Group</a></li>
</ul>
</li>
<li class="main_menu_li"><a href="/hikes/search_hikes.php?all=yes&when=f&redirect=yes">HIKES</a>
<ul class="child_menu_ul">
<li class="first"><a href="/hikes/schedule_hike.php">Start Single Hike</a></li>
<li><a href="/hikes/search_hikes.php">Search Hikes</a></li>
<li><a href="/hikes/search_hikes.php?when=b&redirect=yes&all=yes">Past Hikes</a></li>
<li><a href="http://www.comehike.com/outdoors/parks/add_trailhead.php">Add Routes You Know</a></li>
<li class="last"><a href="http://www.comehike.com/outdoors/parks/trailhead.php">Trailhead Map</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- ************************************************* -->
<!-- the login overlay markup is hidden, will show if user clicks 'login' link -->
<div id="loginOverlay" class="yui3-overlay-loading" style="z-index: 100;">
<div class="yui3-widget-hd"><h3>Login</h3></div>
<div class="yui3-widget-bd">
<div>
<span>Email</span><input type="text" id="user_email"></input>
</div>
<div>
<span>Password</span><input type="password" id="user_pass"></input>
</div>
<div id="err"></div>
</div>
<div class="yui3-widget-ft">
<div class="btn" id="submit">Submit</div>
<div class="btn" id="cancel">Cancel</div>
</div>
</div>
<!-- ************************************************* -->
<!-- Main area of the page -->
<div id="layout2" class="content">
<div class="mainBody">
<div class="basic">
<p>
<h1><center>Test For Facebook Login</h1></center>
</p>
</p>
<br />
<p>
<center>
<script type="text/javascript"><!--
google_ad_client = "***REDACTED***";
/* 728x90, created 12/23/10 */
google_ad_slot = "***REDACTED***";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
</p>
<div class="footer">
<p>Copyright (c) - 2011 Come Hike - All Rights Reserved |
<a href="http://www.comehike.com/about_us.php">About Us</a> |
<a href="http://www.comehike.com/contact_us.php">Contact Us</a> |
<a href="http://www.comehike.com/privacy_policy.php">Privacy Policy</a> |
<a href="http://www.nps.gov/index.htm">National Park Service Website</a>
</p>
</div> <!-- end footerdiv -->
<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
<script>
YUI().use('node','io','gallery-overlay-modal','event-key','json', function(Y){
var LOGIN_URL = "/auth/auth.php";
var LOGOUT_URL = "/auth/auth_logout.php";
var dlg = false,
elLogin = Y.all("a.login_link"),
elLogout = Y.all("a.logout_link");
var auth = function(){
Y.one("#err").set('innerHTML', '<img src="/img/ui/ajax-loader-bar.gif" alt="Authenticating..."></img>');
var u = Y.one("#user_email").get("value");
var p = Y.one("#user_pass").get("value");
Y.io(LOGIN_URL,
{
method:"POST",
headers: {
'X-Transaction': 'POST 1'
},
data: "user_email=" + u + "&user_pass=" + p,
on: {
success: function(id, o){
var o = Y.JSON.parse(o.responseText);
if(o.valid){
//dlg.hide();
window.location.reload();
}else{
if(o.error){
Y.one("#err").set('innerHTML', o.error);
}
}
},
failure: function(id, o){
Y.one("#err").set('innerHTML', "Authorization Error");
}
}
}
);
};
var hideLogin = function(){
if(dlg){
dlg.hide();
}
};
var onKey = function(e){
switch (e.charCode) {
case 13:
e.preventDefault();
auth();
break;
case 27:
e.preventDefault();
dlg.hide();
break;
}
};
var showLogin = function(e){
e.preventDefault();
if(dlg===false){
dlg = new Y.Overlay({
srcNode:"#loginOverlay",
width:"25em",
height:"17em"
}).plug(Y.Plugin.OverlayModal);
dlg.centered();
dlg.render();
var elSubmit = Y.one("#submit");
if(elSubmit){
elSubmit.on("click", auth);
}
var elCancel = Y.one("#cancel");
if(elCancel){
elCancel.on("click", hideLogin);
}
Y.on("key", onKey, "#loginOverlay");
}
Y.one("#user_email").set("value",'');
Y.one("#user_pass").set("value",'');
Y.one("#err").set('innerHTML', '');
Y.one("#user_email").focus();
dlg.show();
};
if(!Y.Lang.isNull(elLogin)){
elLogin.on("click", showLogin);
}
var logout = function(e){
e.preventDefault();
Y.io(LOGOUT_URL,
{
method:"POST",
data: "logout=true",
headers: {
'X-Transaction': 'POST 2'
},
on: {
success: function(id, o){
window.location.reload();
},
failure: function(id, o){
window.location.reload();
}
}
}
);
};
if(!Y.Lang.isNull(elLogout)){
elLogout.on("click", logout);
}
});
</script>
</div> <!-- Closing basic -->
</div> <!-- Closing main body -->
</div> <!-- Closing layout 2? -->
</div> <!-- Closing the body of this thing -->
</body>
</html>
推荐答案
您正尝试调用跨域ajax请求.但由于相同来源政策，它被多个浏览器阻止.为了克服这个问题，您可以按照
you are trying to call cross domain ajax request. but it is prevented by several browsers because of the same origin policy. to overcome this you can follow these steps.
这篇关于使用FF浏览器时未调用AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
