form表单向服务器提交数据

**一. form**

		
	什么是form表单?    :网页中用来进行数据采集的单表
	<form action="/login" action='' method='POST' target='_blank'>
    <input type="text" name="user_name" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
  </form>

	form表单常见的属性
		action: 
				需要提交数据到目的地的url地址
		target:	
				属性用来规定 在何处打开 action URL
				:常见的有两种 _blank在新窗口打开跟_self在原窗口页面打开
		method:	提交的方式 : GET跟POST方式两种  
				get:只能提交少量,简单的数据,并且form表单中默认的提交方式就是GET
				post:提交大量,复杂的数据
		enctype:  向服务器提交的数据是否进行编码
					application/x-www-form-urlencoded (默认)
					multiparty/form-data (文件上传必须使用该值)
					text/plain (很少用)

表单提交的缺点:  
			1.会发生页面的跳转(默认行为)
			2. 提交数据以后,数据会清空,原页面的渲染会清空,对用户的体验太差
解决方式: 
			1.利用form收集数据,利用ajax来提交数据

	1.监听表单的submit事件,并在函数内容阻止页面跳转的默认行为
		document.querySelector('form').addEventListener('submit',function(e){
			e.preventDefault()
		获取表单的数据  //这里使用 serialize函数 快速获取	
		var str=document.querySelector('form').serialize()
		var xhr= XMLHttpRequest()
		xhr.open("POST",url)
		xhr.setrequesthead
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 	    							       				   
		xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')  
		xhr.onreadystatechange = function () {  if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText)  } }                              
})