根据XHR对象我们可以知道它返回的可以是个文本的格式,
传入回调函数前,内部进行这样处理就可以变回json对象了
var getJson = JSON.parse(这里是来自服务器端返回的Json格式的字符串);
$(function () { // 是 $(document).ready(function(){}) 的简写,在DOM加载完成之后执行
$.ajax({
url: "/login/user/login", // 请求地址
data: $("#login_form").serialize(), // 会收集对应表单中的input数据
dataType: 'json', // 返回类型
async:false, // 设置为异步操作,当其值诶true时,浏览器会假死
type: 'post', // 请求类型
success: function (msg) {
if( msg.code == parseInt("200") ) {
window.location = "/";
} else {
alert("错误信息:"+msg.err);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("状态:" + XMLHttpRequest.status + " " + "状态码:" + XMLHttpRequest.readyState + " " + "json解析状态码:" + textStatus);
/*XMLHttpRequest.readyState: 状态码的意思
*0 - (未初始化)还没有调用send()方法
*1 - (载入)已调用send()方法,正在发送请求
*2 - (载入完成)send()方法执行完成,已经接收到全*部响应内容
*3 - (交互)正在解析响应内容,如果不是json格式就会报错
*4 - (完成)响应内容解析完成,可以在客户端调用了。状态码不为200也会报错
*/
},
}); //ajax结束
});
<?php
$array = [];
$array['err'] = 'success';
$array['code'] = 200;
echo json_encode($array, JSON_UNESCAPED_UNICODE);
XMLHTTPRequest状态status完整列表
AJAX中请求远端文件、或在检测远端文件是否掉链时,都需要了解到远端服务器反馈的状态以确定文件的存在 与否。
当然,在我们平常浏览网页时,也会发现一些文件不存在时显示为“404错误”,这就是常见的Http请求状态(status)
Web服务器响应浏览器或其他客户程序的请求时,其应答一般由以下几个部分组成:一个状态行,几个应答头,一个空行,内容文档。下面是一个最简单的应
状态行包含HTTP版本、状态代码、与状态代码对应的简短说明信息。在大多数情况下,除了Content-Type之外的所有应答头都是可选的。但Content-Type是必需的,它描述的是后面文档的MIME类型。虽然大多数应答都包含一个文档,但也有一些不包含,例如对HEAD请求的应答永远不会附带文档。有许多状态代码实际上用来标识一次失败的请求,这些应答也不包含文档(或只包含一个简短的错误信息说明)。 状态代码可以指明具体请求是否已成功,还可以揭示请求失败的确切原因。
1xx - 信息提示
这些状态代码表示临时的响应。客户端在收到常规响应之前,应准备接收一个或多个 1xx 响应。
·0 - 本地响应成功。
· 100 - Continue 初始的请求已经接受,客户应当继续发送请求的其余部分。(HTTP 1.1新)
· 101 - Switching Protocols 服务器将遵从客户的请求转换到另外一种协议(HTTP 1.1新)
2xx - 成功
这类状态代码表明服务器成功地接受了客户端请求。
· 200 - OK 一切正常,对GET和POST请求的应答文档跟在后面。
· 201 - Created 服务器已经创建了文档,Location头给出了它的URL。
· 202 - Accepted 已经接受请求,但处理尚未完成。
· 203 - Non-Authoritative Information 文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝,非权威性信息(HTTP 1.1新)。
· 204 - No Content 没有新文档,浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的。
· 205 - Reset Content 没有新的内容,但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容(HTTP 1.1新)。
· 206 - Partial Content 客户发送了一个带有Range头的GET请求,服务器完成了它(HTTP 1.1新)。
3xx - 重定向
· 300 - Multiple Choices 客户请求的文档可以在多个位置找到,这些位置已经在返回的文档内列出。如果服务器要提出优先选择,则应该在Location应答头指明。
· 301 - Moved Permanently 客户请求的文档在其他地方,新的URL在Location头中给出,浏览器应该自动地访问新的URL。
· 302 - Found 类似于301,但新的URL应该被视为临时性的替代,而不是永久性的。注意,在HTTP1.0中对应的状态信息是“Moved Temporatily”。出现该状态代码时,浏览器能够自动访问新的URL,因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如,如果浏览器错误地请求 http://host/~user (缺少了后面的斜杠),有的服务器返回301,有的则返回302。严格地说,我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。
· 303 - See Other 类似于301/302,不同之处在于,如果原来的请求是POST,Location头指定的重定向目标文档应该通过GET提取(HTTP 1.1新)。
· 304 - Not Modified 客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。
· 305 - Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取(HTTP 1.1新)。
· 307 - Temporary Redirect 和302(Found)相同。许多浏览器会错误地响应302应答进行重定向,即使原来的请求是POST,即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因,HTTP 1.1新增了307,以便更加清除地区分几个状态代码:当出现303应答时,浏览器可以跟随重定向的GET和POST请求;如果是307应答,则浏览器只能跟随对GET请求的重定向。(HTTP 1.1新)
4xx - 客户端错误
发生错误,客户端似乎有问题。例如,客户端请求不存在的页面,客户端未提供有效的身份验证信息。
· 400 - Bad Request 请求出现语法错误。
· 401 - Unauthorized 访问被拒绝,客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头,浏览器据此显示用户名字/密码对话框,然后在填写合适的Authorization头后再次发出请求。IIS 定义了许多不同的 401 错误,它们指明更为具体的错误原因。这些具体的错误代码在浏览器中显示,但不在 IIS 日志中显示:
· 401.1 - 登录失败。
· 401.2 - 服务器配置导致登录失败。
· 401.3 - 由于 ACL 对资源的限制而未获得授权。
· 401.4 - 筛选器授权失败。
· 401.5 - ISAPI/CGI 应用程序授权失败。
· 401.7 – 访问被 Web 服务器上的 URL 授权策略拒绝。这个错误代码为 IIS 6.0 所专用。
· 403 - Forbidden 资源不可用。服务器理解客户的请求,但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。禁止访问:IIS 定义了许多不同的 403 错误,它们指明更为具体的错误原因:
· 403.1 - 执行访问被禁止。
· 403.2 - 读访问被禁止。
· 403.3 - 写访问被禁止。
· 403.4 - 要求 SSL。
· 403.5 - 要求 SSL 128。
· 403.6 - IP 地址被拒绝。
· 403.7 - 要求客户端证书。
· 403.8 - 站点访问被拒绝。
· 403.9 - 用户数过多。
· 403.10 - 配置无效。
· 403.11 - 密码更改。
· 403.12 - 拒绝访问映射表。
· 403.13 - 客户端证书被吊销。
· 403.14 - 拒绝目录列表。
· 403.15 - 超出客户端访问许可。
· 403.16 - 客户端证书不受信任或无效。
· 403.17 - 客户端证书已过期或尚未生效。
· 403.18 - 在当前的应用程序池中不能执行所请求的 URL。这个错误代码为 IIS 6.0 所专用。
· 403.19 - 不能为这个应用程序池中的客户端执行 CGI。这个错误代码为 IIS 6.0 所专用。
· 403.20 - Passport 登录失败。这个错误代码为 IIS 6.0 所专用。
· 404 - Not Found 无法找到指定位置的资源。这也是一个常用的应答。
· 404.0 -(无) – 没有找到文件或目录。
· 404.1 - 无法在所请求的端口上访问 Web 站点。
· 404.2 - Web 服务扩展锁定策略阻止本请求。
· 404.3 - MIME 映射策略阻止本请求。
· 405 - Method Not Allowed 请求方法(GET、POST、HEAD、DELETE、PUT、TRACE等)对指定的资源不适用,用来访问本页面的 HTTP 谓词不被允许(方法不被允许)(HTTP 1.1新)
· 406 - Not Acceptable 指定的资源已经找到,但它的MIME类型和客户在Accpet头中所指定的不兼容,客户端浏览器不接受所请求页面的 MIME 类型(HTTP 1.1新)。
· 407 - Proxy Authentication Required 要求进行代理身份验证,类似于401,表示客户必须先经过代理服务器的授权。(HTTP 1.1新)
· 408 - Request Timeout 在服务器许可的等待时间内,客户一直没有发出任何请求。客户可以在以后重复同一请求。(HTTP 1.1新)
· 409 - Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突,因此请求不能成功。(HTTP 1.1新)
· 410 - Gone 所请求的文档已经不再可用,而且服务器不知道应该重定向到哪一个地址。它和404的不同在于,返回407表示文档永久地离开了指定的位置,而404表示由于未知的原因文档不可用。(HTTP 1.1新)
· 411 - Length Required 服务器不能处理请求,除非客户发送一个Content-Length头。(HTTP 1.1新)
· 412 - Precondition Failed 请求头中指定的一些前提条件失败(HTTP 1.1新)。
· 413 – Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求,则应该提供一个Retry-After头(HTTP 1.1新)。
· 414 - Request URI Too Long URI太长(HTTP 1.1新)。
· 415 – 不支持的媒体类型。
· 416 – Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头。(HTTP 1.1新)
· 417 – 执行失败。
· 423 – 锁定的错误。
5xx - 服务器错误
服务器由于遇到错误而不能完成该请求。
· 500 - Internal Server Error 服务器遇到了意料不到的情况,不能完成客户的请求。
· 500.12 - 应用程序正忙于在 Web 服务器上重新启动。
· 500.13 - Web 服务器太忙。
· 500.15 - 不允许直接请求 Global.asa。
· 500.16 – UNC 授权凭据不正确。这个错误代码为 IIS 6.0 所专用。
· 500.18 – URL 授权存储不能打开。这个错误代码为 IIS 6.0 所专用。
· 500.100 - 内部 ASP 错误。
· 501 - Not Implemented 服务器不支持实现请求所需要的功能,页眉值指定了未实现的配置。例如,客户发出了一个服务器不支持的PUT请求。
· 502 - Bad Gateway 服务器作为网关或者代理时,为了完成请求访问下一个服务器,但该服务器返回了非法的应答。 亦说Web 服务器用作网关或代理服务器时收到了无效响应。
· 502.1 - CGI 应用程序超时。
· 502.2 - CGI 应用程序出错。
· 503 - Service Unavailable 服务不可用,服务器由于维护或者负载过重未能应答。例如,Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头。这个错误代码为 IIS 6.0 所专用。
· 504 - Gateway Timeout 网关超时,由作为代理或网关的服务器使用,表示不能及时地从远程服务器获得应答。(HTTP 1.1新) 。
· 505 - HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本。(
json提示parsererror应该是返回的类型出错,也许是你调试过程中出现了echo或者dump过什么导致返回的格式不是json了
因为ajax与jsonp原理不一样,这里就不详述jQuery使用它的方法了
详情,请参考我的csdn博文
http://blog.csdn.net/myboyli/article/details/52614733
jsonp实质是html页面添加script标签 请求执行一个函数,
script标签的src指向的地址 被当作js文本资源地址,且立即被执行
传过来的参数就在函数的传入参数那里,所以可以是String或者Json等类型
若要实现返回json格式 则 自定义同名函数,返回该参数即可
<html>
<head>
<script>
// 将获取到的json变量赋给该全局变量
// hlz => 服务器端jsonp的名称
var hlz=function(json_data){
// 取一个全局变量,用于存储json对象
window.get_json_data = json_data;
};
</script>
<script src="./b.html"></script>
<script>
//输出 获取到的结果
console.log(get_json_data);
</script>
</head>
</html>
hlz({"name":"云天河"})
Object {name: "云天河"}
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Max-Age: 9999');
a)js通过获取浏览器的显示长度clientHeight 与 浏览器当前位置的高度scrollTop
b)预设所有的图片的资源地址放在一个非src的标签上,
比如放在一个自定义的属性originalSrc里面
c)正则匹配区域内的TagName或者className,比如此插件,
通过选择器查询img标签的offsetTop坐标,
并给所有的含有originalSrc的属性给予src='预显示的占位的低质量图片地址'
d)监听scroll事件,每次鼠标滑动,会触发,计算所有img标签中在规定高宽内的图片,
并提取originalSrc中的图片地址到src属性,用于向服务器请求加载图片
https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js
<script type="text/javascript" src="//cdn.bootcss.com/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
/*图片延时加载*/
$(".lazy_pic").lazyload({
effect: "fadeIn",
threshold: 200,
failurelimit: 10,
placeholder: "//img.cdn.hlzblog.top/static/img/default/pre_pic.png",
data_attribute: "original", // data-original属性
});
</script>
effect:
载入使用何种效果 effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold:
提前开始加载 threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时
就开始加载图片,可以做到不让用户察觉
failurelimit:
图片排序混乱时 failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时
则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,
failurelimit:
意在加载N张可见区域外的图片,以避免出现这个问题.
<img data-original="./instance.png" width='100%' alt="这是测试的一张图">
现在多是响应式,所以如果将该jq插件配合h5的根据媒体查询加载不同质量的图片的属性, 配合CDN加载不同质量的图片会更好, 示例,七牛云的图片服务
<picture>
<source class="lazy_pic" data-original="//img.cdn.hlzblog.top/17-8-13/27947591.jpg?imageView2/1/w/200/h/200/q/50"
<img class="lazy_pic" data-original="//img.cdn.hlzblog.top/17-8-13/27947591.jpg?imageView2/1/w/200/h/200/q/100" alt="test_picture">
</picture>
评论列表点此评论