Ajax（一）

概述

浏览器提供的方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验

应用场景

页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示文字下拉列表

运行环境

Ajax技术需要运行在网站环境中才能生效Node创建服务器，实现静态资源访问功能 //引入express框架 const express = require('express'); //路径处理模块 const path = require('path'); //创建web服务器 const app = express(); //静态资源访问服务功能 app.use(express.static(path.join(__dirname, 'public'))); //监听端口 app.listen(3000); //控制台提示输出 console.log('服务器启动成功');

Ajax 运行原理

Ajax的实现步骤

创建Ajax对象 var xhr = new XMLHttpRequest(); 告诉Ajax请求地址 xhr.open('get', 'http://www.example.com'); 发送请求 xhr.send(); 获取服务器给客户端的响应数据 xhr.onload = function () { console.log(xhr.reponseText); }

例：

客户端 var xhr = new XMLHttpRequest(); xhr.open('get', 'http://localhost:3000/first'); xhr.send(); xhr.onload = function () { console.log(xhr.reponseText); } 服务器端 //引入express框架 const express = require('express'); //路径处理模块 const path = require('path'); //创建web服务器 const app = express(); //静态资源访问服务功能 app.use(express.static(path.join(__dirname, 'public'))); app.get('/first', (req, res) => { res.send('Hello Ajax'); }); //监听端口 app.listen(3000); //控制台提示输出 console.log('服务器启动成功'); 控制台输出：Hello Ajax

服务器端响应的数据格式

服务器端大多数情况下会以JSON对象作为响应数据的格式当客户端拿到响应数据时，要将JSO数据和HTML字符进行拼接，然后将拼接的结果展示在页面中在 http 请求与响应的过程中，无论时请求还是响应内容，如果是对象类型，最终都会被转换成对象字符串进行传输json 字符串转换为 json 对象 JSON.parse();

请求参数传递

GET请求 xhr.open('get', 'http://www.example.com?name=XXX&age=20'); POST请求 xhr.setRequestHeader('Context-Type', 'application/x-www-form-urlencoded'); xhr.send('name=XXX&age=20');

运行原理及实现

请求报文：在HTTP请求和响应的过程中传递的数据块就是报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式

请求参数的格式：application/x-www-form-urlencoded 或 application/json将JSON对象转换为JSON字符串 JSON.stringify(); get 请求是不能提交 JSON 对象数据格式的，传统网站的表单提交也是不支持 JSON 对象数据格式的

获取服务器端的响应

Ajax 状态码

0：请求未初始化（还没有调用 open()）1：请求已经建立，但是还没有发送（还没有调用 send()）2：请求已经发送3：请求正在处理中，通常响应中已经有部分数据可以用了4：响应已经完成，可以获取并使用服务器的响应了

获取 Ajax 状态码

获取 Ajax 状态码 shr.readyState();onreadystatechange 事件：当 Ajax状态码 发生变化时将自动触发该事件

两种方式的比较

区别onload 事件onreadystatechange 事件是否兼容 IE 低版本不兼容兼容是否需要判断 Ajax 状态码不需要需要被调用次数一次多次执行效率高不高

Ajax 错误处理

网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果

判断服务器端返回的状态码，分别进行处理 xhr.status();//获取http状态码

网络畅通，服务器端没有接收到请求，返回404状态码

检查请求地址是否错误

网络畅通，服务器端能接收到请求，服务器端返回500状态码

服务器端错误

网络中断，请求无法发送到服务器端

不会触发 xhr.onload 事件，会触发 xhr.onerror 事件，在 onerror 事件处理函数中对错误进行处理

低版本IE浏览器的缓存问题

问题： 在低版本的IE浏览器中，Ajax请求有严重的缓存问题，请求的地址不发生变化的情况下，只有第一次请求会真正发送到服务器，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端拿到的依然是缓存中的旧数据

解决方案： 在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同 xhr.open('get', 'http://www.example.com?t=' + Math.random()); 或者 xhr.open('get', 'http://www.example.com?t=' + Date.now());

Ajax 封装

基本封装函数 function ajax(options) { //创建Ajax对象 var xhr = new XMLHttpRequest(); //配置Ajax对象 xhr.open(options.type, options.url); //发送请求 xhr.send(); //监听xhr对象的onload事件 //当xhr对象接收完响应数据后触发 xhr.onload = function () { optipns.success(xhr.reponseText); } } ajax({ type:'get', url:'http://www.example.com', sucess:function(data){ console.log(data); } }); 带请求参数的封装函数 请求参数的位置问题： 将请求参数传递到 Ajax 函数内部，在函数内部根据请求方式的不同将请求参数放在不同的位置 注 get：放在请求地址的后面        post：放在 send 方法中请求参数的格式问题 application/x-www-form-urlencoded ：参数名称=参数值&参数名称=参数值 application/json：{name: ‘zhangsan’, age:20} function ajax(options) { //存储默认值 var defaults = { type: 'get', url: '', data: {}, header: { 'Content-Typr': 'application/x-www-form-urlencoded' }, sucess: function () {], error: function () {} }; //使用options对象中的属性覆盖defaults对象中的属性 Object.assign(defaluts, options); //创建Ajax对象 var xhr = new XMLHttpRequest(); //拼接请求参数的变量 var params = ''; for(var attr in defaults.data) { params += attr + '=' + defaults.data[attr] + '&'; } //将参数最后面的&截取掉 params = params.substr(0, params.length - 1); //配置Ajax对象 xhr.open(defaults.type, defaults.url); if(defaults.type == 'post') { var contentType = defaults.header['Content-Type']; xhr.setRequestHeader('Content-Type', 'appllication/x-wwww-form-urlencoded'); //判断请求参数的类型 if(ContentType == 'application/json') { xhr.send(JSON.stringify(defaults.data)); } else { xhr.send(params); } } else { xhr.send(); } //发送请求 xhr.send(); //监听xhr对象的onload事件 //当xhr对象接收完响应数据后触发 xhr.onload = function () { var contentType = xhr.getPesponseHeader('Content-Type'); var reponseText = xhr.reponseText; if(contentType.includes('application/json')) { reponseText = JSON.parse(reponseText); } if(xhr.status == 200) { defaults.sucess(xhr.responseText, xhr); } else { v.error(xhr.reponseText, xhr); } } } ajax({ type:'get', url:'http://www.example.com', header: { 'Content-Type':'x-www-form-unlencoded'; }, data: {name: 'zhangsan', age: 20}, sucess:function(data, xhr){ console.log(data); }, error:function(data, xhr){ } });