AJAX入门

概念：AJAX(Asynchronous JavaScript And XML)：异步的JavaScript和XML
AJAX作用：
- 与服务端进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据
  - 使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验等等…

AJAX快速入门

编写AjaxServlet，并且使用response输出字符串
创建XMLHttpRequest对象：用于和服务器交换数据
向服务器发送请求
获取服务器响应数据

所有现代浏览器(IE7+、Firefox、Chrome、Safari以及Opera)均内建XMLHttpRequest对象，老版本的Internet Explorer(IE5和IE6)使用 ActiveX 对象。故创建XMHttpRequest对象的代码如下：

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

发送请求的代码则如下所示：

xmlhttp.open("请求类型","URL","是否异步发送请求");
xmlhttp.send("如果是post请求则可以添加String对象作为参数，get请求无参数");

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

不愿使用缓存文件(更新服务器上的文件或数据库，即使用session技术)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

另外在get请求中可以直接将信息添加在URL中。

为了避免得到的数据是缓存结果，可以向URL添加一个唯一的ID：xmlhttp.open("GET","资源路径?t="+Math.random(),true);

如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据：xmlhttp.setRequestHeader("username","YD");

推荐将xmlhttp设置为异步，此时当获取响应数据时会发生onreadystatechange事件，设定此事件的函数即可处理数据：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)//检测响应状态是否完成
    {
      //代码块
    }
}

axios框架

一个封装AJAX的框架，便于开发。

axios的使用方法如下：

引入axios的js文件<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
使用axios发送请求，并获取响应的结果：

	axios({
		url:"/LoginServlet",
		method: 'post',
		headers: {
			'Content-Type': 'application/x-www-form-urlencoded'
      //以HTML的post表单形式提交数据
		},
		params: {
			参数
		}
	}).then(function (response) {
		数据展示
	})

JSON

概念：JavaScript Object Notation。JavaScript对象表示法
由于其语法简单，层次结构鲜明，先多用于作为数据载体，在网络中进行数据传输

JSON基础语法

定义：

var 变量名 {
  "key1":value1,
  "key2":value2,
  ...
};

获取数据：

变量名.key

JSON数据与Java对象的转换

请求数据：JSON字符串转为Java对象
响应数据：Java对象转为JSON字符串

使用Fastjson进行转换，Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换。

导入坐标，在pom文件中加入依赖：

    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>2.0.15</version>
    </dependency>

Java对象转JSON

String jsonStr = JSON.toJSONString(obj);

JSON字符串转Java对象

User user = JSON.parseObject(jsonStr,User.class);

AJAX简介

简单入门

AJAX入门

AJAX快速入门

axios框架

JSON

JSON基础语法

JSON数据与Java对象的转换

CATALOG

FEATURED TAGS

FRIENDS