Ajax介绍和基本应用方法

Ajax基础

传统的node 存在的问题

1）网速慢的情况下，页面加载时间长，用户只能等待
2）表单提交后，如果一项内容不合格需要重新填写所有表单内容
例如：如果用户注册的邮箱地址已经被别人注册过了，服务器在返回错误信息的同时会将从定向回用户表达页面，由于页面发生了跳转，用户填写的信息都消失掉了，此时用户需要填写所有的用户信息。
3)页面跳转，需要重新加载页面，造成资源的浪费，增加用户等待时间。
原因：底层的的实现是一样的，再重新加载页面的同时，服务器要调取资源，渲染到页面，这个过程浪费时间。

Ajax概述：

中文音译：阿贾克斯
属于js中的知识点
Ajax是浏览器提供的一套方法，通过调用这些方法可以实现页面的无刷新更新数据，提高用户浏览网站应用的体验。
Ajax技术实现了用户浏览网页的过程中局部的更新数据，提高了应用体验。（再不刷新页面的过程中向服务器发送请求家在数据）

Ajax的应用场景

1）页面上拉加载更多数据
2）列表数据刷新分页
3）表单项离开焦点数据验证
4）搜索框提示文字下拉列表
（用户在输入框中输入文字时候，根据页面文字在服务器搜索，在下方提示相关信息）

Ajax的运行环境

Ajax技术需要运行在网站环境中才能生效。在Node创建的服务器作为网站服务器。实现静态资源的下面。（要有Node基础）

Ajax运行原理与实现
1）传统的请求处理方式
浏览器（请求）—>服务器端（响应）------>浏览器
注意：这个过程中开发人员不可控
2）Ajax的处理方式
浏览器端（创建）----> Ajax （请求）----->服务器端（响应）------->Ajax（响应）----->浏览器
注意：这个过程之中开发人员可控

Ajax的实现步骤

1）创建Ajax对象

var xhr = new XMLHttpRequest();

2)告诉Axja的请求地址以及请求方式

xhr.open(‘get’, ’http://www.example.com’);

3)发送请求

xhr.send();

4)获取服务器给用户端的响应数据

xhr.onload = function(){ console.log(xhr.responseText); }

服务器端响应的数据格式

规定：在网络传输中都是以字符串的形式来传输数据的。
在大部分项目中，服务器端大多数情况下会议JSON对象作为响应数据的格式。当客户拿到响应数据时候，将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中。

在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转化成对象字符串来进行传输。

JSON.prase() //将json字符串转换为json对象

请求参数传递
传统网站表单的递交

GET请求方式

Xhr.open(‘get’, ‘http://www.example.com?name=zhangsna&age=20’);

POST请求方式
//post请求参数和get请求参数最大的区别是，post要设置请求报文头

Xhr.setRequestHeader(‘Content-Type’,
‘application/x-www-form-urlencoded’) Xhr.send(‘name=zhangsan&age=20’);

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

请求参数格式

JSON.stringify() //将json对象转换为字符串

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