每日一记--Axjx

最新推荐文章于 2023-02-19 10:00:00 发布

abbxutk9601

最新推荐文章于 2023-02-19 10:00:00 发布

阅读量222

点赞数

文章标签： java javascript web.xml ViewUI

原文链接：http://www.cnblogs.com/ZNwithLC/p/9508357.html

版权

在学习一样新的技术时，首先应该对其基本的概念要比较熟悉。

1、为什么需要学Axjx，它是什么？

学习Axjx是为什么呢？解决怎么的问题？

对这个问题，其实就我本身来说TMD就是为了找工作，爱问人家这个问题~~~。

好了，言归正传~~

本质的问题是由于在传统的浏览器与服务器进行交互的时候呢，当浏览器局部内容需要更改时，浏览器会进行全局页面的刷新，这个让人很不爽，明明我只需要修改一部分内容，为什么要将页面整体刷新一篇呢？

所以！正是针对这样的一个问题，Axjx技术就coming。

Axjx的全称是：Asynchronous Javascript And XML。是一个浏览器与服务器交互的一种技术。

怎么用呢？

 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9   <head>
10     <base href="<%=basePath%>">
11     
12     <title>测试</title>
13     
14     <meta http-equiv="pragma" content="no-cache">
15     <meta http-equiv="cache-control" content="no-cache">
16     <meta http-equiv="expires" content="0">    
17     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
18     <meta http-equiv="description" content="This is my page">
19     <!--
20     <link rel="stylesheet" type="text/css" href="styles.css">
21     -->
22     
23     <!-- 声明JS代码域 -->
24     <script type="text/javascript">
25         function getData(){
26         //创建Ajax引擎
27             var ajax;
28             if(window.XMLHttpRequest){
29                 ajax=new XMLHttpRequest();
30             }else if(window.ActiveXObject){
31                 ajax=new ActiveXObject("Msxml2.XMLHTTP");
32             }
33         //复写onreadystatement函数
34         ajax.onreadystatechange=function(){
35         if(ajax.readyState==4){
36                 //获取元素对象
37                 var showdiv=document.getElementById("showdiv");
38                 //判断Ajax状态码
39                 if(ajax.status==200){
40                     //获取相应内容
41                     var result=ajax.responseText;
42                     alert(result);
43                     //修改元素内容
44                     showdiv.innerHTML=result;
45                 }else if(ajax.status==404){
46                     //修改元素内容
47                     showdiv.innerHTML="请求资源不存在";
48                 }else if(ajax.status==404){
49                     //修改元素内容
50                     showdiv.innerHTML="服务器繁忙";
51                 }
52             }
53         }
54         //发送请求
55         ajax.open("get","ajax");
56         ajax.send(null);
57         alert("哈哈哈");
58         }
59     </script>
60     <style type="text/css">
61         #showdiv{
62             border:solid 1px;
63             width:200px;
64             height:100px;
65         }
66     </style>
67 
68 
69 
70   </head>
71   
72   <body>
73         <h3>欢迎登录</h3>
74         <hr>
75         <input type="button" value="测试" onclick="getData()"/>
76         <div id="showdiv"></div>
77   </body>
78 </html>

View Code

通过直接上代码，可能更加通俗易懂些！

①创建XMLHttpRequest或者ActiveXObject。

②复写onreadystatechange功能函数。

③发送请求

其中通过重写服务器中的HttpServlet中的service可以处理请求信息。

再配置web.xml文件可以配置路径。

如下：

 1 package com.bjsxt.Servlet;
 2 
 3 import java.io.IOException;
 4 
 5 import javax.servlet.ServletException;
 6 import javax.servlet.ServletRequest;
 7 import javax.servlet.ServletResponse;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 public class AjaxServlet extends HttpServlet{
13     public void service(ServletRequest req, ServletResponse resp)
14             throws ServletException, IOException {
15         //设置请求相应编码格式
16         //设置相应编码格式
17             resp.setCharacterEncoding("utf-8");
18             resp.setContentType("text/html;charset=utf-8");
19             
20         //获取请求信息
21         //处理请求信息
22         //相应处理结果
23             resp.getWriter().write("今天学习Ajax");
24     }
25 }

View Code

 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9   <head>
10     <base href="<%=basePath%>">
11     
12     <title>测试</title>
13     
14     <meta http-equiv="pragma" content="no-cache">
15     <meta http-equiv="cache-control" content="no-cache">
16     <meta http-equiv="expires" content="0">    
17     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
18     <meta http-equiv="description" content="This is my page">
19     <!--
20     <link rel="stylesheet" type="text/css" href="styles.css">
21     -->
22     
23     <!-- 声明JS代码域 -->
24     <script type="text/javascript">
25         function getData(){
26         //创建Ajax引擎
27             var ajax;
28             if(window.XMLHttpRequest){
29                 ajax=new XMLHttpRequest();
30             }else if(window.ActiveXObject){
31                 ajax=new ActiveXObject("Msxml2.XMLHTTP");
32             }
33         //复写onreadystatement函数
34         ajax.onreadystatechange=function(){
35         if(ajax.readyState==4){
36                 //获取元素对象
37                 var showdiv=document.getElementById("showdiv");
38                 //判断Ajax状态码
39                 if(ajax.status==200){
40                     //获取相应内容
41                     var result=ajax.responseText;
42                     //alert(result);
43                     //修改元素内容
44                     showdiv.innerHTML=result;
45                 }else if(ajax.status==404){
46                     //修改元素内容
47                     showdiv.innerHTML="请求资源不存在";
48                 }else if(ajax.status==500){
49                     //修改元素内容
50                     showdiv.innerHTML="服务器繁忙";
51                 }
52             }
53         }
54         //发送请求
55         ajax.open("get","ajax",true);
56         ajax.send(null);
57         alert("哈哈哈");
58         }
59     </script>
60     <style type="text/css">
61         #showdiv{
62             border:solid 1px;
63             width:200px;
64             height:100px;
65         }
66     </style>
67 
68 
69 
70   </head>
71   
72   <body>
73         <h3>欢迎登录403峡谷</h3>
74         <hr>
75         <input type="button" value="测试" onclick="getData()"/>
76         <div id="showdiv"></div>
77   </body>
78 </html>

View Code

好了！今下午暂时是学会了Axjx的基本用法，感觉不用那么害怕了！！！

顿时感觉学习新东西也没有那么可怕，一步步来~~~

写的有点浮躁，内心还得慢慢消化，静心！！！

转载于:https://www.cnblogs.com/ZNwithLC/p/9508357.html

abbxutk9601

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每日一记--Axjx

在学习一样新的技术时，首先应该对其基本的概念要比较熟悉。1、为什么需要学Axjx，它是什么？学习Axjx是为什么呢？解决怎么的问题？对这个问题，其实就我本身来说TMD就是为了找工作，爱问人家这个问题~~~。好了，言归正传~~本质的问题是由于在传统的浏览器与服务器进行交互的时候呢，当浏览器局部内容需要更改时，浏览器会进行全局页面的刷新，这个让人很不爽，明明我只需要...
复制链接

扫一扫