1、概念
Ajax,Asynchronous JavaScript And Xml。异步的javascript和XML
JavaScript负责发送请求,XML作为一种响应的数据Ajax主要用来增强用户体验。因为它是浏览器与服务器之间进行异步交互,而无需刷新页面的技术
它只会局部更新页面,而不用刷新整个窗口2、异步和同步
⑴ 同步请求
当向服务器发请求时,必须得到响应成功后,才能发送其他的请求,有一个等待的过程,而且响应成功后会刷新整个页面⑵ 异步请求
当向服务器发请求时,不用等响应成功,就可以发送其他请求,不需要等待,而且响应成功后局部刷新页面3、发送Ajax请求
步骤
⑴ 创建XMLHttpRequest对象
Ajax的所有操作,都由该对象完成⑵ 设置请求信息
⑶ 发送请求
⑷ 接收响应相关函数和属性
XMLHttpRequest
new XMLHttpRequest();
创建XMLHttpRequest对象open
open(method, url, async, username, password);
设置请求参数
method:请求方式。可选值有GET和POST,不区分大小写 url:请求地址 async:设置当前请求是否异步【true】;同步【false】。默认是true username:用户名 password:密码
当发送的请求需要权限时,使用username和password
send
send(body);
发送请求
send方法中传入一个Object类型的请求体。GET请求没有请求体,可以不传如果是POST请求,则可以在里面写入请求参数字符串,格式:
键1=值1&键2=值2setRequestHeader
setRequestHeader(header, value);
设置请求头信息
一般用于:
当发送POST请求时,需要设置一个请求头对请求体中的请求参数进行URL编码setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
注意:
⑴ 这是固定写法, 不能修改,否则无效
⑵ 当发送POST请求时,如果不添加该语句,则服务器将无法获取请求参数(null)
⑶ 该语句需要写在open函数的下面,send函数的上面
⑷ GET请求的参数是写在URL地址中的,故该方法对GET请求的参数无效这个参数就是form表单中的enctype属性
<form enctype="application/x-www-form-urlencoded" ></form>
enctype属性规定在发送到服务器之前应该如何对表单数据进行编码
application/x-www-form-urlencoded
在发送前编码所有字符(默认)responseText
XMLHttpRequest的属性
接收响应的文本内容注意:不是说已发送请求,就可以接收响应。这期间有一个等待的过程。需要给XMLHttpRequest的onreadystatechange,设置一个事件,来监听是否响应已经就绪
onreadystatechange
onreadystatechange
每当 readyState 改变时,就会触发 onreadystatechange 事件readyState
XMLHttpRequest的属性
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪
status
XMLHttpRequest的属性
200: "OK" 404: 未找到页面
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
responseXML
XMLHttpRequest的属性
接收响应的XML数据同responseText一样,接收数据时,有一个等待的过程
注意:Servlet发送XML的响应时,需要提前声明响应的类型:
response.setContentType("text/xml;charset=UTF-8");
否则xmlhttp.responseXML无法获取响应的内容(null)
获取XML数据中的子元素的文本内容
⑴ 接收响应的XML数据
var docEle = xmlhttp.responseXML;⑵ 获取子元素标签
var childEle = docEle.getElementsByTagName(“子元素标签名”)[下标];⑶ 获取子元素标签的第一个子节点(文本节点)
var textNode = childEle.firstChild;⑷ 获取文本节点的文本内容
var text = textNode.nodeValue;GET请求示例
【JavaScript代码】
<script type="text/javascript"> window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); //设置请求信息 xhr.open("GET", "${pageContext.request.contextPath}/ajaxServlet"); // 发送请求【GET请求没有请求体】 xhr.send(); // 给XMLHttpRequest对象,绑定state改变的函数 xhr.onreadystatechange = function(){ // var readyState = xhr.readyState; // var statusNum = xhr.status; // console.log(readyState + " : " + statusNum); // 当请求已完成,且响应已就绪【readyState等于4】 // 当响应状态码为200时 if (4 == xhr.readyState && 200 == xhr.status) { // 获取请求内容 var text = xhr.responseText; var h1 = document.getElementById("h1"); h1.innerHTML = text; } }; }; }; </script>
【body内容】
<input id="btn" type="button" value="通过按钮发送GET请求" /> <h1 id="h1"></h1>
【AjaxServlet】
@Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("text/html;charset=UTF-8"); resp.getWriter().println("响应内容"); }
POST请求示例
【JavaScript代码】
<script type="text/javascript"> window.onload = function(){ document.getElementById("btn").onclick = function(){ var xmlhttp = new XMLHttpRequest(); xmlhttp.open("POST", "${pageContext.request.contextPath}/ajaxServlet"); // 对POST的请求参数进行URL编码 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 发送请求参数 xmlhttp.send("name=张三&password=1234"); xmlhttp.onreadystatechange = function(){ if (4 == xmlhttp.readyState && 200 == xmlhttp.status) { var text = xmlhttp.responseText; alert(text); } }; }; }; </script>
【body内容】
<button id="btn">发送POST请求</button>
【AjaxServlet】
@Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置解析请求参数的编码格式 request.setCharacterEncoding("UTF-8"); String name = request.getParameter("name"); String password = request.getParameter("password"); System.out.println("name: " + name + ", password: " + password); // 设置响应编码 response.setContentType("text/html;charset=UTF-8"); response.getWriter().write("响应POST请求"); }
示例响应数据是XML
【JavaScript代码】
<script type="text/javascript"> window.onload = function(){ document.getElementById("btn").onclick = function(){ var xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", "${pageContext.request.contextPath}/ajaxServlet"); xmlhttp.send(); xmlhttp.onreadystatechange = function(){ if (4 == xmlhttp.readyState && 200 == xmlhttp.status) { // 接收响应的XML数据 var DocEle = xmlhttp.responseXML; // 获取第一个name子元素 var nameEle = DocEle.getElementsByTagName("name")[0]; // 获取name元素的第一个子节点 var nameNode = nameEle.firstChild; // 获取节点值 var name = nameNode.nodeValue; alert("name: " + name); } }; }; }; </script>
【body内容】
<button id="btn">获取XML响应</button>
【AjaxServlet】
@Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置响应体类型为XML response.setContentType("text/xml;charset=UTF-8"); String xml = "<person>" + "<name>张三</name>" + "<age>14</age>" + "</person>"; response.getWriter().write(xml); }
5、JSON
概念
JavaScript Object Notation,JavaScript的对象表示法。是一种轻量级的数据交换格式
它是一种可以跨平台,跨语言的数据交换格式
由于XML格式的数据,解析复杂、性能查,所以现在基本已被JSON所代替对比:
【XML格式数据】
<person> <name>张三</name> <age>14</age> </person>
【JSON格式数据】
{"name":"张三", "age":14}
JSON格式
JSON对象
{“属性名1”:”属性值1”, “属性名2”:”属性值2”, …}
注意事项:
⑴ 属性名必须使用双引号(”“)引起来
⑵ 属性名和属性值之间用冒号(:)分割
⑶ 多个属性之间,用逗号(,)分割JSON数组
[属性值1, 属性值2, 属性值3, …]
多个属性值之间用逗号(,)分割
JSON属性可以使用的类型
字符串 数字 布尔类型 null 对象 数组
在JavaScript中JSON对象与JSON字符串互转
JSON字符串转JSON对象
JSON.parse(JSON字符串);
得到一个Object类型的JSON对象
JSON对象转JSON字符串
JSON.stringify(JSON对象);
得到一个JSON字符串
使用示例
// 创建JSON字符串 var jsonStr = '{"name":"张三", "age":14}'; // 创建JSON对象 var jsonObj = { "name":"李四", "age":12 }; // 将JSON字符串转换为JSON对象 var Object = JSON.parse(jsonStr); // 获取name属性值 alert(Object.name); // 将JSON对象转换为JSON字符串 var str = JSON.stringify(jsonObj); alert(typeof str); alert(str);
在Java中JSON对象与JSON字符串互转
方法
需要调用Gson类里的方法,导入gson-2.2.4.jar包
new Gson();
创建一个Gson对象
public String toJson(Object src) {}
将Object对象转换为JSON字符串
public <T> T fromJson(String json, Class<T> classOfT) throws JsonSyntaxException {}
将JSON字符串转换为Object类型的对象
使用示例
【Person(JavaBean)】
String类型的name和age,提供有参构造,重写toString方法
【JavaScript代码】
<script type="text/javascript"> window.onload = function(){ document.getElementById("btn").onclick = function(){ var xmlhttp = new XMLHttpRequest(); xmlhttp.open("POST", "${pageContext.request.contextPath}/ajaxServlet"); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 创建JSON字符串 var jsonStr = '{"name":"张三", "age":14}'; // 发送请求 xmlhttp.send("jsonStr=" + jsonStr); xmlhttp.onreadystatechange = function(){ if (4 == xmlhttp.readyState && 200 == xmlhttp.status) { var respJSONStr = xmlhttp.responseText; alert(respJSONStr); // 将获取到的JSON字符串转换为JSON对象 var jsonObj = JSON.parse(respJSONStr); alert(jsonObj.name); } }; }; }; </script>
【body内容】
<button id="btn">发送JSON对象,获取JSON字符串</button>
【AjaxServlet】
@Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置请求字符集编码 request.setCharacterEncoding("UTF-8"); // 设置相应字符类型 response.setContentType("text/html;charset=UTF-8"); // 获取请求参数【JSON字符串】 String jsonStr = request.getParameter("jsonStr"); // 创建Gson对象 Gson gson = new Gson(); // 转换为Object Object obj = gson.fromJson(jsonStr, Person.class); System.out.println(obj); // 创建一个Person对象 Person person = new Person("李四", "12"); // 将对象转换为JSON字符串 String respJSONStr = gson.toJson(person); response.getWriter().write(respJSONStr); }
测试将Map集合转换为JSON字符串
Map<String, Person> map = new HashMap<String, Person>(); map.put("p1", new Person(1, "张三", 14)); map.put("p2", new Person(2, "李四", 17)); map.put("p3", new Person(3, "王五", 12)); Gson gson = new Gson(); /* * { * "p1":{ * "id":1, * "name":"张三", * "age":14 * }, * "p2":{ * "id":2, * "name":"李四", * "age":17 * }, * "p3":{ * "id":3, * "name":"王五", * "age":12 * } * } */ String jsonStr = gson.toJson(map); System.out.println(jsonStr); /* * { * p1={ * id=1.0, * name=张三, * age=14.0 * }, * p2={ * id=2.0, * name=李四, * age=17.0 * }, * p3={ * id=3.0, * name=王五, * age=12.0 * } * } */ Object obj = gson.fromJson(jsonStr, Map.class); System.out.println(obj);
6、使用jQuery发送Ajax请求
发送GET请求
$.get(url, [data], [callback], [type]);
url:待载入页面的URL地址
data:待发送 Key/value 参数。一个Object类型的对象
callback:载入成功时回调函数
type:返回内容格式,xml, html, script, json, text, _default发送POST请求
$.post(url, [data], [callback], [type]);
其参数和get函数里的参数一样
默认获取的响应类型为JSON
$.getJSON(url, [data], [callback]);
其参数和get函数里的前三个参数一样
Tips:该函数等同于
$.get(url, [data], [callback], "json");
即最后一个参数【获取到的响应的格式】指定为了json
注意:
⑴ 该函数需要调用Servlet中的doGet方法来处理请求
⑵ 响应参数是JSON字符串,其会被自动转换为JSON对象[object Object]测试GET和POST请求
【jQuery代码】
<script type="text/javascript"> $(function(){ $("#getBtn").click(function(){ // 请求地址 var url = "${pageContext.request.contextPath}/ajaxServlet"; // 请求参数 var data = { "name":"张三", "age":14 }; // 响应成功的回调函数 var fun = function(data){ alert(data); }; // 响应类型 var type = "text"; $.get(url, data, fun, type); }); $("#postBtn").click(function(){ var url = "${pageContext.request.contextPath}/ajaxServlet"; $.post(url, function(data){ alert(data); }, "text"); }); }); </script>
【body内容】
<input id="getBtn" type="button" value="发送GET请求" /><br /><br /> <input id="postBtn" type="button" value="发送POST请求" />
【AjaxServlet】
@Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name = request.getParameter("name"); String age = request.getParameter("age"); System.out.println("name: " + name + ", age: " + age); response.setContentType("text/html;charset=UTF-8"); response.getWriter().write("响应GET请求"); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); response.getWriter().write("响应POST请求"); }
测试接收JSON响应
【Person(JavaBean)】
String类型的name和age,提供有参构造
【jquery代码】
<script type="text/javascript"> $(function(){ $("#getJSONBtn").click(function(){ var url = "${pageContext.request.contextPath}/ajaxServlet"; $.getJSON(url, function(data){ alert(data); alert(data.name); }); }); $("#getBtn").click(function(){ var url = "${pageContext.request.contextPath}/ajaxServlet"; $.get(url, function(data){ alert(data); alert(data.name); }, "json"); }); }); </script>
【body内容】
<input id="getJSONBtn" type="button" value="通过getJSON函数获取JSON字符串响应" /><br /><br /> <input id="getBtn" type="button" value="通过get函数获取JSON字符串响应" />
【AjaxServlet】
@Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Person person = new Person("张三", "14"); Gson gson = new Gson(); String jsonStr = gson.toJson(person); response.setContentType("text/html;charset=UTF-8"); response.getWriter().write(jsonStr); }
5、JSON
概念
JavaScript Object Notation,JavaScript的对象表示法。是一种轻量级的数据交换格式
它是一种可以跨平台,跨语言的数据交换格式
由于XML格式的数据,解析复杂、性能查,所以现在基本已被JSON所代替对比:
【XML格式数据】<person> <name>张三</name> <age>14</age> </person>
【JSON格式数据】
{"name":"张三", "age":14}
JSON格式
JSON对象
{“属性名1”:”属性值1”, “属性名2”:”属性值2”, …}
注意事项:
⑴ 属性名必须使用双引号(”“)引起来
⑵ 属性名和属性值之间用冒号(:)分割
⑶ 多个属性之间,用逗号(,)分割JSON数组
[属性值1, 属性值2, 属性值3, …]
多个属性值之间用逗号(,)分割
JSON属性可以使用的类型
字符串 数字 布尔类型 null 对象 数组
在JavaScript中JSON对象与JSON字符串互转
JSON字符串转JSON对象
JSON.parse(JSON字符串);
得到一个Object类型的JSON对象
JSON对象转JSON字符串
JSON.stringify(JSON对象);
得到一个JSON字符串
使用示例
// 创建JSON字符串 var jsonStr = '{"name":"张三", "age":14}'; // 创建JSON对象 var jsonObj = { "name":"李四", "age":12 }; // 将JSON字符串转换为JSON对象 var Object = JSON.parse(jsonStr); // 获取name属性值 alert(Object.name); // 将JSON对象转换为JSON字符串 var str = JSON.stringify(jsonObj); alert(typeof str); alert(str);
在Java中JSON对象与JSON字符串互转
方法
需要调用Gson类里的方法,导入gson-2.2.4.jar包
new Gson();
创建一个Gson对象
public String toJson(Object src) {}
将Object对象转换为JSON字符串
public <T> T fromJson(String json, Class<T> classOfT) throws JsonSyntaxException {}
将JSON字符串转换为Object类型的对象
使用示例
【Person(JavaBean)】
String类型的name和age,提供有参构造,重写toString方法
【JavaScript代码】
<script type="text/javascript"> window.onload = function(){ document.getElementById("btn").onclick = function(){ var xmlhttp = new XMLHttpRequest(); xmlhttp.open("POST", "${pageContext.request.contextPath}/ajaxServlet"); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 创建JSON字符串 var jsonStr = '{"name":"张三", "age":14}'; // 发送请求 xmlhttp.send("jsonStr=" + jsonStr); xmlhttp.onreadystatechange = function(){ if (4 == xmlhttp.readyState && 200 == xmlhttp.status) { var respJSONStr = xmlhttp.responseText; alert(respJSONStr); // 将获取到的JSON字符串转换为JSON对象 var jsonObj = JSON.parse(respJSONStr); alert(jsonObj.name); } }; }; }; </script>
【body内容】
<button id="btn">发送JSON对象,获取JSON字符串</button>
【AjaxServlet】
@Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置请求字符集编码 request.setCharacterEncoding("UTF-8"); // 设置相应字符类型 response.setContentType("text/html;charset=UTF-8"); // 获取请求参数【JSON字符串】 String jsonStr = request.getParameter("jsonStr"); // 创建Gson对象 Gson gson = new Gson(); // 转换为Object Object obj = gson.fromJson(jsonStr, Person.class); System.out.println(obj); // 创建一个Person对象 Person person = new Person("李四", "12"); // 将对象转换为JSON字符串 String respJSONStr = gson.toJson(person); response.getWriter().write(respJSONStr); }
测试将Map集合转换为JSON字符串
Map<String, Person> map = new HashMap<String, Person>(); map.put("p1", new Person(1, "张三", 14)); map.put("p2", new Person(2, "李四", 17)); map.put("p3", new Person(3, "王五", 12)); Gson gson = new Gson(); /* * { * "p1":{ * "id":1, * "name":"张三", * "age":14 * }, * "p2":{ * "id":2, * "name":"李四", * "age":17 * }, * "p3":{ * "id":3, * "name":"王五", * "age":12 * } * } */ String jsonStr = gson.toJson(map); System.out.println(jsonStr); /* * { * p1={ * id=1.0, * name=张三, * age=14.0 * }, * p2={ * id=2.0, * name=李四, * age=17.0 * }, * p3={ * id=3.0, * name=王五, * age=12.0 * } * } */ Object obj = gson.fromJson(jsonStr, Map.class); System.out.println(obj);
6、使用jQuery发送Ajax请求
发送GET请求
$.get(url, [data], [callback], [type]);
url:待载入页面的URL地址
data:待发送 Key/value 参数。一个Object类型的对象
callback:载入成功时回调函数
type:返回内容格式,xml, html, script, json, text, _default发送POST请求
$.post(url, [data], [callback], [type]);
其参数和get函数里的参数一样
默认获取的响应类型为JSON
$.getJSON(url, [data], [callback]);
其参数和get函数里的前三个参数一样
Tips:该函数等同于
$.get(url, [data], [callback], "json");
即最后一个参数【获取到的响应的格式】指定为了json
注意:
⑴ 该函数需要调用Servlet中的doGet方法来处理请求
⑵ 响应参数是JSON字符串,其会被自动转换为JSON对象[object Object]测试GET和POST请求
【jQuery代码】
<script type="text/javascript"> $(function(){ $("#getBtn").click(function(){ // 请求地址 var url = "${pageContext.request.contextPath}/ajaxServlet"; // 请求参数 var data = { "name":"张三", "age":14 }; // 响应成功的回调函数 var fun = function(data){ alert(data); }; // 响应类型 var type = "text"; $.get(url, data, fun, type); }); $("#postBtn").click(function(){ var url = "${pageContext.request.contextPath}/ajaxServlet"; $.post(url, function(data){ alert(data); }, "text"); }); }); </script>
【body内容】
<input id="getBtn" type="button" value="发送GET请求" /><br /><br /> <input id="postBtn" type="button" value="发送POST请求" />
【AjaxServlet】
@Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String name = request.getParameter("name"); String age = request.getParameter("age"); System.out.println("name: " + name + ", age: " + age); response.setContentType("text/html;charset=UTF-8"); response.getWriter().write("响应GET请求"); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); response.getWriter().write("响应POST请求"); }
测试接收JSON响应
【Person(JavaBean)】
String类型的name和age,提供有参构造
【jquery代码】
<script type="text/javascript"> $(function(){ $("#getJSONBtn").click(function(){ var url = "${pageContext.request.contextPath}/ajaxServlet"; $.getJSON(url, function(data){ alert(data); alert(data.name); }); }); $("#getBtn").click(function(){ var url = "${pageContext.request.contextPath}/ajaxServlet"; $.get(url, function(data){ alert(data); alert(data.name); }, "json"); }); }); </script>
【body内容】
<input id="getJSONBtn" type="button" value="通过getJSON函数获取JSON字符串响应" /><br /><br /> <input id="getBtn" type="button" value="通过get函数获取JSON字符串响应" />
【AjaxServlet】
@Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Person person = new Person("张三", "14"); Gson gson = new Gson(); String jsonStr = gson.toJson(person); response.setContentType("text/html;charset=UTF-8"); response.getWriter().write(jsonStr); }
Ajax初步总结
最新推荐文章于 2020-12-23 23:00:38 发布