Ajax

Ajax概述

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），通过在后台与服务器进行少量数据交换，可以使页面实现异步更新，就是无需重新加载整个网页的情况下，能够更新部分网页的技术。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

Ajax = 异步 JavaScript 和 XML，是一种新的思想，整合之前的多种技术，用于创建快速交互式网页应用的网页开发技术。

同步与异步

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态
异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死

Ajax的运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

JS原生的Ajax技术

具体步骤和代码实现如下图：

PS：如果是post提交，在发送请求之前设置一个头

 

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

PS：所用异步访问都是ajax引擎

Json数据格式

Json是一种与语言无关的数据交换的格式，使用ajax进行前后台数据交换

json有两种格式：
1）对象格式：{"key1":obj,"key2":obj,"key3":obj...}

2）数组/集合格式：[obj,obj,obj...]

 

例如：

1）user对象用json数据格式表示

{"username":"zhangsan","age":21,"password":"001","addr":"jiangxi"}

 

 

2）List<Product> 用json数据格式表示

[{"pid":"7","pname":"小米6"},{},{}]

PS：对象格式和数组格式可以互相嵌套

PS：json的key是字符串  jaon的value是Object

Json的解析：

json是js的原生内容，也就意味着js可以直接取出json对象中的数据

 

Json的转换

将java的对象或集合转成json形式字符串

 

json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。
常用的json转换工具有如下几种：

 

1）jsonlib

代码演示：

JSONArray fromObject = JSONArray.fromObject(productList);//productList一个List集合
String string = fromObject.toString();

System.out.println(string);

PS：需要导入jar包

2）Gson：google

这里不演示，会面案例使用

3）fastjson：阿里巴巴

Jquery的Ajax技术

jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操 作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中经常使用的有三种

1）$.get(url, [data], [callback], [type])

 

2）$.post(url, [data], [callback], [type])

 其中：

url：代表请求的服务器端地址

data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）

callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）

type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换，常用的返回类型：text、json、html等

 3）$.ajax( { option1:value1,option2:value2... } ); ---- 以后在掌握

常用的option有如下：

async：是否异步，默认是true代表异步

data：发送到服务器的参数，建议使用json格式

dataType：服务器端返回的数据类型，常用text和json

success：成功响应执行的函数，对应的类型是function类型

type：请求方式，POST/GET

url：请求服务器端地址

 

案例一：异步校验用户名是否存在

register.jsp 部分代码：

 

service 层 UserService.java

 

dao 层 Userdao.java

web层 CheckUsernameServlet.java

演示结果：

案例二：站内查询

jsp部分代码：

web 层

service 层

dao 层

案例结果：