Ajax总结

发表于 | 分类于

Ajax(Asynchronous JavaScript and XML),可以理解为JavaScript执行异步网络请求。通俗的理解的话就是，如果没有Ajax技术，改变网页的一小部分（哪怕是一行文字、一张图片）都需要重新加载一次整个页面，而有了Ajax之后，就可以实现在网页不跳转不刷新的情况下，在网页后台提交数据，部分更新页面内容。

JS中的Ajax

XMLHttpRequest对象

XMLHttpRequest 对象用于在后台与服务器交换数据，能够在不重新加载页面的情况下更新网页，在页面已加载后从服务器请求数据，在页面已加载后从服务器接收数据，在后台向服务器发送数据。所以XMLHttpRequest对象是Ajax技术的核心所在。

实现流程

创建 XMLHttpRequest对象——>打开请求地址，初始化数据——>发送请求数据——>监听回调函数状态——>收到服务器返回的应答结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var xmlhttp;
function loadXMLDoc(url){
	xmlhttp=null;
	if (window.XMLHttpRequest){// code for all new browsers
  		xmlhttp=new XMLHttpRequest();//在这里创建 XMLHttpRequest对象
  	}else if (window.ActiveXObject){// code for IE5 and IE6
  		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  	}
  	if (xmlhttp!=null){
  		xmlhttp.open("GET",url,true); //请求的方式和请求地址
  		xmlhttp.send(null);//发送请求
  		xmlhttp.onreadystatechange=state_Change;//监听回调函数
  	}else{
  		alert("Your browser does not support XMLHTTP.");
  	}
}
function state_Change(){//这里是回调函数
	if (xmlhttp.readyState==4&&xmlhttp.status==200){ //当满足这两个条件时表示请求成功,完成响应 4 = "loaded", 200 = OK
    var data=xmlhttp.responseText; //拿到服务器返回的数据
        // ...our code here...在这里进行数据返回后的操作
  	}else{
    	alert("Problem retrieving XML data");
    }
}

原生写法中的注意点

open() 的第三个参数中使用了 “true”,该参数规定请求是否异步处理，默认是异步。True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。
关于readyState
状态 名称 描述
0 Uninitialized (未初始化)还没有调用send()方法
1 Open (载入)已调用send()方法，正在发送请求
2 Sent (载入完成)send()方法执行完成
3 Receiving (交互)正在解析响应内容
4 Loaded (完成)响应内容解析完成，可以在客户端调用了
关于status(常见HTTP状态码)
状态 描述
101 切换协议，服务器根据客户端的请求切换协议
200 请求成功。一般用于GET与POST请求
301 永久重定向
302 临时重定向
303 与301类似。使用GET和POST请求查看
304 请求资源未修改，使用缓存
307 与302类似。使用GET请求重定向
404 客户端请求失败
408 请求超时
500 内部服务器错误，无法完成请求
505 服务器不支持请求的HTTP协议的版本，无法完成处理

jQuery中的Ajax

JQuery对原生Ajax做了很好的封装，使用起来非常简单方便,具体的很多方法如 $.ajax，$.post， $.get， $.getJSON等能根据不同需要进行调用，写法更加简洁，但是为了兼顾各个方法在这里我以一个通用的方法 $.ajax为例做一个简单的解析,按照下面的模式写好各个参数,就能成功进行Ajax的请求了,可能在实际中使用 $.post， $.get 这两个方法使用比较多，但是理解$.ajax 这个通用的方法能对封装原理有很好的认识。

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
    type:   //数据的提交方式：get和post
    url:    //请求地址
    async:   //是否支持异步刷新，默认是true
    data:    //需要提交的数据
    dataType:   //服务器返回数据的类型，例如xml,String,Json等
    success:function(data){
       
    }    //请求成功后的回调函数,参数data就是服务器返回的数据
    error:function(data){
    }   //请求失败后的回调函数，根据需要可以不写，一般只写上面的success回调函数
})

GET or POST?

