iphone网页即移动端浏览器全覆盖开发专栏 - 步骤7 -- jquery 中的 ajax 出错的情况及解决过程[ajax老是404的网友一定要来看看]

您的位置：首页 >> iphone网页即移动端浏览器全覆盖开发专栏 >> >> 主题: 步骤7 -- jquery 中的 ajax 出错的情况及解决过程[ajax老是404的网友一定要来看看]

标题

步骤7 -- jquery 中的 ajax 出错的情况及解决过程[ajax老是404的网友一定要来看看]

clq

浏览(414) - 2017-06-28 20:12:29 发表编辑

关键字:

[2022-05-15 22:22:15 最后更新]
步骤7 -- jquery 中的 ajax 出错的情况及解决过程[ajax老是404的网友一定要来看看]

Bootstrap 中没有 ajax 模块,最近写了个类 C 的后端服务器,想在 html 中访问一下,于是想到了 ajax .
没想到一用之下居然搞了好久都没成功,仔细看了一下,原来 jquery 的 ajax 搞得还挺复杂的. 所以记录一下可能的出错和解决步骤吧.

出错的情况有以下几种:
1.
出错了,但没任何提示.
这是因为没有在 ajax 中写错误处理函数. 直接在网上找了最简单的用法导致的.
一个比较复杂的调用过程如下
$(document).ready(function() {
jQuery("#clearCac").click(function() {
jQuery.ajax({
url: "/Handle/Do.aspx",
type: "post",
data: { id: '0' },
dataType: "json",
success: function(msg) {
alert(msg);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
},
complete: function(XMLHttpRequest, textStatus) {
this; // 调用本次AJAX请求时传递的options参数
}
});
});
});

其实这还不算完整,完整的还要有 cache 处理参数等等.
具体可参考
http://jquery.cuishifeng.cn/jQuery.Ajax.html

clq

2017-06-28 20:18:51 发表编辑

错误原因也可以参考下
http://www.cnblogs.com/slu182/p/4647337.html

不过我感觉也是不全,我所知道一些如下:
dataType 类型和服务器返回的不同.

感觉 jquery 还是太过度设计了,我一向不喜欢 jquery,不过形势比人强,谁让人家现在火呢.
实在找不到就看源码吧,注意现在生产环境的是压缩过的,要找原始的(不带 mini 后缀的),实际的调用代码在函数
...
// Main method
ajax: function( url, options ) {
...
这个位置,jquery.js中可查找到. 可以看到它处理了太多的东西...

clq

2017-06-29 22:27:33 发表编辑

原因是不能跨域,返回的 404 错误也是不对的,其实是jquery的修改的,源码中可以看到.其实浏览器已经取得了数据,应该是浏览器的限制.

jquery 的 ajax 返回如果是 404 的话大多是这个原因,如果您这里用 firefox 等工具来测试的话会发现,实际上数据已经正确取得了的.
所以很显然这是浏览器的限制,而 jquery 很不厚道的全部转换成了 404 错误. 而要解决这个问题有两个方法:
1.如果是 get 请求的话仍然可以用 jquery 来实现,但是要改一下服务器端程序;
2.使用 html5 新增加的一个头信息,只要服务器返回这个信息就可以不做任何改动的在比较新的浏览器中使用(以我的测试来看ie8及以下应该是不支持的).
这个头信息是
Access-Control-Allow-Origin,后面我会贴一转贴篇文章. 其实很不容易找. 看到这篇文章的您有福了 :)

clq

2017-07-03 22:06:22 发表编辑

ps.这只是个简介,关于 jquery 的解决方式其实内部比较复杂,并且是有缺陷的(据说用的 javascrip src 可以跨域的原理).
--------------------------------------------------
Ajax跨域问题的两种解决方法[Access-Control-Allow-Origin]
http://www.cnblogs.com/pandang/p/5341250.html

Ajax跨域问题的两种解决方法浏览器不允许Ajax跨站请求，所以存在Ajax跨域问题，目前主要有两种办法解决。

1、在请求页面上使用Access-Control-Allow-Origin标头。
　　使用如下标头可以接受全部网站请求：
header('Access-Control-Allow-Origin:*')
　　使用如下标头可以接受指定网站请求：
header('Access-Control-Allow-Origin:http://www.abc.com')
　　所以，服务器写法：
1
2
3
header('Access-Control-Allow-Origin:*');

die( json_encode(array('msg'=>'msg....')) );
　　ajax写法和平常一样：

<!DOCTYPE html>
<html lang="en" class="">
<head>http://i.cnblogs.com/EditPosts.aspx?opt=1
<meta charset="utf-8" />
<title>测试</title>
<script src="http://www.ysont.cn/plugs/cookie/js/jquery-1.11.1.min.js"></script>
<body>
<script>
    $.ajax({
        url:'http://192.168.1.124/homekoo.com/zde/cors_1.php',
        dataType:'json',
        success:function(data){
            alert(data.msg);
        }
    });
</script>
</body>
</html>

2、使用jsonp跨域请求。
　　服务器：
1
2
$data = json_encode(array('msg'=>'msg....'));
die( $_REQUEST['function_name_index'].'('.$data.')' );
　　ajax请求：

<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="utf-8" />
<title>测试</title>
<script src="http://www.ysont.cn/plugs/cookie/js/jquery-1.11.1.min.js"></script>
<body>
<script>
    $.ajax({
        url:'http://192.168.1.124/homekoo.com/zde/cors_1.php',
        dataType:'jsonp',
        jsonp:'function_name_index',
        jsonpCallback:'function_name',
        success:function(data){
            alert(data.msg);
        }
    });
</script>
</body>
</html>
在ajax请求中，使用jsonp数据格式，所以讲dataType参数设置为jsonp，平常，还加到了jsonp和jsonpCallback两个参数，结合代码，不难看出这两个参数作用：
　　jsonp的作用是设置服务器获取回调函数名称参数的下标参数，jsonpCallback的作用就是设置回调函数，相当于input标签中name和value，jsonp对应name，value对应jsonpCallback。
　　更多jsonp请求可以参考：http://www.cnblogs.com/duanhuajian/p/3152617.html，有很详细的原理介绍。

当然，对已一些简单的GET请求，平不需要回调函数处理，可以使用script、img、iframe 等html标签设置的src属性产生GET请求，这里不在讨论情况了。

guest

2019-03-09 10:52:02 发表编辑

ip: 5.188.44.20
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36 Kinza/4.7.2

guest

2019-09-04 20:16:31 发表编辑

ip: 5.188.84.6
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.75 Safari/537.36

guest

2022-01-27 10:14:01 发表编辑

ip: 5.188.211.21
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)

guest

2022-04-19 11:17:07 发表编辑

ip: 5.188.211.26
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)

guest

2022-04-19 12:34:51 发表编辑

ip: 5.188.211.13
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)

guest

2022-05-15 22:22:15 发表编辑

ip: 5.188.211.13
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)

NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.