Ajax简介、axios异步提交

一、Ajax简介

1. Ajax全称为：“Asynchronous JavaScript and XML”（异步JavaScript 和 XML）
   使用ajax，可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。
2. Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest）异步地向服务器发送请求
3. 服务器返回部分数据，浏览器利用这些数据对页面做部分的更新，整个过程，页面无刷新，不打断用户的操作；

二、创建XMLHttpRequest对象

1. XMLHttpRequest对象：发送请求到服务器并获得返回结果。
2. 所有现代的服务器都内置了XMLHttpRequest对象，通过一行简单的JavaScript代码，我们就可以创建XMLHttpRequest对象。
3. new XMLHttpRequest（）；

三、XMLHttpRequest

JavaScript对象XMLHttpRequest时整个Ajax技术的核心，它提供了异步发送请求的能力。

常用方法：

方法名	说明
open(method,URL,async)	建立与服务器的连接；     method参数指定请求的HTTP方法，典型的值是GET或POST；     URL参数指定请求的地址；     async参数指定是否使用异步请求，其值为true或false
send(content)	发送请求 content参数指定请求的参数
setRequestHeader(header,value)	设置请求的头信息

常用属性：
 

onreadystatechange	事件，指定回调函数
readystate	XMLHttpRequest的状态信息
responseText	获得响应的文本内容

就绪状态码	说  明
0	XMLHttpRequest对象没有完成初始化
1	XMLHttpRequest对象开始发送请求
2	XMLHttpRequest对象的请求发送完成
3	XMLHttpRequest对象开始读取响应，还没有结束
4	XMLHttpRequest对象读取响应结束

四、GET方式 

GET方式提交：

xmlhttp.open("GET","testServlet?name="+userName,true);
xmlhttp.send();

五、axios框架

1、vue安装axios

终端输入：npm  install  axios

2、下载axios文件：https://unpkg.com/axios/dist/axios.min.js

3、导入项目

4、get请求：

axios.get('/user?ID=12345').then(function (response) {
    console.log(response);
})

5、post请求：

axios.post('/user', “name1=value1&name2=value2”).then(function (response) {
    console.log(response);
})

响应结果格式

axios.get('/user/12345').then(function(response) {
    //后端返回数据,默认为json格式
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
});

向服务器发送cookie数据设置

axios.defaults.withCredentials=true;

六、JSON

JSON（JavaScript  Object  Notation）是一种轻量级的数据交换格式

1. 数据在键值对中
2. 数据由逗号分隔
3. 大括号保存对象
4. 方括号保存数组

语法：
         JSON键值对是用来保存JS对象的一种方式，和JS对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号""包裹，使用冒号: 分隔，然后紧接着值：

{"firstName": "John"}
{“name”:”value”,”sex”:”男”}

代码示例：

//将json对象序列化为键=值&键=值
	   function jsonToString(jsonobj){
		   var str = "";
		   for(var s in jsonobj){
				str+=s+"="+jsonobj[s]+"&";	  
		   }
		   return str.substring(0,str.length-1);
	   }