作为Ajax最常用的两种数据提交方式，GET和POST有着自己的特点和适用场景，正确区分GET和POST的不同并根据实际需要进行选用在开发中十分重要，简单但是关键！

GET POST
后退按钮/刷新 无害 数据会被重新提交
书签 可收藏为书签 不可收藏为书签
缓存 能被缓存 不能被缓存
编码类型 application/x-www-form-urlencoded application/x-www-form-urlencoded或multipart/form-data。为二进制数据使用多重编码
历史 参数保留在浏览器历史中 参数不会保留在浏览器历史中
对数据长度的限制 最大长度为2048个字符 无限制
对数据类型的限制 只允许ASCII字符 没有限制。也允许二进制数据
安全性 与POST相比安全性较差，在发送密码与敏感信息时不要使用 安全性更高，参数不会保存在 浏览器历史或Web服务器日志中
可见性 数据用？拼接在URL中对所有人可见 数据不会显示在URL中

success和complete的区别

JQuery封装的Ajax回调函数中，success、error、complete是最常用的三个，其中，success和error很好区别，一个是请求成功调用的，另一个是请求失败调用的，从字面上就可以理解。但是success和complete容易混淆。

  • success:请求成功后回调函数。
  • complete:请求完成后回调函数 (请求成功或失败时均调用)。

区别就在于complete只要请求完成，不论是成功还是失败均会调用。也就是说如果调用了success，一定会调用complete；反过来调用了complete，不一定会调用success。(状态码404、403、301、302…都会进入complete，只要不出错就会调用)。

XML -> JSON

Ajax中的是 “x” 指的就是XML。

  • xml:可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。
  • json:现在主流的数据交互格式，前后端的交互标准，无论是前端提交给后台的数据，还是后台返回给前端的数据，都最好统一为json格式，各自接收到数据后再解析数据即可供后续使用。所以 “Ajax” 实际上已经发展为 “Ajaj”。

JSON和JSONP

json 和 jsonp 看起来只相差了一个 “p” ，然而实际上根本不是一个东西，千万别以为是差不多的两个概念。

  • json：(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
  • jsonp：一种借助“script”元素解决主流浏览器的跨域数据访问问题的方式。

Ajax跨域访问

ajax的请求与访问同样会受到浏览器同源策略的限制，不能访问不同主域中的地址。

请求头信息

name 描述
Accept 客户端支持的数据类型
Accept-Charset 客户端采用的编码
Accept-Encoding 客户端支持的数据压缩格式
Accept-Language 客户端的语言环境
Cookie 客服端的cookie
Host 请求的服务器地址
Connection 客户端与服务连接类型
If-Modified-Since 上一次请求资源的缓存时间，与Last-Modified对应
If-None-Match 客户段缓存数据的唯一标识，与Etag对应
Referer 发起请求的源地址

响应头信息

name 描述
content-encoding 响应数据的压缩格式
content-length 响应数据的长度
content-language 语言环境
content-type 响应数据的类型
Date 消息发送的时间
Age 经过的时间
Etag 被请求变量的实体值,用于判断请求的资源是否发生变化
Expires 缓存的过期时间
Last-Modified 在服务器端最后被修改的时间
server 服务器的型号

两者都可能出现的消息

name 描述
Pragma 是否缓存(http1.0提出)
Cache-Control 是否缓存(http1.1提出)

跟缓存相关的字段

强制缓存 对比缓存
expire Last-Modified 和 If-Modified-Since
cache-control Etag 和 If-None-Match

Ajax的优缺点

优点

1.页面无刷新，在页面内与服务器通信，减少用户等待时间，增强了用户体验。
2.使用异步方式与服务器通信，响应速度更快。
3.可以把一些原本服务器的工作转接到客户端，利用客户端闲置的能力来处理，减轻了服务器和带宽的负担，节约空间和宽带租用成本。
4.基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点

1.无法进行操作的后退，即不支持浏览器的页面后退。
2.对搜索引擎的支持比较弱。
3.可能会影响程序中的异常处理机制。
4.安全问题，对一些网站攻击，如csrf、xxs、sql注入等不能很好地防御。