AJAX
Ajax工作原理
同步和异步
同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。
异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来 。
需要知道的一些知识
URL
URL地址由三部分组成
传输协议 域名 端⼝号
传输协议
- 我们常⻅的传输协议是 http 和 https
- 只不过 http 是⼀种常⻅协议，不是很安全
- https 是⼀种加密传输协议
域名
域名就代表着 ⽹络那⼀头 那个电脑的 IP 地址
其实也就是我们要访问哪⼀个服务器
端⼝号
- 光找到服务器电脑还不⾏,还得找对⽂件夹才可以
- ⼤家都把⽂件夹编上号存储了0 ~ 255,一共256 个
- 每个⽂件夹⾥⾯还有对应的⼩⽂件夹0 ~ 255,一共256 个
- 那么一共就有256 * 256 个⽂件夹,也就是从0~ 65535
- 所以我们的端⼝号就有 65536 个,分别对应着0 ~ 65535
- ⼤家都把80端⼝号作为⼀个⽹站的默认端⼝号
- http协议默认是80端⼝号
- https协议默认是443端⼝号
XML
是一门可扩展标记语言,被设计用来传输和存储数据,都是自定义标签
HTTP
响应报文,请求报文
创建 XMLHttpRequest 对象
variable = new XMLHttpRequest(); vairable = new ActiveXObject("Microsoft.XMLHTTP");//老版本(IE5和IE6)
向服务器发送请求
xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); //XMLHttpRequest对象的open()和send()方法
open(method,url,async)
- method : 请求的类型;GET 或 POST
- url: 文件在服务器上的位置
- async: true(异步) 或 false (同步)
send(string)
- string : 仅用于 POST 请求
GET POST ?
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
- 不愿使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
GET
xmlhttp.open("GET","/try/ajax/demo_get.php",true); //一个简单的GET请求 xmlhttp.open("GET","/try/ajax/demo_get.php?=" + Math.random(),true) //向 URL 添加一个唯一的ID xmlhttp.open("GET","/try/ajax/demo_get.php?fname=Henry&lname=Ford",true) //通过GET 方法添加信息 //===================jQuery中的get post=================================通过 HTTP 请求加载远程数据 $.get('url',{a:100, b:300}, function() { //函数体 //get 请求的参数就直接在 url 后面进行拼接就可以 }) $.post('url',{a:100, b:300}, function() { //函数体 //post 请求的参数是携带在请求体中的，所以不需要再 url 后面拼接 }) //====================================== $.ajax({ //URL url: , //参数 data: {a:2, b:30}, //请求类型 type:, //响应体结果 dataType: 'json', //成功的回调 success: function(data) { }, //超时时间 timeout: 3000, //失败的回调 error: function() { } })
POST
xmlhttp.open("POST","/try/ajax/demo_post.php",true); //一个简单的POST请求 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded") //("名字","值") xmlhttp.send("fname=Henry&lname=Ford");
setRequestHeader
通常在HTTP协议里，客户端像服务器取得某个网页的时候，必须发送一个HTTP协议的头文件，告诉服务器客户端要下载什么信息以及相关的参数.
而 XMLHTTP 就是通过HTTP协议取得网站上的文件数据的，所以也要发送HTTP头给服务器。
但是 XMLHTTP 默认的情况下有些参数可能没有说明在HTTP头里，这是当我们需要修改或添加这些参数时就用到了setRequestHeader 方法.
setRequestHeader方法只是XMLHTTP为添加或修改HTTP头提供的一个接口方法而已,CONTENT-TYPE:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式是URL编码，即除了标准字符外，每字节以双字节16进制前加个“%”表示.
GET 方式是没有提交内容的,GET 传参数的方式就是通过虚拟地址传送如:GET /bb.asp?www=1234 HTTP/1.1
参数全部就只有 "www=1234" 这么多;
POST是将参数放到HTTP后面的
setRequestHeader(header,value) : header 规定头的名称; value : 规定头的值
all
服务器响应
responseText
如果来自服务器的响应并非XML, 请使用 responseText 属性
responseText 属性返回字符串形式的响应
responseXML
如果来自服务器的响应是XML, 而且需要作为 XML 对象进行解析,请使用 responseXML 属性
responseType = ‘json’;自动转换
onreadystatechange 事件
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
| XMLHttpRequest 对象的三个重要属性 | |
| onreadystatechange | 储存函数(或函数名), 每当readyState 属性改变时, 就会调用该函数 |
| readyState | 存有 XMLHttpRequest 的状态.从0到4发生变化. |
| status | 200:“OK” 404: 未找到页面 |
每当 readyState 改变时, 就会触发 onreadystatechange 事件(0-1,1-2,2-3,3-4)
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接受
- 3: 请求处理中
- 4: 请求也完成, 且响应已就绪
当 readyState 等于4 且状态为 200 时, 表示响应已就绪:
xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4 && xmlhttp.status==200) { // } }
回调函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）
ASP/PHP
解决缓存问题
open("GET","url?t="+Date.now())
请求超时 网络异常处理
//延时响应 setTimeout(() => { //设置响应体 设置允许跨域 response.send(''); },3000)
// 1. 创建对象 const xhr = new XMLHttpRequest(); //超时设置 2s设置 xhr.timeout = 2000; //超时回调 xhr.ontimeout = function() { } //网络异常 xhr.onerror = function() { }
abort() 取消请求
请求重复发送问题
// 假设有一个按钮控制着发送请求 const btn = document.querySelector('button'); let x = null; let isSending = false; // 是否正在发送请求 btn.onclick = function() { if(isSending) { x.abort(); //如果正在发送,则取消该请求,创建一个 新请求 x = new XMLHttpRequest(); //修改 isSending 的值 isSending = true; x.open("GET","URL"); x.send(); ... } }
Axios函数
axios.defaults.baseURL = ""; axios.get("",{ params: { }, headers: { }, ... }) //===========没搞明白 axios.post("",{ ... })
