上海做征信服务的公司网站,专门做字体设计的网站,网站建设在作用是什么意思,网站兼容工具day62
AJAX
概念 AJAX#xff1a; Asynchronous Javascript And XML AJAX是一种无需重新加载整个网页的情况下#xff0c;能够更新部分网页的技术 AJAX是一种用于创建快速动态网页的技术 通过在后台与服务器进行少量数据交换#xff0c;AJAX可以使网页实现异步更新 传统…day62
AJAX
概念 AJAX Asynchronous Javascript And XML AJAX是一种无需重新加载整个网页的情况下能够更新部分网页的技术 AJAX是一种用于创建快速动态网页的技术 通过在后台与服务器进行少量数据交换AJAX可以使网页实现异步更新 传统的网页如果需要更新内容必须要重新加载整个网页而AJAX不需要 工作原理 工作原理图 AJAX案例 使用AJAX来实现一个判断用户名是否存在的案例 %--Created by IntelliJ IDEA.User: AdministratorDate: 2024/5/31Time: 9:06To change this template use File | Settings | File Templates.
--%
% page contentTypetext/html;charsetUTF-8 languagejava %
html
headtitleregistry/title
/head
body
form actionregistry methodpost
username: input typetext nameusername οnblurcheckUsername() idusername /SPAN idusernameSpan/spanbr /
password: input typepassword namepassword /br /
input typesubmit valueregistry /
/form
scriptfunction checkUsername(){var username document.getElementById(username).value;
// alert(username)
// 原生AJAX开发有四个步骤// 1. 创建XMLHttpRequest对象// 2. 使用XMLHttpRequets对象的open方法创建请求参数请求方式请求地址是否异步// 3. 使用XMLHttpRequest对象的send方法发送请求参数请求参数// 4. 使用XMLHttpRequest对象的onreadystatechange事件监听请求状态参数请求回调函数var xhr new XMLHttpRequest();
xhr.open(GET,checkUser?usernameusername,true);
xhr.send();
xhr.onreadystatechange function(){if(xhr.readyState 4 xhr.status 200){var result xhr.responseText;
// alert(result)
if(result 1){// alert(用户名已存在);document.getElementById(usernameSpan).innerHTML FONT COLORRED用户名已存在/FONT;}else{// alert(用户名可用);document.getElementById(usernameSpan).innerHTML FONT COLORGREEN用户名可用/FONT;}}}
}
/script
/body
/html 其中open方法中的三个参数 请求方式一般是get或者post 请求的url这个url将交给后端进行处理 是否是异步使用AJAX一般都是期望使用异步所以传递的参数为true 该open方法中的第二个参数url的值为checkUser那么会将请求交给checkUser所对应的servlet还有问号传参 只有真正指向了XMLHttpRequest对象的send方法才真正将请求交给了后端 后端将执行checkUser所对应的Servlet package com.saas.day62;
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(/checkUser)
public class CheckUserServlet extends HttpServlet {
Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding(utf-8);resp.setCharacterEncoding(utf-8);resp.setContentType(text/html;charsetutf-8);
String username req.getParameter(username);
if(admin.equalsIgnoreCase(username)){resp.getWriter().write(1);}else{resp.getWriter().write(0);}}
} 该Servlet中动态拿到用户从前端传递过来的username拿到username与后台数据库进行比对当前案例是模拟 如果用户名存在则使用HttpServletResponse对象的getWriter方法的write方法将1写给前端如果不存在则将0写给前端 这样就又回到了Registry.jsp页面 来到的AJAX的第四部解释XMLHttpRequest对象的responseText可以获取到这个1或者0 通过获取到的1或者0动态更新当前页面的span内容让它正确显示用户的提示信息 XMLHttpRequest
创建对象 XMLHttpRequest对象是AJAX的基础 所有的现代浏览器都支持该对象新版本直接new关键字可以创建老版本IE5或者IE6需要使用ActiveObject 该对象用于在后台与服务器交换数据。 var xhr new XMLHttpRequest(); // 主流浏览器都支持
var xhr new ActiveXObject(Microsoft.XMLHTTP); // ie5或者ie6 var xhr ;
if(window.XMLHttpRequest){ // 主流浏览器xhr new XMLHttpRequest();} else{ // ie5或者ie6xhr new ActiveXObject(Microsoft.XMLHTTP);} XMLHttpRequest请求 如需将请求发送到服务器我们使用XMLHttpRequest对象的open()和send()方法 xhr.open(method, url, async);
xhr.send(); open方法 参数描述methodGET或者POST代表请求方式url请求在服务器上的位置async是否是异步true为异步false为同步 send方法将请求发送到服务器 readyState 每当readyState改变时就会触发onreadystatechange事件 在onreadystatechange事件中我们规定当服务器响应已做好处理的准备是所执行的任务 readyState属性存有XMLHttpRequest对象的状态信息 当readyState值为4时status为200时表示响应已就绪 status的值的对照表 响应码描述200交易成功404请求资源未找到500服务器内部错误405请求方式不正确 readyState readyState值描述0请求未初始化1服务器连接已建立2请求已接收3请求处理中4请求已完成且响应已就绪 XMLHttpRequest响应 如需获取来自服务器的响应可以使用XMLHttpRequest对象的responseText或者responseXML属性 属性描述responseText获取字符串形式的响应数据responseXML获取XML格式的响应数据 回调函数 回调函数时一种以参数形式传递给另一个函数的函数 该函数调用包含URL以及发生onreadystatechange事件时执行的任务 %--Created by IntelliJ IDEA.User: AdministratorDate: 2024/5/31Time: 9:06To change this template use File | Settings | File Templates.
--%
% page contentTypetext/html;charsetUTF-8 languagejava %
html
headtitleregistry/title
/head
body
form actionregistry methodpost
username: input typetext nameusername οnblurcheckUsername() idusername /SPAN idusernameSpan/spanbr /
password: input typepassword namepassword /br /
input typesubmit valueregistry /
/form
scriptfunction checkUsername(){var username document.getElementById(username).value;
// alert(username)
// 原生AJAX开发有四个步骤// 1. 创建XMLHttpRequest对象// 2. 使用XMLHttpRequets对象的open方法创建请求参数请求方式请求地址是否异步// 3. 使用XMLHttpRequest对象的send方法发送请求参数请求参数// 4. 使用XMLHttpRequest对象的onreadystatechange事件监听请求状态参数请求回调函数var xhr ;
if(window.XMLHttpRequest){ // 主流浏览器xhr new XMLHttpRequest();} else{ // ie5或者ie6xhr new ActiveXObject(Microsoft.XMLHTTP);}
xhr.open(GET,checkUser?usernameusername,true);
xhr.send();
xhr.onreadystatechange function(){alert(xhr.readyState)if(xhr.readyState 4 xhr.status 200){var result xhr.responseText;
// alert(result)
if(result 1){// alert(用户名已存在);document.getElementById(usernameSpan).innerHTML FONT COLORRED用户名已存在/FONT;}else{// alert(用户名可用);document.getElementById(usernameSpan).innerHTML FONT COLORGREEN用户名可用/FONT;}}}
}
/script
/body
/html JSON
简介 JSON JavaScript Object notationjs的对象标记是一种轻量级的数据交换格式。 完全独立于编程语言的文本格式来存储和表示数据 简洁、清晰的层次结构使得JSON成为理想的数据交换语言 易于阅读和编写同时也易于机器解析和生成并有效地提高网络传输效率 相对于xml格式会显得更加简单 studentsstudentsid9527/sidnamezhouxingxing/namescore99/scorebirthyear1999/yearmonth11/monthday11/day/brith/studentstudentsid9527/sidnamezhouxingxing/namescore99/score/studentstudentsid9527/sidnamezhouxingxing/namescore99/score/studentstudentsid9527/sidnamezhouxingxing/namescore99/score/studentstudentsid9527/sidnamezhouxingxing/namescore99/score/student
/students 相较于以上的xml格式的数据如果使用JSON将以如下方式呈现 [{sid: 9527, name: zhouxingxing, score:99, birth:{year: 1999, month: 11, day: 11}},{sid: 9527, name: zhouxingxing, score:99, birth:{year: 1999, month: 11, day: 11}},{sid: 9527, name: zhouxingxing, score:99, birth:{year: 1999, month: 11, day: 11}},{sid: 9527, name: zhouxingxing, score:99, birth:{year: 1999, month: 11, day: 11}},{sid: 9527, name: zhouxingxing, score:99, birth:{year: 1999, month: 11, day: 11}}
] 语法 []代表的时JSON数组 {}代表的时JSON对象 表示属性名或者字符串类型的值 表示属性和属性值之间的间隔符 代表多个属性的间隔或者时多个元素的间隔 FastJSON FastJSON是一个Java库可以将Java对象转换成JSON格式也可以将JSON格式的字符串转换为Java对象 该类库提供了toJSONString和parseObject方法将Java对象与JSON对象相互转换 package com.saas.test;
import com.alibaba.fastjson.JSON;
import com.saas.entity.Birth;
import com.saas.entity.Student;
import java.util.ArrayList;
import java.util.List;
public class TestJSON01 {
public static void main(String[] args) {Student s new Student();
s.setSid(1);s.setName(张三);
// s.setAge(20);s.setSex(男);s.setAddress(北京);s.setPhone(123456789);
Birth birth new Birth();birth.setMonth(1);birth.setDay(1);birth.setYear(2000);
s.setBirth(birth);
System.out.println(s);
System.out.println();
String stuJson JSON.toJSONString(s);System.out.println(stuJson);
System.out.println();
Student s2 JSON.parseObject(stuJson, Student.class);System.out.println(s2);
System.out.println();
ListStudent stus new ArrayList();
stus.add(s);stus.add(s2);
String stusJson JSON.toJSONString(stus);System.out.println(stusJson);
System.out.println();
ListStudent stus2 JSON.parseArray(stusJson, Student.class);System.out.println(stus2);}
} 该FastJSON的实现需要依赖于fastjson的第三方jar
