来公司实习也有一段时间了,该做一下总结了
第一开始来公司的时候我就只是单纯的只会一点html+css+js的基础知识，vue也了解一点。
通过这三个月的实习经历，我学到的东西一直没有得到沉淀，所以今天我打算把之前学到的东西好好总结归纳一下
这一篇就仔细讲一下ajax
1.ajax
没来公司之前我一直不知道ajax的作用是什么,只是通过面试题知道这个东西很重要。
上手第一个项目后，我才深刻体会到ajax的作用以及使用方法(代码如下)
var xhr = new XMLHttpRequest()
xhr.send(null)//这行代码是必要的，如果不向后台传东西直接传null就行了
xhr.open(GET,'http://156.124.55.120.3036/allListName')//这个方法是设置请求头，第一个参数是请求方法,第二个参数是请求的url
xhr.onreadystatechange = function(){//这个方法是当请求成功的回调函数
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText)
}
}
关于请求方式这里还有几点补充的,常用的请求方式就get、post，但是其他的方法还是要了解
1.get 主要是向后台请求数据的方法
2.post 主要是向后台请求数据并且向后台传一个字段(对象、JSON、FormData)
3.put 主要是向后台传文件的请求方式
4.delete 主要是向后台发送删除请求然后后台根据请求信息去删除文件
5.head 获得报文首部
6.options 询问支持的方法
7.trace 追踪路径
8.connect 要求用隧道协议连接代理
ajax返回的状态：
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
2.用promise封装的ajax函数
function ajax(url){
return new Promise((resolve,reject)=>{
let xhr = new XMLHttpRequest();
xhr.open("GET",url);
xhr.send();
xhr.onreadystatechange = ()=>{
if(this.status == 200 && this.readyState === 4){
resolve(JSON.parse(this.response))
}else{
reject("加载失败")
}
}
xhr.onerror=()=>{
reject(this)
}
})
}
用promise方法封装的好处是promise是es6的新属性，是一种优秀的执行异步函数的方法，避免出现回调地狱那种令人费解的代码格式，
同时你要是想所有的请求全都成功再执行操作，也可以使用promise.all方法，这个方法是当所有的promise状态全部都变为resolve才会执行 下一步的操作
3.什么是跨域以及跨域的解决方法
const jsonp = ({ url, params, callbackName }) => {
const generateUrl = () => {
let dataSrc = '';
for (let key in params) {
if (Object.prototype.hasOwnProperty.call(params, key)) {
dataSrc += `${key}=${params[key]}&`;
}
}
dataSrc += `callback=${callbackName}`;
return `${url}?${dataSrc}`;
}
return new Promise((resolve, reject) => {
const scriptEle = document.createElement('script');
scriptEle.src = generateUrl();
document.body.appendChild(scriptEle);
window[callbackName] = data => {
resolve(data);
document.removeChild(scriptEle);
}
})
}
由于ajax受到同源策略的影响，不能进行跨域请求然后jsonP可以很好的解决这个问题，但是jsonP也有缺点，就是只能用get请求
同源策略限制内容有：
Cookie、LocalStorage、IndexedDB 等存储性内容
DOM 节点
AJAX 请求发送后，结果被浏览器拦截了
但是有三个标签是允许跨域加载资源：
<img src=XXX>
<link href=XXX>
<script src=XXX>
4.常见的HTTP状态码
1XX(信息性状态码)表示接收的请求正在处理
2XX(成功状态码)表示正常处理完毕
3XX(重定向状态码)表示进行附加操作以完成请求
4XX(客户端错误状态码) 表示服务器无法处理请求
5XX(服务器错误状态码) 表示服务器请求处理出错
