Ajax基础

ppzhang
108 阅读3分钟

传统网站中存在的问题

  • 网速慢的情况下，页面加载时间长，用户只能等待
  • 表单提交后，如果一项内容不合格，需要重新填写所有表单内容
  • 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间

Ajax概述

Ajax：阿贾克斯

是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高浏览网站应用的体验。（在用户浏览网页时局部刷新页面）

Ajax的应用场景

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

Ajax 的运行环境

Ajax技术需要运行在网站环境中才能生效，当前课程会使用Node创建的服务器做为网站服务器。

Ajax 运行原理

在传统的网站应用当中，都是由浏览器本身向服务器端发送请求，由浏览器本身接收服务器端响应来的数据，由于浏览器在发送请求和响应的时候不能处理用户的其他操作，比如浏览拉动页面。比较影响用户体验。

Ajax要实现在浏览期间向服务器端发送请求，并将响应来的数据在不刷新页面的前提下，更新在页面当中。这样浏览器就可以不处理请求和响应转而处理用户的操作。

image.png

Ajax发送请求和响应期间开发人员可控，我们可以做加载提示进一步提升用户体验。

Ajax 的实现步骤

  1. 创建Ajax对象
var xhr = new XMLHttpRequest();

XML-服务器端传输数据格式，现在使用的是JSON格式，XML仅做了解。

  1. 告诉Ajax请求地址以及请求方式
xhr.open('get', 'http://www.example.com');
  1. 发送请求
xhr.send();

由于请求受网络速度快慢的影响，不确定具体时间，所以不能在send()方法后面直接获取请求结果，我们需要为xhr对象下面的onload事件添加事件处理函数。

  1. 获取服务器端给与客户端的响应数据
xhr.onload = function () {
    console.log(xhr.responseText);
}

服务器端响应的数据格式

在真实的项目中，服务器端大多数情况下会以JSON对象做为响应数据的格式。当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中。

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

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

请求参数传递

传统网站表单提交

 <form method="get" action="http://www.example.com">
     <input type="text" name="username"/>
     <input type="password" name="password">
 </form>
 <!– http://www.example.com?username=zhangsan&password=123456 -->
  • GET 请求方式
xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');
  • POST 请求方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('name=zhangsan&age=20');

请求报文

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

image.png

请求参数的格式

  1. application/x-www-form-urlencoded
 name=zhangsan&age=20&sex=男
  1. application/json
{name: 'zhangsan', age: '20', sex: '男'}

在请求头中指定 Content-Type 属性的值是 application/json，告诉服务器端当前请求参数的格式是 json。

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

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

avatar
文章
阅读
粉丝