ajx技術解析以及模擬jQuery封裝

本文轉載自查看原文 2015-10-28 10:53 1992

1.后台處理程序

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String username = request.getParameter("username");
    String password = request.getParameter("password");
    
    
    System.out.println(username+"=========="+password);
    
    
    out.print("響應內容-->姓名:" +username+",密碼:"+password);
%>

2.get方式請求

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Ajax實現前后台交互</title>
 8 </head>
 9 <body>
10     <form action="#" method="">
11         <input type="text" name="username" id="username" />
12         <input type="password" name="password" id="password" />
13         <input type="button" value="ajax登錄" onclick="tzLogin();" />
14     </form>
15     
16     <div id="result"></div>    
17     <script type="text/javascript">
18     
19         function tzLogin(){
20             var username = document.getElementById("username").value;
21             var password = document.getElementById("password").value;
22             var params = "?username="+username+"&password="+password+"&method=get";
23         
24             //創建一個Ajax對象
25             var xhr = new XMLHttpRequest();
26             
27             
28             xhr.onreadystatechange = function(){
29                 if(this.readyState == 4 && this.status == 200){
30                     document.getElementById("result").innerText = this.responseText;
31                 }
32                 
33             };
34             //true代表異步
35             xhr.open("get","login.jsp"+params,true);
36             xhr.send();
37         }
38     </script>
39 </body>
40 </html>

3.post方式請求

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Ajax實現前后台交互</title>
 8 </head>
 9 <body>
10     <form action="#" method="">
11         <input type="text" name="username" id="username" />
12         <input type="password" name="password" id="password" />
13         <input type="button" value="ajax登錄" onclick="tzLogin();" />
14     </form>
15     
16     <div id="result"></div>
17     <script type="text/javascript">
18         
19         
20         function tzLogin(){
21             var username = document.getElementById("username").value;
22             var password = document.getElementById("password").value;
23             var params = "username="+username+"&password="+password+"&method=post";
24         
25             //創建一個Ajax對象
26             var xhr = new XMLHttpRequest();
27             
28             xhr.onreadystatechange = function(){
29                 if(this.readyState == 4 && this.status == 200){
30                     document.getElementById("result").innerText = this.responseText;
31                 }
32                 
33             };
34             xhr.open("post","login.jsp",true);
35             //發送數據，如果請求方式是post話send一定要設置參數
36             //如果get  xhr.send();  如果post send一定要設置參數
37             xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
38             xhr.send(params);
39         }
40     </script>
41 </body>
42 </html>

4.模擬jQuery封裝Ajax請求

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Ajax實現前后台交互</title>
 8 </head>
 9 <body>
10     <form action="#" method="">
11         <input type="text" name="username" id="username" />
12         <input type="password" name="password" id="password" />
13         <input type="button" id="button" value="ajax登錄" onclick="tzLogin();" />
14     </form>
15     
16     <div id="result"></div>    
17     <script type="text/javascript">
18         var $ = {
19                 ajax : function(opts){
20                     //創建一個Ajax對象
21                     var xhr = null;
22                     
23                     if(window.XMLHttpRequest){
24                         xhr = new XMLHttpRequest();
25                     }else{
26                         var ids = ["MSXML2.XMLHTTP.3.0","Microsoft.XMLHTTP","MSXML2.XMLHTTP"];
27                         for(var i=0;i<ids.length;i++){
28                             try{    
29                                 xhr = new ActiveXObject(ids[i]);
30                                 break;
31                             }catch(e){
32                             
33                             }
34                         }
35                     }
36                     
37                     
38                     xhr.onreadystatechange = function(){
39                         if(this.readyState == 4 && this.status == 200){
40                             var text = this.responseText;
41                             if(opts.success) opts.success.call(this,text);
42                         }else{
43                             if(opts.error) opts.error.call(this,"調用有異常");                            
44                         }
45                     };
46                     
47                     var params = "";
48                     for(var k in opts.data){
49                         if(params != "") {
50                             params += "&";
51                         }
52                         params += (k+"="+opts.data[k]); 
53                     }
54                     //true代表異步
55                     if(opts.type.toLowerCase() == "get"){
56                         var url = opts.url;
57                         if(params != ""){
58                             url = opts.url+"?"+params;
59                         }
60                         xhr.open("get",url,opts.async);
61                         xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
62                         xhr.send();
63                     }else if(opts.type.toLowerCase() == "post"){
64                         xhr.open("post",opts.url,opts.async);
65                         xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
66                         xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
67                         xhr.send(params);
68                     }
69                 }
70                     
71         };
72         
73             
74             
75         
76         function tzLogin(){
77             
78             $.ajax({
79                 type: "post",
80                 url: "login.jsp",
81                 data: {
82                     username:document.getElementById("username"), 
83                     password:document.getElementById("password")
84                 },
85                 dataType: "json",
86                 async : true,
87                 success: function(data){
88                        document.getElementById("result").innerText = data;      
89                 },
90                 error:function(){
91                        document.getElementById("result").innerText = "調用有異常";      
92                 }
93             });
94             
95         }
96     </script>
97 </body>
98 </html>

5.說明解析

ajax XMLHttpRequest
1.AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
XML HttpRequest http請求的一種，傳輸的數據格式在早期常用XML

它是構建HTTP請求的javascript對象，在早期它是
ActiveX對象形式存在，服務器端和客戶端傳遞異步的問題
早期數據的傳遞：字符串和XML
實際上，Ajax就是javascript和XML直接建立的一種異步傳輸的過程

2.創建 XMLHttpRequest 對象
創建 XMLHttpRequest 對象的語法：var xhr = new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

3.ajax 只不過是另一種Http請求的而已，它和form表單原理是一樣的，
只不過不會刷新頁面進行的一種異步交互

4.請求方式 get\post
get基於瀏覽器請求
1.直接在瀏覽器輸入框輸入一個地址進行請求
2.點擊a鏈接是一個get請求
3.通過form指明method="get"
4.ajax指明請求方式get

post:form里面method="post"

5.請求的狀態和響應異常
請求的狀態,readyState
0:未初始化狀態
1：載入請求的狀態
2:載入完成狀態
3:請求交互狀態
4：請求完成狀態s

可以捕獲服務器錯誤
500服務器連接失敗 -- 服務器關閉
404代表頁面找不到
405請求方式有問題
200 代表交互成功，正確請求和響應
ajax里面指明post請求

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js框架封裝，模擬jQuery封裝 ajax請求原理及jquery $.ajax封裝全解析【jQuery】jquery插件封裝 jquery ajax json簡單的分頁，模擬數據，沒有封裝，只顯示原理封裝技術與加密技術內存顆粒封裝技術 jquery封裝的ajax請求 jQuery封裝函數基於jQuery封裝的分頁組件