Ajax原理
Ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。
Ajax 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest介绍
XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest
方法//描述
abort()//停止当前请求
getAllResponseHeaders()//把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")//返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])//建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content)//向服务器发送请求
setRequestHeader("header", "value")//把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )
原生JS使用方法
五步使用法:
1.创建XMLHTTPRequest对象
2.使用open方法设置和服务器的交互信息
3.设置发送的数据，开始和服务器端交互
4.注册事件
5.更新界面
JS原生Ajax请求 GET/POST 代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="subGET">AJAX - GET</button>
<button id="subPOST">AJAX - POST</button>
<p id="p"></p>
</body>
<script>
var txt = 'AJAX - GET传参';
var txt2 = 'AJAX - POST传参';
var subGET = document.getElementById('subGET');
var subPOST = document.getElementById('subPOST');
var p = document.getElementById('p');
//Ajax GET请求示例
subGET.onclick = function(){
//第一步:创建异步对象
var ajax = new XMLHttpRequest();
//第二步:设置请求的url参数,参数一是请求类型,参数二是请求的url,可以带参数,动态的传递参数data到服务端
ajax.open('get','/test.php?data=' + txt);
//第三步:发送请求
ajax.send();
//第四步:注册时间 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function(){
if (ajax.readyState == 4 && ajax.status == 200) {
//第五步:如果能够劲道这层判断则说明数据完美的回来了,并且请求的页面是存在的
p.innerHTML = ajax.responseText;
}
}
}
//Ajax POST请求示例
subPOST.onclick = function(){
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求类型及url
xhr.open('post','/test.php');
//POST请求一定要添加请求头 不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
xhr.send('data=' + txt2);
xhr.onreadystatechange = function(){
//这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
p.innerHTML = xhr.responseText;
}
}
}
</script>
</html>
JQuery使用方法
$.ajax()
该方法用于执行Ajax请求，常用于其他jQuery Ajax方法不能完成的请求，也许我们可以把它称为”jQuery中Ajax系列方法之母”。
形式：$.ajax({name:val, name:val,…});
可选字段：
1）url：链接地址，字符串表示
2）data：需发送到服务器的数据，GET与POST都可以，格式为{A: ‘…’, B: ‘…’}
3）type：”POST” 或 “GET”，请求类型
4）timeout：请求超时时间，单位为毫秒，数值表示
5）cache：是否缓存请求结果，bool表示
6）contentType：内容类型，默认为”application/x-www-form-urlencoded”
7）dataType：服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
8）success：请求成功后，服务器回调的函数
9）error：请求失败后，服务器回调的函数
10）complete：请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用
11）async：是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行
12）username：访问认证请求中携带的用户名，字符串表示
13）password：返回认证请求中携带的密码，字符串表示
不知道将最后两个放到data中去，是不是密码会以明文展示，因没有尝试过，这里不敢下结论。
示例:
$.ajax({
url: "/test.php",
data: {name: 'fyovo'},
type: "POST",
dataType: "json",
success: function(data) {
//code...
}
});
$.post()
该方法使用POST方式执行Ajax请求，从服务器加载数据。
形式：$.post(url, data, func, dataType);
可选参数：
1）url：链接地址，字符串表示
2）data：需要发送到服务器的数据，格式为{A: ‘…’, B: ‘…’}
3）func：请求成功后，服务器回调的函数；function(data, status, xhr)，其中data为服务器回传的数据，status为响应状态，xhr为XMLHttpRequest对象，个人感觉关注data参数即可
4）dataType：服务器返回数据的格式
示例:
$.post("/test.php",{data:'测试'},function(res) {
//code...
},"json");
$.get()
该方法使用GET方式执行Ajax请求，从服务器加载数据。
形式：$.get(url, data, func, dataType);
其各个参数所示意义与$.post()一致，唯一区别就是请求类型是GET。
示例:
$.get("/test.php",{data:'测试'},function(res) {
//code...
},"json");
$.getJSON()
该方法使用GET方式执行Ajax请求，从服务器加载JSON格式数据。
形式：$.getJSON(url, data, func);
因为确定服务器返回json编码的数据，故相较于$.get()不必再指定dataType。
示例:
$.getJSON("/test.php",{data:'测试'},function(res) {
//code...
});
$.load()
该方法将服务器加载的数据直接插入到指定DOM中。
形式：$.load(url, data, func);
其中data如果存在则使用POST方式发送请求，不存在则使用GET方式发送请求。
示例:
<div id="dd"></div>
$('#dd').load("/test.php",{name: 'fyovo'});
$.getScript()
该方法使用GET方式执行Ajax请求，从服务器加载并执行回传的JavaScript。
形式：$.load(url, func);
示例:
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
Ajax异常处理
最简单直观的就是用参数自带的 error 判断
示例:
$.ajax({
url: "/test.php",
data: {name: 'fyovo'},
type: "POST",
dataType: "json",
success: function(data) {
//code...
},
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
}
});
//error事件返回的第一个参数XMLHttpRequest有一些有用的信息：
//XMLHttpRequest.readyState: 状态码
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
//如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"。
//XMLHttpRequest.status属性:一些错误代码
HTTP
1xx-信息提示
这些状态代码表示临时的响应。客户端在收到常规响应之前，应准备接收一个或多个1xx响应。
100-继续。
101-切换协议。
2xx-成功
这类状态代码表明服务器成功地接受了客户端请求。
200-确定。客户端请求已成功。
201-已创建。
202-已接受。
203-非权威性信息。
204-无内容。
205-重置内容。
206-部分内容。
3xx-重定向
客户端浏览器必须采取更多操作来实现请求。例如，浏览器可能不得不请求服务器上的不同的页面，或通过代理服务器重复该请求。
301-对象已永久移走，即永久重定向。
302-对象已临时移动。
304-未修改。
307-临时重定向。
4xx-客户端错误
发生错误，客户端似乎有问题。例如，客户端请求不存在的页面，客户端未提供有效的身份验证信息。400-错误的请求。
401-访问被拒绝。IIS定义了许多不同的401错误，它们指明更为具体的错误原因。这些具体的错误代码在浏览器中显示，但不在IIS日志中显示：
401.1-登录失败。
401.2-服务器配置导致登录失败。
401.3-由于ACL对资源的限制而未获得授权。
401.4-筛选器授权失败。
401.5-ISAPI/CGI应用程序授权失败。
401.7–访问被Web服务器上的URL授权策略拒绝。这个错误代码为IIS6.0所专用。
403-禁止访问：IIS定义了许多不同的403错误，它们指明更为具体的错误原因：
403.1-执行访问被禁止。
403.2-读访问被禁止。
403.3-写访问被禁止。
403.4-要求SSL。
403.5-要求SSL128。
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。这个错误代码为IIS6.0所专用。
403.19-不能为这个应用程序池中的客户端执行CGI。这个错误代码为IIS6.0所专用。
403.20-Passport登录失败。这个错误代码为IIS6.0所专用。
404-未找到。
404.0-（无）–没有找到文件或目录。
404.1-无法在所请求的端口上访问Web站点。
404.2-Web服务扩展锁定策略阻止本请求。
404.3-MIME映射策略阻止本请求。
405-用来访问本页面的HTTP谓词不被允许（方法不被允许）
406-客户端浏览器不接受所请求页面的MIME类型。
407-要求进行代理身份验证。
412-前提条件失败。
413–请求实体太大。
414-请求URI太长。
415–不支持的媒体类型。
416–所请求的范围无法满足。
417–执行失败。
423–锁定的错误。
5xx-服务器错误
服务器由于遇到错误而不能完成该请求。
500-内部服务器错误。
500.12-应用程序正忙于在Web服务器上重新启动。
500.13-Web服务器太忙。
500.15-不允许直接请求Global.asa。
500.16–UNC授权凭据不正确。这个错误代码为IIS6.0所专用。
500.18–URL授权存储不能打开。这个错误代码为IIS6.0所专用。
500.100-内部ASP错误。
501-页眉值指定了未实现的配置。
502-Web服务器用作网关或代理服务器时收到了无效响应。
502.1-CGI应用程序超时。
502.2-CGI应用程序出错。application.
503-服务不可用。这个错误代码为IIS6.0所专用。
504-网关超时。
505-HTTP版本不受支持。
FTP
1xx-肯定的初步答复
这些状态代码指示一项操作已经成功开始，但客户端希望在继续操作新命令前得到另一个答复。
110重新启动标记答复。
120服务已就绪，在nnn分钟后开始。
125数据连接已打开，正在开始传输。
150文件状态正常，准备打开数据连接。
2xx-肯定的完成答复
一项操作已经成功完成。客户端可以执行新命令。200命令确定。
202未执行命令，站点上的命令过多。
211系统状态，或系统帮助答复。
212目录状态。
213文件状态。
214帮助消息。
215NAME系统类型，其中，NAME是AssignedNumbers文档中所列的正式系统名称。
220服务就绪，可以执行新用户的请求。
221服务关闭控制连接。如果适当，请注销。
225数据连接打开，没有进行中的传输。
226关闭数据连接。请求的文件操作已成功（例如，传输文件或放弃文件）。
227进入被动模式(h1,h2,h3,h4,p1,p2)。
230用户已登录，继续进行。
250请求的文件操作正确，已完成。
257已创建“PATHNAME”。
3xx-肯定的中间答复
该命令已成功，但服务器需要更多来自客户端的信息以完成对请求的处理。331用户名正确，需要密码。
332需要登录帐户。
350请求的文件操作正在等待进一步的信息。
4xx-瞬态否定的完成答复
该命令不成功，但错误是暂时的。如果客户端重试命令，可能会执行成功。421服务不可用，正在关闭控制连接。如果服务确定它必须关闭，将向任何命令发送这一应答。
425无法打开数据连接。
426Connectionclosed;transferaborted.
450未执行请求的文件操作。文件不可用（例如，文件繁忙）。
451请求的操作异常终止：正在处理本地错误。
452未执行请求的操作。系统存储空间不够。
5xx-永久性否定的完成答复
该命令不成功，错误是永久性的。如果客户端重试命令，将再次出现同样的错误。500语法错误，命令无法识别。这可能包括诸如命令行太长之类的错误。
501在参数中有语法错误。
502未执行命令。
503错误的命令序列。
504未执行该参数的命令。
530未登录。
532存储文件需要帐户。
550未执行请求的操作。文件不可用（例如，未找到文件，没有访问权限）。
551请求的操作异常终止：未知的页面类型。
552请求的文件操作异常终止：超出存储分配（对于当前目录或数据集）。
553未执行请求的操作。不允许的文件名。
常见的FTP状态代码及其原因
150-FTP使用两个端口：21用于发送命令，20用于发送数据。状态代码150表示服务器准备在端口20上打开新连接，发送一些数据。
226-命令在端口20上打开数据连接以执行操作，如传输文件。该操作成功完成，数据连接已关闭。
230-客户端发送正确的密码后，显示该状态代码。它表示用户已成功登录。
331-客户端发送用户名后，显示该状态代码。无论所提供的用户名是否为系统中的有效帐户，都将显示该状态代码。
426-命令打开数据连接以执行操作，但该操作已被取消，数据连接已关闭。
530-该状态代码表示用户无法登录，因为用户名和密码组合无效。如果使用某个用户帐户登录，可能键入错误的用户名或密码，也可能选择只允许匿名访问。如果使用匿名帐户登录，IIS的配置可能拒绝匿名访问。
550-命令未被执行，因为指定的文件不可用。例如，要GET的文件并不存在，或试图将文件PUT到您没有写入权限的目录。
也可以根据实际开发情况后端返回的状态码判断.
.jpg)
.jpg)
