表单常用事件，AJAX异步请求之get请求、post请求-2019/7/16

1、表单常用事件是指如何触发 或者 在什么情况下触发

• focus，当控件获取焦点时触发；blur，当控件失去焦点时触发；change，当控件的值发生变化且失去焦点时触发；input，每一次值发生变化都会触发；submit，表单提交时触发（现在很少用）。

• 格式：获取到的控件对象.addEventListener('常用事件', function (ev) {
     ev.target. ……  ;  
  }, false);

  ev是指这个常用事件。

  ev.target是指哪个控件会发生这个事件，这个事件是针对哪个控件而言的。
  

2、选择表单元素

• 通过form的name值获取到整个表单var login = document.forms.namedItem('login');

• 获取表单中的每一个控件可以 基于表单对象获取，比如var email = login.email。但在获取Select里的option元素时，可以先获取到Select元素var remember = login.Select ID，在基于这个和option的name获取，Select ID.namedItem('option ID') ；获取按钮上的文本，先获取按钮元素，然后btn.innerText。
  

3、AJAX异步请求是区别于通过浏览器URL同步请求的一种方式，不管是GET请求还是POST请求，创建AJAX请求都要遵循4个步骤。

• 1、创建请求对象var request = new XMLHttpRequest()

• 2、监听成功的回调。比如当用户输入内容符合要求时，我们要通过AJAX将数据发送服务器，这是会有一个switch判断，在default中（意味着输入符合要求），有一个监听成功回调request.addEventListener('readystatechange', 函数名, false);

  其中，'readystatechange'是一个触发事件，意思是当文档的readyState属性发生改变时会触发。readyState一共有4个值，0: 请求未初始化，1: 服务器连接已建立，2: 请求已接收，3: 请求处理中，4: 请求已完成，且响应已就绪。

  其中，函数内部会有一个判断，当readyState === 4时会执行一个什么操作，
  

• 3、设置请求参数。request.open('GET/POST', 'XXXXX.php', true);

  open()方法中，第一个参数是HTTP请求方式，比如GET,POST;第二个参数是URL，指服务器上的文件的路径，该文件可以使任何类型的文件，比如txt、xml、php ；第三个参数为true或false，true表示异步执行，false表示同步执行（不推荐）。
  

• 4、发送异步请求。

  1）如果是GET请求，需要先对控件中输入的值进行编码

        var data = encodeURIComponent(input.value)，这一步在第三步之前，这个input是用户ID输入框

        此时第三步就会变成request.open('GET', 'XXXX.php?user_id='+data, true);

        第四步，发送请求，request.send(null);

       （ encodeURIComponent():对值中的非法字符进行编码,如空格等,解码:decodeURIComponent()）
  

  2）如果是POST请求

       需要先以表单键值对方式封装需要发送的数据（要在发送请求之前）
               var data = 'username='+username+'&email='+email+'&password='+password+'&remember='+remember;
       然后设置请求头以表单数据格式发送数据（要在发送请求之前）
              request.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=utf-8');
       第四步，发送请求，request.send(data);