设计类网站模板,求购信息平台,酒店网站建设流程图,网站群建设 会议 主持现在#xff0c;在网页中通过超链接#xff0c;表单就可以向后端发送请求#xff0c;后端也可以正常响应内容。
以前通过表单访问后端的请求方式称为同步请求 同步请求 当网页与后端交互时#xff0c;前端不能再进行其他操作 服务器端响应回来的内容#xff0c;会把整个浏…现在在网页中通过超链接表单就可以向后端发送请求后端也可以正常响应内容。
以前通过表单访问后端的请求方式称为同步请求 同步请求 当网页与后端交互时前端不能再进行其他操作 服务器端响应回来的内容会把整个浏览器的内容覆盖掉 这种请求方式在前后端交互时就不太友好了 现在的前后端交互请求都是使用的是异步请求
举例说明
前端注册网页(实现同步请求)
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescriptfunction checkAccount(account){//同步请求已经被抛弃了location.href http://127.0.0.1:8088/dormServer/register?accountaccount;}function relogin(){location.href http://127.0.0.1:8848/webtest/login.html;}/script/headbodyform methodpost账号:input typetext nameaccount value onblurcheckAccount(this.value)/ span idmsgid/spanbr/密码:input typepassword namepassword value/ br/input typebutton value提交 onclickrelogin()//form/body
/html 在注册界面输入好账号(已存在)后 当鼠标焦点不在账号栏时 页面直接被响应到的信息覆盖了后续操作无法进行。所以同步请求就被无情抛弃了~ 异步请求 同时可以做多件事情(前端与服务器交互时不影响前端网页其他操作) 使用js中提供的XMLHttpRequest对象实现发送异步请求和接收服务器响应 异步请求时会出现跨域访问问题浏览器默认不允许js对象接收来自其他服务器响应的内容。
举例说明 将前端网页的方法中将异步代码实现
function checkAccount(account){//异步请求使用js对象发送请求var httpobj new XMLHttpRequest();//封装请求地址和数据httpobj.open(get,http://127.0.0.1:8088/dormServer/register?accountaccount,true);//发送请求httpobj.send();//接收响应httpobj.onreadystatechange function(){//httpobj.responseText; 获得到响应的内容document.getElementById(msgid).innerHTML httpobj.responseText;}}
在注册界面输入好账号(已存在)后 当鼠标焦点不在账号栏时从后端响应回来的信息就会立刻附在账号栏后反馈给用户。 但如果有很多种需要实时为用户反馈信息的话这种异步请求的实现代码就非常繁琐在多个前端网页也显得非常冗余。 所以就有了axios框架去封装异步请求的代码减少了代码的冗余。
axios axios 是一个HTTP 的网络请求库. !-- 导入axios框架 -- script srcjs/axios.min.js/script 然后注册网页的前端方法中的异步请求就会变成
function checkAccount(account){//axios框架对异步请求进行封装axios.get(http://127.0.0.1:8088/dormServer/register?accountaccount).then((resp){console.log(resp);document.getElementById(msgid).innerHTML resp.data;//resp.data取出后端响应的内容});} 极大减少了代码的数量增加了代码的观赏性。 跨域问题
不同服务之间进行访问
只要请求协议域名端口其中一项不同就属于跨域访问
在后端过滤器中响应时告知前端本次响应是安全的允许跨域访问
跨域问题是一个前端问题也可以在后端解决也可以在前端解决 配置跨域过滤器
public class CorsFilter implements Filter {public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)throws IOException, ServletException {HttpServletResponse httpResponse (HttpServletResponse) servletResponse;HttpServletRequest httpRequest (HttpServletRequest) servletRequest;//允许携带Cookie时不能设置为* 否则前端报错httpResponse.setHeader(Access-Control-Allow-Origin, httpRequest.getHeader(origin));//origin允许所有请求跨域,前期都是自己的浏览器访问自己的服务器也可以使用回环地址httpResponse.setHeader(Access-Control-Allow-Methods, *);//允许跨域的请求方法GET, POST, HEAD 等httpResponse.setHeader(Access-Control-Allow-Headers, *);//允许跨域的请求头httpResponse.setHeader(Access-Control-Allow-Credentials, true);//是否携带cookiefilterChain.doFilter(servletRequest, servletResponse);}
} 在web.xml文件中配置注册跨域过滤器
!--配置允许跨域过滤器--filterfilter-namecorsfilter/filter-namefilter-classcom.ffyc.dormServer.filter.CorsFilter/filter-class/filterfilter-mappingfilter-namecorsfilter/filter-nameurl-pattern/*/url-pattern/filter-mapping json json javaScript object Notation javaScript对象表示法 两种不同的语言之间如何进行数据交互(例如C语言程序 与 java程序之间要进行数据交互) json是一种公认的js识别的对象表示法对于java而言就是一种特定格式的字符串 对象{键:值,键:值} 例如{name:jim,age:20} 集合[{键:值,键:值}{键:值,键:值}]
模拟json转换数据格式 1、写一个SearchServlet类
public class SearchServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String name req.getParameter(name);//模拟从数据库根据名字查询学生所有信息然后叫数据封装到一个学生对象中Student student new Student();student.setNum(101);student.setName(name);student.setGender(男);student.setAge(20);PrintWriter printWriter resp.getWriter();ObjectMapper objectMapper new ObjectMapper();String jsonstr objectMapper.writeValueAsString(student);printWriter.print(jsonstr);//打印响应一个学生对象} 2、在web.xml文件中配置 SearchServlet
servletservlet-namesearch/servlet-nameservlet-classcom.ffyc.dormServer.web.SearchServlet/servlet-class/servletservlet-mappingservlet-namesearch/servlet-nameurl-pattern/search/url-pattern/servlet-mapping 在前端写一个search.html
!DOCTYPE html
htmlheadmeta charsetutf-8title/title!-- 导入axios框架 --script srcjs/axios.min.js/scriptscriptfunction search(){var name document.getElementById(nameid).value;axios.get(http://127.0.0.1:8088/dormServer/search?namename).then((resp){if(resp.data.code 200){console.log(resp.data);alert(resp.data.massage);document.getElementById(numid).innerHTML resp.data.data.num;document.getElementById(nameid1).innerHTML resp.data.data.name;document.getElementById(genderid).innerHTML resp.data.data.gender;document.getElementById(ageid).innerHTML resp.data.data.age;}else if(resp.data.code 500){alert(resp.data.massage);}});}/script/headbodyinput typetext idnameid/input typebutton value搜索 onclicksearch()/div学号span idnumid/span姓名span idnameid1/span性别span idgenderid/span年龄span idageid/span/div/body
/html
测试json 打开search网页 输入张三后后端的json就将从数据库得到的信息转换成json的数据格式响应回前端并显示上去
