javascript学习笔记一

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

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

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

 function getHTTPObject( requestUrl , callBack){
             var ajax;
             if( window.XMLHttpRequest ){
                 ajax = new XMLHttpRequest();
             }
             esle if( window.ActiveXObject ){
                 ajax = new ActiveXObject("Msxml12.XMLHTTP");
             }
             return ajax;
         }

         var request = getHTTPObject();
         request.onreadystatechange = function(){
             if( request.readyState === 4 && request.status === 200 )
                 //do something
                 var data = JSON.parse( request.responseText );
                 //console.log( request.responseText );
                 if( typeof callBack === "function" ) {

                     callBack(data);
                 }
         }
         request.open( "GET" , requestUrl , true );
         request.send(null);

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

 $(document).ready(function(){
             $.ajax({
                 type: "GET",
                 url: "../..",
                 dataType: "json",
                 success: function( data ){
                     console.log( data.addressBook );
                 },
                 error: function() {
                     alert("error occurred");
                 }
             });
         });

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

 $(document).ready(function(){

             $.getJSON( '../..json' , function( data ){

                 var data = data.addressBook;
                 var count = data.length;

                 $('#idDiv').empty();//clear textarea

                 if( count>0 ){
                     console.log( data );
                     $.each( data , function( i , obj ){
                         $("#idDiv").append("<p>"+ i + obj.name+"</p>");
                     } );
                 }
             } ).error( function(){
                 //
             } ).complete( function(){
                 //
             } ).success( function(){
                 //
             });
         });