在学习一样新的技术时，首先应该对其基本的概念要比较熟悉。
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 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>
通过直接上代码，可能更加通俗易懂些！
①创建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 }
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 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>
好了！今下午暂时是学会了Axjx的基本用法，感觉不用那么害怕了！！！
顿时感觉学习新东西也没有那么可怕，一步步来~~~
写的有点浮躁，内心还得慢慢消化，静心！！！