1. ajax四步
- 什么是同步，什么是异步
同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待 卡死状态
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随 意做其他事情，不会被卡死
- 运行原理机制
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种功能。
1. 创建一个XMLHttpRequest的实例 为xhr
let xhr = new XMLHttpRequest();
2. 为xhr.onreadystatechange设置事件监听
xhr.onreadystatechange = function (){
if(xhr.readyState === 4){
switch (xhr.status){
case 200:{
console.log(JSON.parse(xhr.responseText));
break;
}
case 404:{
console.log("页面或者资源找不到");
break;
}
}
}
}
3. 调用xhr.open(请求方式,请求地址,同步异步)
xhr.open("GET","https://cnodejs.org/api/v1/topicss",false);
4. 发送请求的数据
xhr.send(null)
console.log(xhr);
$.ajax
$.ajax({
'url': 'url', // 提交的路径地址
'type':'GET', // 发送请求的方式
'data':'data', // 要发送到服务器的数据
'datatype':'text', // 指定传输的数据格式
'async':false, //默认异步
'success': res=>{ // 请求成功后执行的代码
},
'error':rej=>{ // 请求失败后执行的代码
}
})
2. HTTP常见状态码
http状态码分类：
100 - 199 提示信息 ------ 表示请求正在处理
200 - 299 成功 -------- 表示请求正常处理完毕
300 - 399 重定向 ------- 要完成请求必须进行更近进一步的处理
400 - 499 客户端错误 ------- 请求有语法错误或请求无法完成
500 - 599 服务端错误 ------- 服务器处理请求出错
常见的状态码有哪些？
200：请求成功，浏览器会把响应体内容显示在浏览器中
404：客户端问题，请求资源没有找到
400：语义有误，当前请求无法被服务器理解
401：当前请求需要用户验证
403：服务器已经理解请求，但是拒绝执行它
500：请求资源找不到了，
301/302/303：网站搬家了，重定向
3. 同源和跨域
1. 同源：
协议: 域名: 端口号 都一样 就是同源 如果有一个不一样 就是非同源(跨域)
JSONP原理
在script的世界中,没有同源跨域这一说,只要你给我SRC属性中的地址是一个合法地址,SCRIPT都可以把对应的内容请求回来;
同源政策的目的
同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie，B网站是不能访问的。
随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax 请求，如果请求，浏览器就会报错。
2. 跨域
(不同源) JSONP CORS(后端) Proxy(代理)
跨域是前后端分离，出现的问题。前端自己部署服务器 nginx + docker
同源策略已经不常用了，都是跨域
跨域牵扯到协议和域名
协议：(http/https/ftp/smtp/pop3)
域名：(www.一级域名.二级域名.顶级域名(org/com/cn/edu/gov))
|