有关前后端数据交互传统表单式提交get对于get方式的请求，系统会自动的将name属性和velue属性拼接起来，然后添加

传统表单式提交

get

<form action='sdjfl/jadjf' method='get'>
<input type='text' name='username' id='userid'>
<input type='number' name='password' id='userpassword'>
</form>

对于get方式的请求，系统会自动的将name属性和velue属性拼接起来，然后添加在url？后的地址上

服务器的接收端，则会用如下方式来接收处理

(req,res)=>{
    req.query.id   表示提交表单中的id属性中的值
}

post

同样是上面的代码，但是method='post'提交方式改变为了post方式

此时的接收方式也有了变化，由于post提交方式传送的文件是Json格式

所以我们需要在启动文件js下引入第三方库，方便对json数据对象进行解析

const bodyParser=require('body-parser')

app.use(bodyParser.urlencoded({ extended: false }))

对传递过来的json对象先进行解析

然后在路由req.body即可获得传递的json对象

第三方模块formidable

作用：解析表单，支持get请求参数，post请求参数、文件上传

const formidable=require('formidable')
创建表单解析对象
const form = new formidable.IncomingForm();
form.uploadDir = "/my/dir"; 设置文件上传路径
form.keepExtensions = false; 是否保留后缀
form.parse(req,(err,fields,files)=>{
    err:错误信息
    fields:普通的表单数据
    files:文件信息
}

Ajax技术

可以实现不刷新页面情况下，提高用户浏览网站体验

首先通过ajax请求可以不用刷新页面就能传递数据

var xhr=new XMLHttpRequest();
xhr.on('get','请求地址')
xhr.send();
xhr.onload()=function(){
    console.log(xhr.responseText)
}

上述就是启动ajax的初始代码，由此可见也是和之前表单提交类似，向对应路由发送请求

其中传递方式也同样分为get和post

两者区别如此下：

因为get请求方式是在请求末尾添加所传信息内容

1、send()括号内为空，不需要再次传递数据，同时在信息传递过程中，所有的对象信息都会自动转换为字符串格式

2、在于get请求中，我们仍然用name=zhangsan&age=20格式传递参数

在post请求中，我们要明确请求内容的类型

xhr.setRequestHeader('content-Type','application/x-www-form-urlencoded')

对应的请求格式是name=zhangsan&age=20

post要将请求内容放到xhr.send()中

当我们要用post请求传递JSON格式的数据时，我们要更改

xhr.setReuestHeader('content-Type','application/json')
将json格式转换为字符串格式传递
xhr.send(JSON.stringify{对象})

3、在服务器中，get请求仍然用req.query来处理请求在服务器中，post请求仍然用req.body来处理请求，如果是json格式的数据，我们要用bodyParser.json()来解析请求

封装一个ajax函数

function ajax (options) {
	// 默认值
	var defaults = {
		type: 'get',
		url: '',
		async: true,
		data: {},
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		success: function () {},
		error: function () {}
	}
	// 使用用户传递的参数替换默认值参数
	Object.assign(defaults, options);
	// 创建ajax对象
	var xhr = new XMLHttpRequest();
	// 参数拼接变量
	var params = '';
	// 循环参数
	for (var attr in defaults.data) {
		// 参数拼接
		params += attr + '=' + defaults.data[attr] + '&';
		// 去掉参数中最后一个&
		params = params.substr(0, params.length-1)
	}
	// 如果请求方式为get
	if (defaults.type == 'get') {
		// 将参数拼接在url地址的后面
		defaults.url += '?' + params;
	}

	// 配置ajax请求
	xhr.open(defaults.type, defaults.url, defaults.async);
	// 如果请求方式为post
	if (defaults.type == 'post') {
		// 设置请求头
		xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
		// 如果想服务器端传递的参数类型为json
		if (defaults.header['Content-Type'] == 'application/json') {
			// 将json对象转换为json字符串
			xhr.send(JSON.stringify(defaults.data))
		}else {
			// 发送请求
			xhr.send(params);
		}
	} else {
		xhr.send();
	}
	// 请求加载完成
	xhr.onload = function () {
		// 获取服务器端返回数据的类型
		var contentType = xhr.getResponseHeader('content-type');
		// 获取服务器端返回的响应数据
		var responseText = xhr.responseText;
		// 如果服务器端返回的数据是json数据类型
		if (contentType.includes('application/json')) {
			// 将json字符串转换为json对象
			responseText = JSON.parse(responseText);
		}
		// 如果请求成功
		if (xhr.status == 200) {
			// 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数
			defaults.success(responseText, xhr);
		} else {
			// 调用失败回调函数并且将xhr对象传递给回调函数
			defaults.error(responseText, xhr);
		} 
	}
	// 当网络中断时
	xhr.onerror = function () {
		// 调用失败回调函数并且将xhr对象传递给回调函数
		defaults.error(xhr);
	}
}

不光在发送时会设置头信息，在返回信息时也会有一个头信息，根据返回头信息进而确定数据类型

$.ajax()利用更加方便

({
type:'get',
url:,
data:,
contentType:'决定data中数据类型',
beforeSend:,
success:,
error:)

dataType:jsonp 表示请求类型是jsonp跨域类型

Formdata对象作用

方便之处在于：可以一次批量获取表单数据，并且无需处理直接传递（post）请求

服务器端对请求的处理，我们用formidable第三方插件，其语法为

const form =new formidable.IncomingForm();
form.parse(req,(err,fields,files)=>{})

对于formdata类型的数据，我们采用.get获得表单对象的属性值

文件上传功能：

var file=document.getElementById('file')
file.onchange=function (){
    var formData= new FormData();
    formData.append('attrName',this.files[0]);
    xhr.open('post','www.example.com');
    xhr.send(formData)
}

在jQuery中类似可替代的方法

var params=$('#form').serialize()

跨域问题

可以说是跨服务器进行请求以及响应

jsonp解决方案

通过script标签中src属性的设置，可以访问到其他服务器上的资源，但是其他服务器必须返回一个函数调用的字符串，接收到函数调用字符串以后，在本地运行该函数，所以要在本地定义该函数

我们需要用DOM的方法对页面动态添加script标签

在服务器端，我们有jsonp方法，参数直接就是对象

因此jsonp帮助我们直接解决的问题有1、省略接收的函数名字2、省去了数据转换为字符串形式3、省去了字符串的拼接

CORS跨域资源共享

res.header('Access-Control-Allow-Origin','*')

res.header('Access-Control-Allow-Method','post,get')

服务器端解决方案

服务器之间进行请求响应

需要第三方模块request帮助，可以在服务器中继续发送请求

request('http:...',(err,response,body)=>{
    body是我们想要传递请求的信息
})

在客户端和服务器端都需要设置

res.header('Access-Control-Allow-Credentials',true)