Ajax

Posted 2020-09-15

自从去年第一次写博客，现在已经将近5个月没有写过博客了，从今天开始，继续写博客。今天复习了下Ajax，对Ajax的异步也有了新的认识。Ajax就是为了提高效率而产生的，它可以用来局部刷新，这样就不用每一次对页面的数据读写都去刷新页面。直接上代码。

这只是一个Ajax的实现过程，如果去用Ajax，在GET或POST请求时，Ajax的用法有何不一样，以及通过Ajax如果与另一个页面的交互，说是页面不严谨，那也是java代码，只是在JSP页面中，用“<%  %>”引起来了，在另一个实例中，我是直接与后端交互。在做上一个项目，我也将Ajax用到SSH框架中，Ajax主要与Struts交互，即Struts中用到action层。

Ajax的原理并不是很难理解，只要多练几次，Ajax就可以完全掌握了。

首先第一点要说的是，Ajax对于IE7.0以下的浏览区，与我们现在用到的浏览器，如chrome，创建XMlHttpRequest对象的方式是不一样的，XMlHttpRequest是什么了？这是XMlHttp的一个组件，Ajax之所以能够局部刷新，主要得益于XMLHttpRequest对象。在IE7.0以下，创建XMlHttpRequest对象用的是ActiveXObject，而IE>=7.0的版本和其他浏览器都支持原生的XMlHttpRequest对象，所以创建对象时要做判断。

这是一种方法，判断创建XMLHttpRequest对象的类是否存在，存在的话就为IE7.0以下的浏览器，就用ActiveXObject创建，否则的话就是其他的浏览器，用原生的XMlHttpRequest类创建就是了。

1 var xmlHttp;
2           function createXmlHttpRequest() {
3               if (window.ActiveXObject){
4                   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
5               }else {
6                   xmlHttp = new XMLHttpRequest();
7               }
8           }

 

第二种方法是用到try-catch

 1  function createAjax() {
 2             var ajax=null;
 3             try{
 4                 ajax=new ActiveXObject("Microsoft.xmlhttp")
 5             }catch(e1) {
 6                 try{
 7                     ajax=new XMLHttpRequest();
 8                 }catch (e2){
 9                     alert("您的浏览器不支持Ajax");
10                 }
11             }
12             return ajax;
13 
14         }

我感觉用第二种方法更好一点，这样写既显得写代码的人水平高点，而且也不容易出错。

 

创建好了XMlHttpRequest对象之后，就是发送GET和POST请求了，发送这两种请求有点不一样

说到这两个请求，就得重温下这两个请求提交方式的一些知识点，

GET提交方式：                                                                                                       

　　　1、提交时，地址栏（url）后面会跟上参数，而且在url后面加上“？”，之后才是参数；                

　　　2、GET提交时，参数数据有限制，不超过1KB；                 　　　　　　　　　　　　　　　

　　　3、GET提交不安全，所以不宜提交敏感信息；　　　　　　　　　　　　　　　　　　　　　　

　　　4、浏览器直接访问的请求，默认提交方式是GET提交

 

POST提交方式：

1、url和参数是分开的，参数是跟在请求的实体内容中，参数之间用&隔开

2、POST提交没有参数数据大小设置

3、POST提交方式更安全

 

知道了这两种提交方式的不一样，那发送请求也就没有什么问题了

GET方式请求

1   var method="GET";
2   var url="/city.do";　　//url地址
3   var province=document.getElementById("province").value;　　//要传递的参数
4   var newUrl=url+"?province="+province;　　//url?参数，如果多个参数，要用&隔开
5   ajax.open(method,newUrl);　　//准备请求方式
6   ajax.send(null);　　//发送请求

 

POST请求

1  var method="POST";
2  var url="/city.do";　　    //url地址
3  ajax.open(method,url);　　//准备请求方式
4  ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");　　//这句话是发送POST请求和GET请求最大的不同，发送POST请求，一定要设置请求头
5  var newUrl=url+"?province="+province;　　//要传递的参数
6  ajax.send("position="+position);　　　　 //发送请求

 

