javascript学习笔记一

今天看的javascript 应用开发实践指南

看了js库 jquery ，明确了要深入学习jquery的想法。

对于javascript原生态的ajax写法（兼容性只需考虑ie6）,封装为函数；

 1 function getHTTPObject( requestUrl , callBack){
 2             var ajax;
 3             if( window.XMLHttpRequest ){
 4                 ajax = new XMLHttpRequest();
 5             }
 6             esle if( window.ActiveXObject ){
 7                 ajax = new ActiveXObject("Msxml12.XMLHTTP");        
 8             }
 9             return ajax;
10         }
11 
12         var request = getHTTPObject();
13         request.onreadystatechange = function(){
14             if( request.readyState === 4 && request.status === 200 )
15                 //do something
16                 var data = JSON.parse( request.responseText );
17                 //console.log( request.responseText );
18                 if( typeof callBack === "function" ) {
19 
20                     callBack(data);
21                 }
22         }
23         request.open( "GET" , requestUrl , true );
24         request.send(null);

 

而对于jquery来说，就非常简单了。jquery 重点的是ajax的使用，each循环，和函数链。

 1 $(document).ready(function(){
 2             $.ajax({
 3                 type: "GET",
 4                 url: "../..",
 5                 dataType: "json",
 6                 success: function( data ){
 7                     console.log( data.addressBook );
 8                 },
 9                 error: function() {
10                     alert("error occurred");
11                 }
12             });
13         });

 

另外，getJSON 能更好的处理json数据。

 1 $(document).ready(function(){
 2 
 3             $.getJSON( '../..json' , function( data ){
 4 
 5                 var data = data.addressBook;
 6                 var count = data.length;
 7 
 8                 $('#idDiv').empty();//clear textarea
 9 
10                 if( count>0 ){
11                     console.log( data );
12                     $.each( data , function( i , obj ){
13                         $("#idDiv").append("
"+ i + obj.name+"
");
14                     } );
15                 }
16             } ).error( function(){
17                 //
18             } ).complete( function(){
19                 //
20             } ).success( function(){
21                 //
22             });
23         });