1. 介绍 Ajax
Ajax = 异步 JavaScript 和 XML
Ajax 是一种创建快速动态网页的技术
通过在后台与服务器进行少量数据交换, Ajax 可以使网页实现异步更新这意味着可以不用整个页面进行刷新而是可以进行局部刷新这也是使用 Ajax 的优点而传统页面如果要更新内容, 必须重载整个网站页面
1.1 什么是同步, 什么是异步
同步现象: 客户端发送请求到服务器端, 当服务器返回响应之前, 客户端都处于等待 卡死状态
异步现象: 客户端发送请求到服务器端, 无论服务器是否返回响应, 客户端都可以随 意做其他事情, 不会被卡死
1.2Ajax 的运行原理
页面发起请求, 会将请求发送给浏览器内核中的 Ajax 引擎, Ajax 引擎会提交请求到服务器端, 在这段时间里, 客户端可以任意进行任意操作, 直到服务器端将数据返回 给 Ajax 引擎后, 会触发你设置的事件, 从而执行自定义的 js 逻辑代码完成某种页面 1 功能
2.JS 原生的 Ajax 技术
js 原生的 Ajax 其实就是使用浏览器内置的 Ajax 引擎, 要使用 js 原生的 Ajax 完成异步操作, 有如下几个步骤:
创建 Ajax 引擎对象
为 Ajax 引擎对象绑定监听 (监听服务器已将数据响应给引擎)
绑定提交地址
发送请求
接受响应数据
通过异步访问服务器
- function fun1() {
- //1. 创建 ajax 引擎对象 ---- 所有的操作都是通过引擎对象
- var xmlHttp = new XMLHttpRequest();
- //2. 绑定监听 ---- 监听服务器是否已经返回响应
- xmlHttp.onreadystatechange = function() {
- if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
- //5. 接收相应数据
- var res = xmlHttp.responseText;
- //alert(res);
- document.getElementById("span1").innerhtml = res;
- }
- }
- //3. 绑定地址
- xmlHttp.open("GET", "/web22/ajaxServlet?name=lisi", true);
- //4. 发送请求
- xmlHttp.send();
- }
需要注意的是 open 方法第三个参数可以控制是否异步, true 是异步, false 是同步下面是通过同步访问服务器
- function fn2() {
- //1. 创建 ajax 引擎对象 ---- 所有的操作都是通过引擎对象
- var xmlHttp = new XMLHttpRequest();
- //2. 绑定监听 ---- 监听服务器是否已经返回响应
- xmlHttp.onreadystatechange = function() {
- if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
- //5. 接收相应数据
- var res = xmlHttp.responseText;
- //alert(res);
- document.getElementById("span2").innerHTML = res;
- }
- }
- //3. 绑定地址
- xmlHttp.open("POST", "/WEB22/ajaxServlet", false);
- //4. 发送请求
- xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
- xmlHttp.send("name=wangwu");
- }
此时 GET 和 POST 需要注意的是 GET 可以在直接在服务器使用 request.getParameter("name") 的方式来获取, 而 POST 需要处理一下需要修改一下请求头如上面 18 行代码, 然后在在通过发送 send() 方法发送到服务器, 发送内容可以写到参数里
3.Json 介绍
因为下面需要使用到 Json 所以我们先来说一下 Json 刚开始不了解的时候以为是一个很难的东西, 但学过之后才发现原来是啦么简单, Json 是一种取代 XML 的数据结构, 和 XML 相比, 它更小巧但描述能力却不差, 由于它的小巧所以网络传输数据将减少更多流量从而加快速度说白了 Json 就是数据的一种交换方式
3.1Json 的格式与解析
Json 有两种格式:
对象格式:{"key1":obj,"key2":obj,"key3":obj...}
数组 / 集合格式:[obj,obj,obj...]
eg:user 对象 用 json 数据表示
对象格式:
{"username":"zhr","age":21,"password":"1234","addr":"北京"}
数组格式 var json = {
- "shuzu1" : [
- {
- "name" : "小双",
- "age" : 28,
- "addr" : "扬州"
- },
- {
- "name" : "建宁",
- "age" : 18,
- "addr" : "四川"
- },
- {
- "name" : "阿珂",
- "age" : 10,
- "addr" : "山西"
- }
- ],
- "shuzu2" : [
- {
- "name" : "张爽",
- "age" : 25,
- "addr" : "吉林"
- },
- {
- "name" : "建",
- "age" : 18,
- "addr" : "四"
- },
- ]
- };
- alert(json.shuzu1[1].name);// 建
- var json = {
- "key1" : "value1",
- "key2" : {
- "name" : "小双",
- "age" : 28,
- "addr" : "扬州"
- },
- "key3" : [
- {
- "name" : "小双",
- "age" : 28,
- "addr" : "扬州"
- },
- {
- "name" : "小双",
- "age" : 28,
- "addr" : "扬州"
- },
- {
- "name" : "小双",
- "age" : 28,
- "addr" : "扬"
- }
- ]
- };
- alert(json.key1); //value1
- alert(json.key2.age); //28
- alert(json.key3[2].addr); // 扬
3.2Json 的转换插件
将 java 的对象或集合转成 json 形式字符串
json 的转换插件是通过 java 的一些工具, 直接将 java 对象或集合转换成 json 字符串
常用的 json 转换工具有如下几种:
- jsonlib
- Gson:google
fastjson: 阿里巴巴
4.Jquery 的 Ajax 技术
jquery 是一个优秀的 js 框架, 自然对 js 原生的 ajax 进行了封装, 封装后的 ajax 的操 作方法更简洁, 功能更强大, 与 ajax 操作相关的 jquery 方法有如下几种, 但开发中 经常使用的有三种
- $.get(url, [data], [callback], [type])
- $.post(url, [data], [callback], [type])
其中:
url: 代表请求的服务器端地址
data: 代表请求服务器端的数据 (可以是 key=value 形式也可以是 json 格式)
callback: 表示服务器端成功响应所触发的函数 (只有正常成功返回才执行)
type: 表示服务器端返回的数据类型 (jquery 会根据指定的类型自动类型转换)
常用的返回类型: textjsonhtml 等
3.$.ajax( { option1:value1,option2:value2... } );
常用的 option 有如下:
async: 是否异步, 默认是 true 代表异步
data: 发送到服务器的参数, 建议使用 json 格式
dataType: 服务器端返回的数据类型, 常用 text 和 json
success: 成功响应执行的函数, 对应的类型是 function 类型
type: 请求方式, POST/GET
url: 请求服务器端地址
- jquery_ajax.html
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Insert title here</title>
- <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
- <script type="text/javascript">
- function fn1(){
- //get 异步访问服务器
- $.get(
- "/WEB22/ajaxServlet2",//url 地址
- {"name":"张三","age":25},// 请求参数
- function(data){// 执行成功后的回调函数
- alert(data.name);
- },
- "json"
- );
- }
- function fn2(){
- //post 异步访问服务器
- $.post(
- "/WEB22/ajaxServlet2",//url 地址
- {"name":"张三","age":25},// 请求参数
- function(data){// 执行成功后的回调函数
- alert(data.name);
- },
- "json"
- );
- }
- function fn3(){
- $.ajax({
- url:"/WEB22/ajaxServlet2",
- async:"true",
- type:"POST",
- data:{"name":"lucy","age":18},
- success:function(data){
- alert("请求成功"+data.name);
- },
- error:function(data){
- alert("请求失败");
- },
- dataType:"json",
- });
- }
- </script>
- </head>
- <body>
- <input type="button" value="get 访问服务器" onclick="fn1()">
- <span id="span1"></span>
- <br>
- <input type="button" value="post 访问服务器" onclick="fn2()">
- <span id="span2"></span>
- <br>
- <input type="button" value="ajax 访问服务器" onclick="fn3()">
- <span id="span3"></span>
- <br>
- </body>
- </html>
- AjaxServlet.java
- package com.zhr.ajax;
- import java.io.IOException;
- import javax.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- public class AjaxServlet2 extends HttpServlet {
- private static final long serialVersionUID = 1L;
- protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,
- IOException {
- request.setCharacterEncoding("UTF-8");
- String name = request.getParameter("name");
- String age = request.getParameter("age");
- System.out.println(name + " " + age);
- //java 代码只能返回一个 json 格式的字符串
- response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("{\"name\":\" 汤姆 \",\"age\":21}");
- }
- protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,
- IOException {
- doGet(request, response);
- }
- }
来源: https://www.cnblogs.com/moster/p/8485009.html