福州网站建设模板,网站建设目标有哪几个方面,百度地图3d实景地图,win2012服务器网站建设1.AJAX
1.AJAX概述
AJAX(Asynchronous JavaScript And XML)#xff1a;异步的 JavaScript 和 XML
本身不是一种新技术#xff0c;而是多个技术综合。用于快速创建动态网页的技术
一般的网页如果需要更新内容#xff0c;必需重新加载个页面。
而 Ajax通过浏览器与服务器…1.AJAX
1.AJAX概述
AJAX(Asynchronous JavaScript And XML)异步的 JavaScript 和 XML
本身不是一种新技术而是多个技术综合。用于快速创建动态网页的技术
一般的网页如果需要更新内容必需重新加载个页面。
而 Ajax通过浏览器与服务器进行少量数据交换就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下对网页的部分内容进行局部更新。
同步服务器端在处理过程中无法进行其他操作。
异步服务器端在处理过程中可以进行其他操作
总结异步的处理网络请求的工具可以实现局部刷新 2.原生JS实现AJAX 与详解 package Servlet;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;WebServlet(/userServlet)
public class UserServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置请求和响应的乱码req.setCharacterEncoding(UTF-8);resp.setContentType(text/html;charsetUTF-8);//1.获取请求参数String username req.getParameter(username);//模拟服务器处理请求需要5秒钟/*try {Thread.sleep(5000);} catch (InterruptedException e) {e.printStackTrace();}*///2.判断姓名是否已注册if(zhangsan.equals(username)) {resp.getWriter().write(font colorred用户名已注册/font);}else {resp.getWriter().write(font colorgreen用户名可用/font);}}Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req,resp);}
}!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/title
/head
body
form autocompleteoff姓名input typetext idusernamespan iduSpan/spanbr密码input typepassword idpasswordbrinput typesubmit value注册
/form
/body
script//1.为姓名绑定失去焦点事件document.getElementById(username).onblur function() {//2.创建XMLHttpRequest核心对象let xmlHttp new XMLHttpRequest();//3.打开链接let username document.getElementById(username).value;xmlHttp.open(GET,userServlet?usernameusername,true);//xmlHttp.open(GET,userServlet?usernameusername,false);//4.发送请求xmlHttp.send();//5.处理响应xmlHttp.onreadystatechange function() {//判断请求和响应是否成功if(xmlHttp.readyState 4 xmlHttp.status 200) {//将响应的数据显示到span标签document.getElementById(uSpan).innerHTML xmlHttp.responseText;}}}
/script
/html核心对象XMLHttpRequest
用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下对网页的某部分进行更新
打开链接open(method,url,async)
method请求的类型 GET 或 POST
url请求资源的路径
asynctrue(异步) 或 false(同步)
发送请求send(String params)
params请求的参数(POST 专用)
处理响应onreadystatechange
readyState0-请求未初始化1-服务器连接已建立2-请求已接收3-请求处理中4-请求已完成且响应已就绪
status200-响应已全部 OK
获得响应数据形式
responseText获得字符串形式的响应数据
responseXML获得 XML 形式的响应数据
3.JQuery的GET方式实现AJAX
核心语法$.get(url,[data],[callback],[type]);
url请求的资源路径。
data字符串类型发送给服务器端的请求参数格式可以是keyvalue也可以是 js 对象。[可选参数]
callback当请求成功后的回调函数可以在函数中编写我们的逻辑代码。 [可选参数]
type预期的返回数据的类型取值可以是 xml, html, js, json, text等。[可选参数]
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/title
/head
body
form autocompleteoff姓名input typetext idusernamespan iduSpan/spanbr密码input typepassword idpasswordbrinput typesubmit value注册
/form
/body
script srcjs/jquery-3.7.1.js/script
script//1.为用户名绑定失去焦点事件$(#username).blur(function () {let username $(#username).val();//2.jQuery的GET方式实现AJAX$.get(//请求的资源路径userServlet,//请求参数username username,//回调函数function (data) {//将响应的数据显示到span标签$(#uSpan).html(data);},//响应数据形式text);});btn.onclick(function(){alert(点我呀);})
/script
/html4.JQuery的POST方式实现AJAX
核心语法$.post(url,[data],[callback],[type]);
url请求的资源路径。
data发送给服务器端的请求参数格式可以是keyvalue也可以是 js 对象
callback当请求成功后的回调函数可以在函数中编写我们的逻辑代码
type预期的返回数据的类型取值可以是 xml, html, js, json, text等
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/title
/head
body
form autocompleteoff姓名input typetext idusernamespan iduSpan/spanbr密码input typepassword idpasswordbrinput typesubmit value注册
/form
/body
script srcjs/jquery-3.7.1.js/script
script//1.为用户名绑定失去焦点事件$(#username).blur(function () {let username $(#username).val();//2.jQuery的POST方式实现AJAX$.post(//请求的资源路径userServlet,//请求参数username username,//回调函数function (data) {//将响应的数据显示到span标签$(#uSpan).html(data);},//响应数据形式text);});
/script
/html5.JQuery的通用方式实现AJAX
核心语法$.ajax({name:value,name:value,…});
url请求的资源路径。
async是否异步请求true-是false-否 (默认是 true)。
data发送到服务器的数据可以是键值对形式也可以是 js 对象形式。
type请求方式POST 或 GET (默认是 GET)。
dataType预期的返回数据的类型取值可以是 xml, html, js, json, text等。
success请求成功时调用的回调函数。
error请求失败时调用的回调函数。
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/title
/head
body
form autocompleteoff姓名input typetext idusernamespan iduSpan/spanbr密码input typepassword idpasswordbrinput typesubmit value注册
/form
/body
script srcjs/jquery-3.7.1.js/script
script//1.为用户名绑定失去焦点事件$(#username).blur(function () {let username $(#username).val();//2.jQuery的通用方式实现AJAX$.ajax({//请求资源路径url:userServlet,//url:userServletxxx, //测试回调函数//是否异步async:true,//请求参数data:usernameusername,//请求方式type:POST,//数据形式dataType:text,//请求成功后调用的回调函数success:function (data) {//将响应的数据显示到span标签$(#uSpan).html(data);},//请求失败后调用的回调函数error:function () {alert(操作失败...);}});});
/script
/html2.JSON
1.JSON的概述
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式
它是基于 ECMAScript 规范的一个子集采用完全独立于编程语言的文本格式来存储和表示数据
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写同时也易于计算机解析和生成并有效的 提升网络传输效率
创建格式
类型语法说明对象类型{name:value,name:value,...}name是字符串类型value可以是任意类型数组/集合类型[{name:value,...},{name:value,...}]混合类型{name: [{name:value,...},{name:value,...}] }
常用方法
成员方法说明stringify(对象)将指定对象转换为json格式字符串parse(字符串)将指定json格式字符串解析成对象
2.JSON转换工具
我们除了可以在 JavaScript 中来使用 JSON 以外在 JAVA 中同样也可以使用 JSON
JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包
可以将 JAVA 对象或集合转换成 JSON 格式的字符串也可以将 JSON 格式的字符串转成 JAVA 对象
Jackson开源免费的 JSON 转换工具SpringMVC 转换默认使用 Jackson 1.导入 jar 包。 2. 创建核心对象。 3. 调用方法完成转换
常用类
类名说明ObjectMapper是Jackson工具包的核心类,它提供一些方法来实现JSON字符串和对象之间的转换TypeReference对集合泛型的反序列化使用TypeReference可以明确的指定反序列化的对象类型
ObjectMapper常用方法
方法名说明String writeValueAsString(Object obj)将Java对象转换成JSON字符串TreadValue(String json, Class valueType)将JSON字符串转换成Java对象TreadValue(String json,TypeReference valueTypeRef)将JSON字符串转换成Java对象
3.JSON转换
1.对象转 JSON, JSON 转对象
User类
package Servlet02;public class User {private String name;private Integer age;public User() {}public User(String name, Integer age) {this.name name;this.age age;}public String getName() {return name;}public void setName(String name) {this.name name;}public Integer getAge() {return age;}public void setAge(Integer age) {this.age age;}Overridepublic String toString() {return User{ name name \ , age age };}
}package Servlet02;import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;import java.util.ArrayList;
import java.util.HashMap;/*JSON转换工具的使用*/
public class ObjectMapperTest {private ObjectMapper mapper new ObjectMapper();/*1.User对象转json, json转User对象json字符串 {name:张三,age:23}user对象 User{name张三, age23}*/Testpublic void test01() throws Exception{//User对象转jsonUser user new User(张三,23);String json mapper.writeValueAsString(user);System.out.println(json字符串 json);//json转User对象User user2 mapper.readValue(json, User.class);System.out.println(java对象 user2);}
}2.Map转 JSON, JSON 转 Map
/*2.mapString,String转json, json转mapString,Stringjson字符串 {姓名:张三,性别:男}map对象 {姓名张三, 性别男}
*/
Test
public void test02() throws Exception{//mapString,String转jsonHashMapString,String map new HashMap();map.put(姓名,张三);map.put(性别,男);String json mapper.writeValueAsString(map);System.out.println(json字符串 json);//json转mapString,StringHashMapString,String map2 mapper.readValue(json, HashMap.class);System.out.println(java对象 map2);
}3.Map转 JSON, JSON 转 Map /*3.mapString,User转json, json转mapString,Userjson字符串 {一班:{name:张三,age:23},二班:{name:李四,age:24}}map对象 {一班User{name张三, age23}, 二班User{name李四, age24}}*/Testpublic void test03() throws Exception{//mapString,User转jsonHashMapString,User map new HashMap();map.put(一班,new User(张三,23));map.put(二班,new User(李四,24));String json mapper.writeValueAsString(map);System.out.println(json字符串 json);//json转mapString,UserHashMapString,User map2 mapper.readValue(json,new TypeReferenceHashMapString,User(){});System.out.println(java对象 map2);}
4.List转 JSON, JSON 转 List
/*4.ListString转json, json转 ListStringjson字符串 [张三,李四]list对象 [张三, 李四]
*/
Test
public void test04() throws Exception{//ListString转jsonArrayListString list new ArrayList();list.add(张三);list.add(李四);String json mapper.writeValueAsString(list);System.out.println(json字符串 json);//json转 ListStringArrayListString list2 mapper.readValue(json,ArrayList.class);System.out.println(java对象 list2);
}5.List转 JSON, JSON 转 List
/*5.ListUser转json, json转ListUserjson字符串 [{name:张三,age:23},{name:李四,age:24}]list对象 [User{name张三, age23}, User{name李四, age24}]*/
Test
public void test05() throws Exception{//ListUser转jsonArrayListUser list new ArrayList();list.add(new User(张三,23));list.add(new User(李四,24));String json mapper.writeValueAsString(list);System.out.println(json字符串 json);//json转ListUserArrayListUser list2 mapper.readValue(json,new TypeReferenceArrayListUser(){});System.out.println(java对象 list2);
}
