谈论JavaScript中的ajax图形和文本
1.ajax介绍性案例
1.1构建一个网络环境
Ajax应该是大家都熟悉的。因为有了ajax,前台页面和服务器之间的数据传输变得非常容易,页面可以本地刷新。AJAX可以通过在后台与服务器交换少量数据,使网页异步更新。这意味着可以更新网页的一部分,而无需重新加载整个网页。
对于JavaWeb项目,ajax主要用于浏览器和服务器之间的数据传输。
如果只是简单的堆砌知识点,会比较枯燥,所以按照惯例,我就不继续介绍ajax了,而是写一个案例。
打开eclipse并创建一个新的web项目。
如果你不清楚JavaWeb项目,可以参考我之前的文章。我
目录结构:
?xml版本='1.0 '编码='UTF-8 '?web-app/web-app会好起来的,web项目也会完成。
暂时不要写下来,确保我们到目前为止的工作没有问题。
验证方法是在WebContent目录下创建一个新的空jsp页面,其中包含任何内容。
% @ page language=' Java ' ContentType=' text/html;charset=UTF-8 ' page encoding=' UTF-8 ' %!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www . w3 . org/TR/HTML 4/loose . DTD ' htmlhearteta http-equiv=' Content-Type ' Content=' text/HTML;Charset=utf-8' title在此插入标题/title/head body style=' padding :100 px ' h1 hello world/h1/body/html start Tomcat并运行此项目。
这没有错。
打开浏览器,输入访问地址。这里的tomcat端口号是80,默认情况下这不是必需的。
http://localhost/ajax/index.jsp
来了,没问题。
好的,这表明构建我们的网络项目没有问题。
1.2编写服务器程序Servlet
个人感知,本质安排
网络环境已经建立。接下来,让我们编写一个简单的Servlet程序。tomcat是一个服务器,现在其中有一个名为ajax的web项目,所以这些servlets就像web项目中的小函数一样。
你的电脑里有QQ、Word、杀毒软件等程序。web项目,即应用程序。本质上和你电脑上的QQ概念是一样的。
打开QQ就可以聊天、语音、视频。这些小函数,像JavaWeb项目一样,都是Servlet。
很多人都知道这个框架,比如著名的SpringMVC,里面包含了控制器。其实这些控制器是什么?不要害怕。它们实际上封装了Servlet,本质上是相同的。
当我们编写一个Servlet时,我们需要在web.xml中注册它,否则我们不会使用它。如果你安装了一个QQ,一定要在注册中心注册吗?不还是老样子吗?
好了,我们不多说了。让我们写一个小函数,也就是一个Servlet。
继承HttpServlet并重写doGet方法
导入Java . io . ioexception;导入javax . servlet . servletexception;导入javax . servlet . http . HttpServlet;导入javax . servlet . http . HttpServletrequest;导入javax . servlet . http . HttpServletResponse;公共类MyServlet扩展HttpServlet { @ overridedprotected void doGet(HttpServletrequest req,HttpServletResponse resp)引发ServletException,IOException { system . out . println(' 111 ');}}我们不会先在里面写什么。
接下来,我们需要在web.xml中注册这个Servlet
?xml版本='1.0 '编码='UTF-8 '?web-appservlet!-这里是servlet的名字-servlet-name my servlet/servlet-name servlet-class my servlet/servlet-class!-在这里写servlet类的包路径-/servlet servlet-映射!-这是地址映射-servlet-name my serv let/servlet-name!-在这里写Servlet映射地址-URL-pattern/my Servlet/URL-pattern/Servlet-mapping/web-appok。servlet注册后,让我们首先访问这个函数。
重启tomcat。
访问:http://localhost/ajax/MyServlet
1.3前台页面设计
服务器小程序几乎是一样的。现在我们需要编写前台页面,以便与服务器交互。此页面面向用户。换句话说,用户只能通过前台页面访问我们的Servlet。
我们写一个小案例,在页面上给服务器发一句话,然后服务器会给出回应。
就是这么一个简单的案例,主要是用来熟悉流程的。
为了简单起见,我不会自己调整css样式,只是使用bootstrap。
介绍bootstrap的核心css文件。
然后,修改index.jsp
% @ page language=' Java ' ContentType=' text/html;charset=UTF-8 ' page encoding=' UTF-8 ' %!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www . w3 . org/TR/HTML 4/loose . DTD ' htmlhearteta http-equiv=' Content-Type ' Content=' text/HTML;charset=UTF-8'link rel='样式表' href=' $ { page context . request . context path }/bootstrap/CSS/bootstrap . min . CSS ' title在此插入标题/titlestyle type='text/css '。容器{ margin-top :100 px;}/style script window . onload=function(){ var BTN=document . getelementbyid(' submit ');BTN . onclick=function(){ alert();}};/script/headsdydiv class=' container ' div class=' row ' div class=' col-LG-8 ' div class=' input-group ' input type=' text ' class=' form-control ' span class=' input-group-Bt N ' button ID=' submit ' class=' btnbtn-default ' type=' button ' submit/button/span/div/div/body/html页面效果:
1.4基于get模式的数据请求
当我们单击提交按钮时,我们将发出警报()。如果成功,则意味着点击事件没有问题。然后,继续写下代码。
以前我们都是通过表单提交的,但是这种情况下会出现一个问题,就是页面会刷新,代码相对比较难理解。
自从ajax问世以来,这种情况得到了很大的改善,当时的本地刷新技术还是很不错的。
我先给出实现代码:
BTN . onclick=function(){ var xhr=window。XMLHttpRequest?新的XMLHttpRequest():新的activexoobject(' Microsoft。XMLHTTP’);xhr.open('get ',' MyServlet?消息=' document . getelementsbytagname(' input ')[0]。值,真);xhr . send();xhr . onreadystatechange=function(){ if(xhr . readystate==4 xhr . status==200){ alert(xhr . responsetext);}};}同时修改MyServlet。
@ overrided protected void doGet(Httpservletrequest req,HttpServletResponse resp)引发ServletException,IOException { String msg=req . getparameter(' message ');system . out . println(msg);}重启tomcat并访问index.jsp页面。
现在浏览器一般都有调试功能。点击F12,将出现调试界面。然后,找一个网络,以谷歌浏览器为例。
网络视图将显示所有的数据交互,包括导入的js和css文件,以及各种请求和响应,这些都将显示在这里。
例如,现在我刷新页面
当我刷新时,服务器收到一个URL:http://localhost/Ajax/index . JSP。
这是一个请求。收到这个请求后,服务器返回给我index.jsp页面和bootstrap.min.css文件。
因为我确实在index.jsp介绍过bootstrap.min.css,他把它装在一起了。
现在,我将输入一个句子,然后单击提交,看看会发生什么。
我们将输入框的内容提交给服务器程序MyServlet
控制台已经接受了它。幸运的是,我们没有遇到汉字乱码的问题,所以先忘记乱码。
由于MyServlet中没有返回任何内容,因此警报为空。
好,让我们返回一个句子到浏览器。
@ overrided protected void doGet(Httpservletrequest req,HttpServletResponse resp)引发ServletException,IOException { String msg=req。getparameter(' message ');系统。出去。println(msg);resp。SetContentType(' text/html;charset=utf-8 ');PrintWriter out=resp。getwriter();out.println('你好,这是服务器返回的信息!');出去。flush();出去。close();}再次点击提交按钮
好了。
接下来,看一下请求的具体信息
在比对一下射流研究…代码,就一目了然了。
BTN。onclick=function(){ var xhr=window .XMLHttpRequest?新的XMLHttpRequest():新的activexoobject('微软.XMLHTTP’);xhr.open('get ',' MyServlet?消息='文档。getelementsbytagname(' input ')[0].值,真);xhr。send();xhr。onreadystatechange=function(){ if(xhr。readystate==4 xhr。status==200){ alert(xhr。response text);}};} readystates :
0: 请求未初始化
1: 服务器连接已建立,还没发送
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
当readyState等于四且状态为200 时,表示响应已就绪。
请求方式是去拿,并且只有当返回的状态码为200的时候,才会打印出responseText,这个就是对应的
out.println('你好,这是服务器返回的信息!');
这句话。
1.5 基于邮政方式的数据请求
得到方法会在统一资源定位器地址栏里显示你提交所带的值,邮政方法不会。所以,相对来说,邮政方法比较安全。
邮政方法在流程上和得到方式差不多,我就直接上代码了:
窗户。onload=function(){ var BTN=document。getelementbyid(' submit ');BTN。onclick=function(){ var xhr=window .XMLHttpRequest?新的XMLHttpRequest():新的activexoobject('微软.XMLHTTP’);xhr.open('post ',' MyServlet ',true);xhr。setrequestheader('内容类型','应用程序/x-www-form-URL编码');var post数据={ message :文档。getelementsbytagname(' input ')[0].值};var PostDataStr=(function(obj){//转成邮政需要的字符串var str=for(obj中的var prop){ str=prop '=' obj[prop]' ' }返回字符串;})(PostDATa);警报(PostDataStr);xhr。发送(PostDataStr);xhr。onreadystatechange=function(){ if(xhr。readystate==4 xhr。status==200){ alert(xhr。response text);}};}};MyServlet.java
导入Java。io。ioexception导入Java。io。版画作家;导入javax。servlet。servletexception导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse公共类我的视频扩展HttpServlet { @ overridedprotected void doGet(Httpservletrequest req,HttpServletResponse resp)引发ServletException,IOException { req。setcharacter encoding(' UTF-8 ');字符串消息=请求。getParameter(' message ');系统。出去。println(msg);resp。SetContentType(' text/html;charset=utf-8 ');PrintWriter out=resp。getwriter();out.println('你好,这是服务器返回的信息!');出去。flush();出去。close();} @ overrided protected void doPost(HttpServletrequest req,HttpServletResponse resp)抛出ServletException,IOException {doGet(req,resp);}}以上所述是小编给大家介绍的Java脚本语言中浅讲创建交互式、快速动态网页应用的网页开发技术图文详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:谈论JavaScript中的ajax图形和文本是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。