码迷,mamicode.com
首页 > 其他好文 > 详细

每日一记--Axjx

时间:2018-08-20 22:55:41      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:rpo   and   声明   syn   处理   信息   read   请求   content   

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

 

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 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app version="2.4" 
 3     xmlns="http://java.sun.com/xml/ns/j2ee" 
 4     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 5     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
 6     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
 7   <welcome-file-list>
 8     <welcome-file>my.jsp</welcome-file>
 9     <welcome-file>index.jsp</welcome-file>
10   </welcome-file-list>
11  <servlet>
12       <servlet-name>AjaxServlet</servlet-name>
13       <servlet-class>com.bjsxt.Servlet.AjaxServlet</servlet-class>
14   </servlet>
15   <servlet-mapping>
16       <servlet-name>AjaxServlet</servlet-name>
17       <url-pattern>/ajax</url-pattern>
18   </servlet-mapping>
19 </web-app>
View Code

 

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

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

写的有点浮躁,内心还得慢慢消化,静心!!!

 

每日一记--Axjx

标签:rpo   and   声明   syn   处理   信息   read   请求   content   

原文地址:https://www.cnblogs.com/ZNwithLC/p/9508357.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!