AJAX通信原理
AJAX使用
-
首先是创建使用XmlHttpRequest核心对象
var xhr=null if(window.XMLHttpRequest){ //兼容主要浏览器 xhr=new XMLHttpReaquest; }else{ //兼容IE浏览器 xhr=new ActiveXObject("Microsoft.XMLHTTP"); }
-
服务发送请求(分为POST GET)
xhr.open(method,url,async); //xhr.setReaquestHeader("Content-type","application/json"); send(string);//post请求时才使用字符串参数,否则不用带参数
- 服务器响应(区分同步异步请求)
返回数据基本是字符串(responseTEXT)和XML格式(responseXML)的- 同步直接得到数据就行了
document.getElementbyId("Id").innerHTML=xhr.responseText;
- 异步需要判断一下
xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ document.getElementbyId("id").innnerHTML=xhr.responseText; } }
关于同步异步数据传输
异步传输是面向字符的传输,它的单位是字符;而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的,很明显可以知道,同步传输的速度快也可以传输大数据而且开销比较小,接收方不必对数据记性停止操作,但是也造成问题就是帧的大小会影响缓存区大小,而且会占用媒体时间,造成用户等待时间长
AJAX包含技术
几种技术的结合,其中XMLHttpRequest还没有被W3C接受 - 使用CSS 和XHTML表示
- 使用DOM模型进行交互和动态显示
- 使用XMLHttpRequest与服务器异步通信
使用javascript完成绑定和调用
GET和POST数据的区别(RESTFUL接口设计)
-
使用Get请求时,参数在URL中显示,而使用Post方式,则放在send里面
//get xhr.open("GET","/list?page=5"); //post xhr.open("post","/list"); xhr.send("page=5&pagesize=10");
- 使用Get请求发送数据量小,Post请求发送数据量大
使用Get请求安全性低,会被缓存,而Post请求反之
status状态码
状态码是标志通信中进行到哪一步,也方便调试
HTTP状态码的采用三个十位的数据进行标志,其中第一位是标志进行哪一步的归类,具体的看后面两位
这里区分AJAX中的readstatus
eadyState是XMLHttpRequest对象的一个属性,用来标识当前XMLHttpRequest对象处于什么状态。 readyState总共有5个状态值,分别为0~4,每个值代表了不同的含义具体含义看图
reference:
https://www.cnblogs.com/wanghp/p/6991554.html
https://juejin.im/post/5b1cebece51d4506ae71addf