Ajax

Ajax 实现步骤

1.创建Ajax对象

var xhr=new XMLHttpRequest()

2.告诉Ajax请求方式和地址

xhr.open('请求方式'，'地址')

3.发送请求

xhr.send()

4.获得服务器端与客户端的响应数据

xhr.οnlοad=function(){   xhr.responseText }     //xhr.responseText为客户端响应数据

 

服务器端响应的数据

项目中，一般服务器端大多数情况下把JSON对象作为响应数据的格式，客户端对JSON数据和HTMl字符串拼接

 

在http请求和响应过程中，无论是请求参数还是响应内容，如果是对象类型，会被转换为对象字符串进行传输

解决方案： JSON.parse()  //将json字符串转换为json对象

 

Get 请求参数

采取 拼接参数的形式   将拼接参数的值放在  Ajax请求方式和地址 open里面

 

Post 请求参数

1.要拼接请求参数的值要放在 发送请求 xhr.send  返回值

2.设置请求参数格式 (报文头，请求参数的格式)  //设置post请求参数必填 

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

3.服务器端接收Post请求参数 要借助第三方模块

const bodyParser = require('body-parser');

 

请求参数的格式

1.application/x-www-form-urlencoded    

name =zhang &age =20

2.application/json    //使用的时候要将json对象转换为字符串   JSON.stringify()       

注意!!!       get请求不能提交json对象数据格式     传统网站的表单提交也不支持json格式

{name:'zhangsan',age:'20'}

 

Ajax 状态码

Ajax状态码监听事件  xhr.onreadstatechange

 

Ajax 错误处理

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

解决方案：判断服务器端返回的状态码，分别进行处理,    xhr.status()  获取Http状态码

2.网络畅通 服务器端没有接收到请求，返回404状态码
解决方案：检查请求地址是否错误

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

解决方案: 服务器端错误，找后端程序员进行沟通

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

解决方案：触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理

 

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

解决方案 ：在请求地址后面加上 请求参数，保证每一次请求中的请求参数的值不同

例: xhr.open('get','http://www.******'+Math.random())

 

Ajax 属于异步请求

 

Ajax 封装

请求代码  封装到函数中   发送请求时 直接调用函数

 

 

art-template 模板引擎 使用  

1.下载 art-template 模板引擎文件并在html页面中引用

语法： <script src="./js/template-web.js"></script>

2.准备 art-template 模板

语法：<script id ="tpl" type="text/html">      //设置 typte为text/html   系统将代码作为html执行

 <div class ='box'></div>

</script>

3.告诉模板引擎将哪一个模板和哪个数据进行拼接

语法： var html = template('要使用的模板id ',{数据对象})      //template方法 在引用模板引擎后出现

4.将拼接好的html字符串添加到页面中

语法：document.getElementByid('box').innerHTMl=html

5.通过模板语法告诉模板引擎 数据和html字符串如何拼接

语法：<script id ="tpl" type="text/html">      //设置 typte为text/html   系统将代码作为html执行

 <div class ='box'>{{username}}</div>

</script>

 

FormData 对象

使用场景

1.模拟HTMl表单，自动将表单对象中的数据拼接成参数的格式

2.异步上传二进制文件

 

模拟表单的使用过程  

客户端

1.准备HTML表单   //不需要提交按钮 提交地址  不适用于get请求

2.将HTML表单转换为formdata对象

var form = document.getElementById('form');

var formdata =new Formdata(form)

3.提交表单对象

xhr.send(formdata)

服务器端

// 创建formidable表单解析对象

    const form = new formidable.IncomingForm();

    // 解析客户端传递过来的FormData对象

    form.parse(req, (err, fields, files) => {    //err 错误对象   fields 表单中的普通请求参数  files文件

        res.send(fields);

    });

 

异步上传二进制文件使用过程

客户端

files为一个集合

服务器端

// 实现文件上传的路由

app.post('/upload', (req, res) => {

    // 创建formidable表单解析对象

    const form = new formidable.IncomingForm();

    // 设置客户端上传文件的存储路径

    form.uploadDir = path.join(__dirname, 'public', 'uploads');

    // 保留上传文件的后缀名字

    form.keepExtensions = true;

    // 解析客户端传递过来的FormData对象

    form.parse(req, (err, fields, files) => {

        // 将客户端传递过来的文件地址响应到客户端

        res.send({

            path: files.attrName.path.split('public')[1]

        });

    });

});

 

FormData文件上传进度展示

// 在文件上传的过程中持续触发

xhr.upload.onprogress = function (ev) {

                // ev.loaded 文件已经上传了多少

                // ev.total  上传文件的总大小

                var result = (ev.loaded / ev.total) * 100 + '%';

                // 设置进度条的宽度

                bar.style.width = result;

                // 将百分比显示在进度条中

                bar.innerHTML = result;

            }

 

FormData 对象 方法

1.获取表单对象中属性的值

语法：formData.get('key')    //key  为 要校验的 表单内容 name的值

2.设置表单对象中属性的值

语法：formData.set('key','value')   //key  为 要校验的 表单内容 name的值   value为要设置的值 如果不存在，创建并赋值

3.删除表达对象中属性的值    //用于双重验证密码，但是提交需要一个密码即可

语法：formData.delete('key')  

4.向表单对象中追加属性值

语法：formData.append('key','value') 

注：set方法  append方法区别 ： 在属性名已存在的情况下，set会覆盖原来的值  append保存两个值

5.保存上传文件的后缀名

formData.keepExtensions  默认为不保存