ajax

一、表单

form的使用：
action = 'URL'规定当提交表单时向何处发送表单数据，action = '/form.html'表示直接在当前链接后添加/form.html
method = 'get/post'方法
get:拼装成一个URL
post：直接提交，更安全
*使用form页面会跳转，只能提交给后台，后台返回的数据不能获取

二、ajax

维基百科：

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。

MDN:

（异步JavaScript和XML）Asynchronous JavaScript + XML, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object。当使用结合了这些技术的AJAX模型以后， 网页程序能够快速地将渐步更新呈现在用户界面上，不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

作用：传统的Web应用允许用户端填写表单(form)，当提交表单时就像网页服务器发送一个请求。服务器接受并处理传来的表单，然后送回一个新的页面（虽然这个页面大部分内容没有改变），因此这个做法浪费了许多带宽。ajax异步的处理方法，使页面不用每次发请求的时候都要重新加载整个页面，只对页面的局部进行更新可以节省网络带宽，提高页面的加载速度，从而缩短用户的等待时间，改善用户体验。

由于使用form提交表单进行交互体验较差，2005年出现了ajax。

ajax一来的是现有的CSS/HTML/Javascript，其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应，实现在不刷新页面的情况下和服务器端进行数据交互。

var xhr = new XMLHttpRequest() //创建一个对象，HttpRequest()是一个函数，通过new创建一个对象
xhr.open('GRT','/hello.json',true)//通过open的方法设置参数，get方法，地址是/hello.json，异步的方式
xhr.send() //发送
//此时可以用同步的方法，直接获取，但是同步的方法会使页面获取到数据之后再继续执行，会导致页面白屏或卡住，所以用异步的方法处理
xhr.addEventListener('load',function(){
  if((xhr.status >= 200 && xhr.status >300) || xhr.status === 304){
      var data  = xhr.responseText
      console.log(data)
  }
})
//xhr.onload相当于xhr.readyState === 4
//status表示服务器的状态，例如404，表示数据是否正常
//readyState表示交互的流程有没有结束，交互完毕一定是4

readyState有五种可能的值：
0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法。
1 (载入)：已经调用open() 方法，但尚未发送请求。
2 (载入完成)： 请求已经发送完成。
3 (交互)：可以接收到部分响应数据。
4 (完成)：已经接收到了全部数据，并且连接已经关闭。

level2对象
xhr.timeout = 3000; 设置xhr请求超时时间
xhr.responseType = 'text'; 设置响应返回的数
据格式
onsuccess 表示请求成功并返回信息

mock

模拟数据生成器，旨在帮助前端脱离后端进行开发