首页 > 代码库 > Ajax

Ajax

自从去年第一次写博客,现在已经将近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="http://www.mamicode.com/江苏">江苏</option>
 6         <option value="http://www.mamicode.com/浙江">浙江</option>
 7         <option value="http://www.mamicode.com/上海">上海</option>
 8         <option value="http://www.mamicode.com/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个小时,效率太低了,以后得加快

  

 

 

 

  

Ajax