说一下Ajax技术

2016-12-16 07:48:57来源:CSDN作者:java__project人点击

第七城市

    距离上次写博客也过去好几个月了(其中,也曾想要接着写,无奈...不记得密码了,九牛二虎之力又找回来了)

    今天来说说这个Ajax,从最基本的开始吧,用的很多,更有甚者整个页面的请求都是用的Ajax,确实不容易啊!

Ajax:原理:

说白了,就是通过XMLHttpRequest对象来向服务器发起异步的请求,然后从服务器端获取数据,再用js来操作Dom从而更新页面的局部刷新效果。也挺简单的

代码实现:

接下来写一下最原始的写法用javascript来写下:(getqing'qiu)



  • <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  • <html>  
  • <head>  
  • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  • <title>Insert title here</title>  
  • <script type="text/javascript">  
  •     function get() {  
  •         // 创建 XMLHTTPRequest 对象  
  •         var xhr = ajaxFunction();  
  •         // 设置监听器  
  •         xhr.onreadystatechange = function() {  
  •             //  响应状态  
  •             if(xhr.readyState == 4) {  
  •                 // 状态码  
  •                 if(xhr.status == 200) {  
  •                     var data = xhr.responseText;  
  •                     // 获取 div  
  •                     var div = document.getElementById("div");  
  •                     div.innerHTML = data;  
  •                 }  
  •             }  
  •         }  
  •         // 打开链接  
  •         xhr.open("GET""${pageContext.request.contextPath}/method?username=admin&password=123&time=" + new Date().getTime(), true);  
  •         // 发送数据  
  •         xhr.send(null);  
  •     }  
  •       
  •     // 创建一个 XMLHttpRequest 对象,利用此对象与服务器进行通信,是 AJAX 技术的核心  
  •     function ajaxFunction(){  
  •        var xmlHttp;  
  •        try// Firefox, Opera 8.0+, Safari  
  •             xmlHttp=new XMLHttpRequest();  
  •         }  
  •         catch (e){  
  •            try{// Internet Explorer  
  •                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  
  •               }  
  •             catch (e){  
  •               try{  
  •                  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  
  •               }  
  •               catch (e){}  
  •               }  
  •         }  
  •       
  •         return xmlHttp;  
  •      }  
  • </script>  
  • </head>  
  • <body>  
  • <h1>AJAX的GET请求的入门</h1>  
  • <input type="button" value="get请求的AJAX" onclick="get()"><br/>  
  • <div id="div" style="width: 300px; height: 300px; border: 1px solid black;"></div>  
  • </body>  
  • </html>     

    这里有很多需要注意的地方:

    1.创建XMLHttpRequest对象,那么这里要根据浏览器的类型进行选择性的创建,例如上述代码中显示,IE浏览器创建的方式有所区别

    2.另外异步请求一般分4步:

    a.声明XMLHttpRequest对象

    b.设置监听

    一个是响应状态(0~5),分别是未发送请求(0),到响应完成(5),五个状态

    另一个是响应状态码(200),代表服务器完响应,并且响应成功

    c.打开链接

    注意这里和post请求有所区别

    另外请求路径后加时间戳是为了每次刷新不记录上次结果,就是避免缓存

    d.发送数据

    因为是get请求,那么数据不在请求正文中(具体细节请查看get请求和post请求的区别)


    接下来是post请求:

    1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    3. <html>  
    4. <head>  
    5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    6. <title>Insert title here</title>  
    7. <script type="text/javascript">  
    8.     function post() {  
    9.         // 创建XMLHttpRequest对象  
    10.         var xhr = createXMLHttpRequest();  
    11.         // 设置监听器  
    12.         xhr.onreadystatechange = function () {  
    13.             if(xhr.readyState == 4) {  
    14.                 if(xhr.status == 200) {  
    15.                     var data = xhr.responseText;  
    16.                     // 获取div  
    17.                     var div = document.getElementById("div");  
    18.                     div.innerHTML = data;  
    19.                 }  
    20.             }  
    21.         }  
    22.         // 打开链接  
    23.         xhr.open("POST""${pageContext.request.contextPath}/method"true);  
    24.         // 设置请求头  
    25.         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
    26.         // 发送数据  
    27.         xhr.send("username=张三&password=123");  
    28.     }  
    29.       
    30.     // 创建一个 XMLHttpRequest 对象,利用此对象与服务器进行通信,是 AJAX 技术的核心  
    31.     function createXMLHttpRequest(){  
    32.        var xmlHttp;  
    33.        try// Firefox, Opera 8.0+, Safari  
    34.             xmlHttp=new XMLHttpRequest();  
    35.         }  
    36.         catch (e){  
    37.            try{// Internet Explorer  
    38.                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  
    39.               }  
    40.             catch (e){  
    41.               try{  
    42.                  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  
    43.               }  
    44.               catch (e){}  
    45.               }  
    46.         }  
    47.       
    48.         return xmlHttp;  
    49.      }   
    50. </script>  
    51. </head>  
    52. <body>  
    53. <h1>AJAX的GET请求的入门</h1>  
    54. <input type="button" value="POST请求方式" onclick="post()">  
    55. <div id="div" style="width: 300px; height: 300px; border: 1px solid black"></div>  
    56. </body>  
    57. </html>  


    请注意:

    post请求和get请求的区别:

    1.请求参数的位置不同,get在路径后,post在正文中

    2.post请求需要设置请求头信息


    以上是用javascript进行编写的Ajax相当的麻烦!

    那么jQuery就是一种轻量级的javascript框架,其中对ajax做了很好的封装,简便了太多


    接下来代码演示下jQuery操作AJax:

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head runat="server">  
    4. <title></title>  
    5.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    6.  <!--   引入jQuery -->  
    7. <script src="../../jQuery/jquery-1.4.2.js"></script>  

    8. <script language="javascript">  
    9. $(function() {  
    10.     $("#send").click(function() {  
    11.         $.post("demo.jsp", {"username": $("#username").val(), "content": $("#content").val()}, function(responseText) {  
    12.             var data = $.parseJSON(responseText);  
    13.             $("#resText").html(data.username + " " + data.content);  
    14.         }/* , "json" */);  
    15.     });  
    16. });  
    17. </script>  
    18. </head>  
    19. <body>  
    20. <form id="form1">  
    21.   
    22.  <p>姓名: <input type="text" name="username" id="username" /></p>  
    23.  <p>内容: <textarea name="content" id="content" > 
    24. </form >

    首先用jQuery操作要引入jQuery的js文件:那么

    接下提交表单进行异步验证非常简单(触发点击事件,发送用户名和密码到.jsp中进行验证,返回结果)

    后边返回的结果又要用到JSON解析,这个东西下次再说吧!


    总结:

    Ajax优点:

    1.最大的一点是页面无刷新,给用户的体验非常好
    2.使用异步方式与服务器通信,不需要打断用户操作,具有更加迅速的响应能力
    3.ajax 的原则是“按需取数据”,最大程度的减少冗余请求,减少服务器的负荷


    Ajax缺点:

    1.破坏浏览器后退按钮的正常行为,在动态更新页面后,用户无法回到前一个页面状态

    2.依旧使用javascript作为Ajax的引擎,而js的兼容性。。还是个问题


  • 第七城市

    最新文章

    123

    最新摄影

    微信扫一扫

    第七城市微信公众平台