当我们使用XMLHttpReREquest对象时，XMLHttpReREquest的对象的readyState属性值会发生改变，而readyState每改变一次都会触发readystatechange事件，一般我们使用onreadystatechange属性来注册该回调函数事件处理函数。

readyState的值时0~4，都代表不同的含义

0：未初始化，尚未调用open();

1:启动，已经调用了open();

2:发送，已经调用了send方法，但尚未接收到响应

3:接受，已经接受到部分数据

4:完成，已经接收到全部响应数据，而且已经可以在客户端使用了

 

在收到服务器响应后，响应的数据会自动填充到XMLHttpReREquest对象的属性中，有几个常用的属性

responseText：作为响应主体被返回的主体

responseXML:如果服务器响应的内容是“text/xml”或“application/xml”，那就返回xml内容，否则返回null

status：响应HTTP状态，200代表成功

statusText：状态说明

 

根据上面说的内容，就可以根据服务器返回的结果去继续下一步了

 1   ajax.onreadystatechange=function () {　　　　 //readyState的值发生改变，触发onreadystatechange事件
 2                 if (ajax.readyState==4){　　　 //完成，已经接收到全部响应数据，而且已经可以在客户端使用了
 3                     if (ajax.status==200){　  //成功响应HTTP状态
 4                         var setCity=document.getElementById("city");　　//下拉列表
 5                         //alert("1111");
 6                         setCity.options.length=1;　　
 7                         var xml=ajax.responseXML;　　//取得服务器响应的xml内容
 8                         var cityArray=xml.getElementsByTagName("city");　　　//根据city节点取得数据
 9                         //alert(cityArray.length);
10                         for(i=0;i<cityArray.length;i++){　　//将取得的数据用循环放到city的下拉列表中
11                             var city=cityArray[i].firstChild.nodeValue;
12                             var option=new Option(city,city);
13                             alert(city);
14                             setCity.add(option);
15                         }
16                     }
17                 }
18             }

 

再把<body>中的内容拿出来

 1 <body>
 2 
 3 省份<select name="province" id="province" onchange="getCity()">
 4         <option value="">请选择省份</option>
 5         <option value="江苏">江苏</option>
 6         <option value="浙江">浙江</option>
 7         <option value="上海">上海</option>
 8         <option value="newYork">newYork</option>
 9 
10 </select>
11 城市<select name="city" id="city">
12         <option value="">请选择城市</option>
13     </select>
14 
15 </body>

 

后端的代码

 1 @WebServlet(name = "ProvinceCityServlet",urlPatterns = "/city.do")
 2 public class ProvinceCityServlet extends HttpServlet {
 3     @Override
 4     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
 5         String province = req.getParameter("province");
 6         resp.setContentType("text/xml;charset=utf-8");
 7         PrintWriter writer = resp.getWriter();
 8         //System.out.println("[[[[[]]]]]"+province);
 9         writer.write("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
10         writer.write("<root>");
11         writer.write("<city>南京</city>");
12         writer.write("<city>苏州</city>");
13         writer.write("<city>无锡</city>");
14         writer.write("</root>");
15         writer.flush();
16         writer.close();
17 
18     }
19 
20     @Override
21     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
22         doPost(req,resp);
23     }
24 }

@WebServlet(name = "ProvinceCityServlet",urlPatterns = "/city.do") 这里我用的是注解的方式写的，也可以在web.xml定义

 注意："/city.do"的"/"一定不能少

1   <servlet>
2         <servlet-name>ProvinceCityServlet</servlet-name>
3         <servlet-class>servlet.ProvinceCityServlet</servlet-class>
4     </servlet>
5 
6     <servlet-mapping>
7         <servlet-name>ProvinceCityServlet</servlet-name>
8         <url-pattern>/city.do</url-pattern>
9     </servlet-mapping>

好了，一个AJax的文章终于写好了，写这个前前后后花了2个小时，效率太低了，以后得加快