1、Ajax原理
(摘自W3C)
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
通俗点说就是通过XmlHttpRequest(xhr)对象向服务器发异步请求,从服务器获得数据,然后用 javascript 来操作DOM更新页面的技术。
我们平时开发时使用最多的ajax当然是Jquery.ajax,下面先列出jquery封装的ajax
2、Jquery - Ajax
$.ajax({
type: "",//POST or GET
url : "",//请求的服务端地址,或者本地测试地址(以GET方式请求时在地址后加 ?id= % name = & ...)
data: {},//POST请求时携带的参数
async: "",//默认为true,即为经典的ajax异步请求
cache: "",//默认为true,允许从浏览器缓存中加载请求信息
dataType: "",//有xml、html、script、json、jsonp、text等类型,其中json较为常用,返回json数据
success: function(data){
//请求成功的操作逻辑
},
error: function(data){
//请求失败的操作逻辑
}
})
$.post(url,data,function(data,status){
//操作
})
$.get(url,function(data,status){
//操作
})
3、原生JS - Ajax
var Ajax = {
//GET方法
get: function(url){
var xhr = new XMLHttpRequest(); //xhr对象在后台与服务器进行交换数据
xhr.open('GET',url,false);//请求方式、请求路径、async方式
xhr.onreadystatechange = function(){
if(xhr.readyState == 0){
//请求未初始化(代理被创建,但尚未调用 open() 方法)
}else if(xhr.readyState == 1){
//服务器连接成功(open方法调用成功)------启动
}else if(xhr.readyState == 2){
//请求接受成功(send方法调用成功)--------发送
}else if(xhr.readyState == 3){
//请求处理中(数据传输中...)------------接收
}else if(xhr.readyState == 4){
//请求以完成,响应就绪(数据传输成功)-----完成
if(xhr.status == 200 || xhr.status == 304){
console.log(xhr)//所有数据都在xhr中携带返回
}else{
alert('错误+ 'xhr.status)
}
}
}
xhr.send(); //请求方法。
},
//POST方法
post: function(url,data){
var xhr = new XMLHttpRequest();
xhr.open('POST',data,false);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//POST发起请求时,用来添加HTTP头部信息
xhr.onreadystatechange = function(){
if(xhr.readyStatus == 4){
//if(0){}else if(1,2,3){}...
if(xhr.status == 200 || xhr.status == 304){
console.log(xhr)
}
}
}
xhr.send(data);
}
}
//调用
Ajax.get(url);
let data = {};
Ajax.post(url,data);
4、常见请求服务器的状态码
序号 | 状态码 | 描述 |
---|---|---|
1 | 100 | 客户必须继续发出请求 |
2 | 101 | 客户要求服务器根据请求转换HTTP协议版本 |
3 | 200 | 请求成功 |
4 | 201 | 提示知道新文件的URL |
5 | 202 | 接受和处理、但处理未完成 |
6 | 203 | 返回信息不确定或不完整 |
7 | 204 | 请求收到,但返回信息为空 |
8 | 205 | 服务器完成了请求,用户代理必须复位当前已经浏览过的文件 |
9 | 206 | 服务器已经完成了部分用户的GET请求 |
10 | 300 | 请求的资源可在多处得到 |
11 | 301 | 删除请求数据 |
12 | 302 | 在其他地址发现了请求数据 |
13 | 303 | 建议客户访问其他URL或访问方式 |
14 | 304 | 客户端已经执行了GET,但文件未变化 |
15 | 305 | 请求的资源必须从服务器指定的地址得到 |
16 | 306 | 前一版本HTTP中使用的代码,现行版本中不再使用 |
17 | 307 | 申明请求的资源临时性删除 |
18 | 400 | 错误请求,如语法错误 |
19 | 401 | 请求授权失败 |
20 | 402 | 保留有效ChargeTo头响应 |
21 | 403 | 请求不允许 |
22 | 404 | 没有发现文件、查询或URl |
23 | 405 | 用户在Request-Line字段定义的方法不允许 |
24 | 406 | 根据用户发送的Accept拖,请求资源不可访问 |
25 | 407 | 类似401,用户必须首先在代理服务器上得到授权 |
26 | 408 | 客户端没有在用户指定的时间内完成请求 |
27 | 409 | 对当前资源状态,请求不能完成 |
28 | 410 | 服务器上不再有此资源且无进一步的参考地址 |
29 | 411 | 服务器拒绝用户定义的Content-Length属性请求 |
30 | 412 | 一个或多个请求头字段在当前请求中错误 |
31 | 413 | 请求的资源大于服务器允许的大小 |
32 | 414 | 请求的资源URL长于服务器允许的长度 |
33 | 415 | 请求的资源不支持请求项目格式 |
34 | 416 | 在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段 |
35 | 417 | 服务器不满足请求Expect头字段指定的期望值 |
36 | 500 | 服务器产生内部错误 |
37 | 501 | 服务器不支持请求的函数 |
38 | 502 | 服务器暂时不可用,有时是为了防止发生系统过载 |
39 | 503 | 服务器过载或暂停维修 |
40 | 504 | 关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长 |
41 | 505 | 服务器不支持或拒绝支请求头中指定的HTTP版本 |