@文章来源：拉钩大前端就业训练营-念念
ajax
- 传统网站的问题
- 网速慢的下，页面加载时间长 用户只能等待
- 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
- 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间
ajax概述
浏览器提供的一套方法，实现在不刷新页面的情况下，更新页面数据，提高用户浏览网站应用的体验
-
应用场景
- 页面上拉加载数据
- 列表数据无刷新分页
- 表单项离开焦点数据验证
- 搜索框提示文字下拉列表
ajax是运行在网站才能生效
-
实现步骤
-
- 创建ajax对象
var xhr = new XMLHttpRequest(); -
2.告诉ajax请求地址以及请求方式
xhr.open('get','http://www.baidu.com'); -
3.发送请求
xhr.send(); -
4.获取服务器与客户端的响应数据 不兼容ie低版本 调用一次
xhr.onload = function(){ console.log(xhr.responseText); };
-
-
服务端响应数据的格式：json对象作为响应数据的格式
- 在http请求与响应的过程，进行传输的是字符串类型
- JSON.parse() 将JSON字符串，转换为JSON对象
-
参数传递
-
get请求方式
- 直接拼接在请求地址的后面
http://localhost:3000/get?' + params -
post请求方式
-
传递一般格式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(params); // 服务端 const bodyParser = require('body-parser'); // 解析urlencoded app.use(bodyParser.urlencoded({ extended: true })); -
传递json格式
// 设置请求参数格式的类型 xhr.setRequestHeader('Content-Type', 'application/json'); // JSON.stringify() 转成json字符串 xhr.send(JSON.stringify({ name: 'muhan', age: 18 })); // 服务器端 const bodyParser = require('body-parser'); // 解析json app.use(bodyParser.json({ extended: true }));
-
-
获取服务端的响应 兼容ie低版本 调用多次
xhr.onreadystatechange = function () { // 2.请求已经发送了 // 3.已经接收到服务器的部分数据了 // 4.服务器端的响应数据已经接收完成 console.log(xhr.readyState); // 如果状态 = 4 数据接收完成 if (xhr.readyState === 4) { console.log(xhr.responseText); } } -
错误处理
-
网络畅通，服务器能接收到请求，服务器返回结果不是预期结果
可以判断服务器返回的状态码，分别进行处理 xhr.status获取http状态码
-
网络畅通，服务端没有接收到请求，返回404状态码
检查请求地址是否错误
网络畅通，服务端能接收到请求，服务器端返回500状态码
服务端错误，告诉后端程序员去调试服务器端
-
网络中断，请求无法发送到服务器端
触发xhr对象下onerror事件，在onerror事件处理函数中对错误进行处理
-
-
ajax状态码 与 http状态码
- ajax状态码： 表示ajax请求的过程状态 ajax对象返回的
- http状态码： 表示请求的处理结果，是服务器端返回的
-
ajax异步编程
- 同步 ： 上一行代码执行完才能执行下一行代码，代码逐行执行
- 异步：程序不会等待异步代码执行完成后再去执行后面的代码。等待后续代码执行完毕后再看异步代码是否返回结果
- ajax封装
请求数据的格式
XML格式 不常用
-
JSON格式
/* json数据不需要存在变量中 结束时不需要写分号 json数据中的属性名必须加引号 */ var str = '{"name":"tom","age":18}'; // 转json JSON.stringify(obj); // json转对象 JSON.parse(str);
- json-server部署
// json-server --watch db.json
aixos
-
axios(config) config对象格式的配置
- URL
- method
- baseURL 传递相对前缀，后续就可以省略
- headers 即将被发送的自定义请求头
- params 请求参数
- data 发送的数据
- timeout 请求超时时间
- responseType 从服务器响应的数据类型 默认是json
-
全局默认配置
- axios.defaults.baseURL = 'http://api.exaple.com'
- axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
-
拦截器
// 请求拦截 axios.interceptors.request.use(function(config){ config.params = { id:2 }; config.baseURL = 'http://localhost:3000'; return config; }); // 响应拦截 axios.interceptors.response.use(function(response){ return reponse.data; }) axios('/posts') .then(function(res){ console.log(res); }) .catch(function(error){ console.log(error); });
XMLHttpRequest2.0
- xhr.onload事件 -- 只在请求完成时触发
- xhr.onprogress事件 -- 只在请求进行中触发
- response属性 以对象形式描述响应体 在调用open()初始化请求之后，在调用send()发送请求到服务器之前设置方可生效
跨域与同源
同源： 浏览器的一种安全协议，所谓同源就是域名，协议，端口完全相同
-
jsonp原理跨域解决：
- jqeury中的jsonp
$.ajax({ dataType:'jsonp' })-
cors跨域 服务端设置的
"Access-Control-Allow-Origin:*" // 所有的源都可以被访问
模板引擎
减少字符串的拼接
在模板里面解析json 然后跟html内容拼接，性能会更好
-
artTemplate
// 参数1： 模板的id // 参数2： 接收一个对象型的数据，数据会传给模板，对象中每个属性名可以直接当变量使用 $('#box').html(template('tem'),{ name:'tom' });
