前后端交互工具---ajax
目录
1.什么是ajax?
ajax (全名：Asynchronous Javascript And XML)其实就是异步的javaScript和XML。
XML：<html>这是html标签，XML格式是一样的 可以自定义<name> <age> 满足标记语言的格式就可以了。
ajax是一门新语言，是综合HTTP异步通信 、JS、XML、以及JSON等多种网络技术的一种编程模型。
AJAX ~= JS+ xml+JSON + HTTP通信，本质就是在HTTP协议的基础上以异步的方式与服务器进行通信。
2.同步和异步的区别
在了解ajax前首先先了解下同步和异步的区别。
同步请求（false）：
同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。
异步请求（true）：
将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。
使用异步的场景：网络请求,本地内容读取，I/O读取、数据库操作 ---耗时操作
使用同步的场景：主线程
常见异步代码：setInterval setTimeout 所有的事件 ,ajax请求。
3.ajax优缺点
优点：
1.ajax最大的优点就是页面无需刷新便可向服务器传输或读写数据。（在读取数据的过程中，用户所面对的不是白屏，而是原来页面的转台，或者正在更新的信息提示状态，只有当接收到全部数据后才更新相应部分的内容，而这种更新也是瞬间的用户几乎感觉不到。）
2.使用异步的方式与服务器通信，不需要中断操作；
3.可以把服务端的工作转嫁给客户端，最大程度减少冗余请求；
4.基于标准化的并被广泛支持的技术，ajax不需要下载插件或者小程序；
缺点：
1.对搜索引擎的支持比较弱；（搜索引擎的支持度不够，数据都不在页面上，搜索引擎搜索不到）
2.安全问题，ajax暴露了与服务端交互的细节；（对IT企业带来了新的威胁，ajax就如同对企业数据建立了一个直接通道，这使开发者在不经意间暴露比以前更多的数据和服务器逻辑）。
3.ajax不支持浏览器返回按钮（ajax干掉了back和history功能，即对浏览器机制的破坏）。
4.ajax请求处理格式：
4.1 四个步骤：
1.通过XMLHttpRequest类创建xhr对象；
2.为xhr对象添加属性与回调方法；
3.令xhr对象执行open()方法，指明请求被发往某处；
4.令xhr对象执行send()方法，发出请求。
代码实现：
利用ajax发送GET请求。
//1.创建对象
var xhr;
if (window.XMLHttpRequest){//普通浏览器
xhr=new XMLHttpRequest();
}else{//老版本IE
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.监听网络变化
xhr.onreadystatechange = function(){
console.log(xhr.readyState)//状态码
console.log(xhr.status)//响应码
if(xhr.readyState == 4){
if(xhr.status == 200){
console.log(xhr.responseText)
}else{
console.log(xhr)
}
}
// 3.打开一个请求地址
// xhr.open(请求方式,请求地址,是否异步) 请求地址如果和当前页面在同一服务器中可写成相对地址
xhr.open("GET","http://localhost:8888/demo/02.php",true)
//4.发送请求
xhr.send();如果是发送POST请求，在调用send方法之前先设置请求头；本质上是一个对象，存储请求数据的信息。
//3 打开一个请求地址
xhr.open("POST","./04.php",true)
//3.5 设置请求头（POST请求时设置）
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");4.2 GET和POST请求方式的区别
1. get的数据在URL是可见的，POST请求不显示在URL中；
2. get对长度是有限制的，POST长度是无限的；
3. get请求后，按后退按钮，刷新按钮无影响；POST数据会被重新提交；
4. get请求的数据可以收藏为书签，POST请求到的数据不可收藏为书签；
5. GET历史参数会被保留在浏览器里，POST不会保存在浏览器中的；
6. get与POST相比，GET安全性较差，因为所发的数据是URL的一部分；
7.GET编码类型只有一种（application/x-www-form-urlencoded），POST的编码类型有很多种（application/x-www-form-urlencoded，multiport/form-data..）；
这里要说一下状态码和响应码。
4.3 AJAX状态码
ajax状态码 ---- xhr.readyState：用来表示一个ajax请求的全部过程中的某一个状态。
| 0 | 没有建立连接 |
| 1 | 请求还没有发送，但是连接已建立 |
| 2 | 发送请求，将header和后端状态码收到 |
| 3 | 接收响应数据中 |
| 4 | 得到了服务器完整响应的数据 |
4.4 AJAX响应码
ajax响应码 ---- xhr.status：
| 1xx | 消息状态码，表示请求已被接收，需要继续处理 101：切换协议 |
| 2xx | 请求成功，请求已成功被服务器接收、理解并接受 200：成功 |
| 3xx | 重定向，需要后续操作才能完成这一请求 304：未修改 |
| 4xx | 请求错误，请求含有词法错误或无法被执行 404：未发现指定网址 |
| 5xx | 服务器错误，服务器在处理某个正确请求时发生错误 500：服务器发生错误 |
只有当状态码为4（xhr.readyState == 4）且响应码为2xx（xhr.status == 200）的时候代表ajax请求成功，本次请求正常完成。
5. 使用原生js封装一个ajax
(function(){
function myAjax(paramsObj){
// 判断参数类型
if(!(paramsObj instanceof Object)){
throw new TypeError("参数必须是一个对象！")
}
// 处理参数
if(paramsObj.type.toUpperCase() == "POST"){
var formData = new FormData()
for(var pro in paramsObj.data){
formData.append(pro,paramsObj.data[pro])
}
}else if(paramsObj.type.toUpperCase() == "GET"){
var arr = []
for(var pro in paramsObj.data){
var str = pro + '=' + paramsObj.data[pro]
arr.push(str)
}
var canshuStr = arr.join("&")
// 拼接到url后面
paramsObj.url += paramsObj.url.indexOf("?") == -1 ? "?" + canshuStr : '&' + canshuStr; }else{
throw new TypeError("请求的数据类型错误")
}
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Micsrosoft.XMLHTTP")
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
// console.log(xhr.responseText);
paramsObj.success(xhr.responseText);
}else{
paramsObj.error(xhr)
}
}
}
xhr.open(paramsObj.type,paramsObj.url,true)
if(paramsObj.type.toUpperCase() == "POST"){
xhr.send(formData)
}else if(paramsObj.type.toUpperCase() == "GET"){
xhr.send()
}else{
throw new TypeError("请求的数据类型错误")
}
}
window.myAjax = myAjax;
})()