Js原生Ajax和Jquery的Ajax

1.什么是Ajax

　　一、什么是同步，什么是異步

　　　　同步現象：客戶端發送請求到服務器端，當服務器返回響應之前

　　　　　　　　　客戶端都處於等待卡死狀態

　　　　異步現象：客戶端發送請求到服務器端，無論服務器是否返回響應

　　　　　　　　　客戶端都可以隨 意做其他事情，不會被卡死

　　二、Ajax的運行原理

　　　　頁面發起請求，會將請求發送給游覽器的內核中的Ajax引擎中，Ajax引擎會提交請求到服務器端，

　　　　在這段時間里，客服端可以任意進行操作，直到服務器將數據返回Ajax之后，會觸發你設置事件，

　　　　從而執行自定義的js邏輯代碼完成某種頁面的功能，實現頁面的局部刷新。

2.js原生的Ajax

五步走

function f1(){
        //1.創建ajax對象
        var xmlHttp = new XMLHttpRequest();
        //2.綁定監聽函數
        xmlHttp.onreadystatechange = function(){
            //判斷數據是否正常返回
            if(xmlHttp.readyState==4&&xmlHttp.status==200){
                //6.接收數據
                var res = xmlHttp.responseText;
                document.getElementById("span1").innerHTML = res;
            }
        }
        //3.綁定處理請求的地址,true為異步，false為同步
        //GET方式提交把參數加在地址后面?key1:value&key2:value
        xmlHttp.open("POST","/ajax/ajax1",true);
        //4.POST提交設置的協議頭（GET方式省略）
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //POST提交將參數，如果是GET提交send不用提交參數
        //5.發送請求
        xmlHttp.send("name=zjj&age=18");
    }

3.Json數據格式

　　json是一種與語言無關的數據交換的格式，

　　作用：

　　　　使用ajax進行前后台數據交換

　　　　移動端與服務端的數據交換

　　一、json的格式和解析

　　　　　　json有兩種格式

　　　　　　　　1.對象格式：{key1：value1，key2：value2}

var json = {"name":"xiaou","age":0}

　　　　　　　　2.數組/集合格式：[obj,obj,obj....]

 var json = [{"name":"xiaou","age":0},
         {"name":"xiaobei","age":1}]

　　　　　　　　兩種格式可以分別套用

 var json ={
             "key1":"key1",
             "key2":{"name":"xiaou","age":0,"tel":8888888},
             "key3":[{"name":"xiaobei","age":1},
                     {"name":"xiaonian","age":2}]
     }

　　　　　　　　json的key是字符串而Json的Value是object

4.Jquery的Ajax技術

　　jquery是一個優秀的js框架，對js原生的Ajax進行了封裝

　　在封裝后的Ajax的操作更加簡潔，功能更加強大

　　與Ajax操作相關方法有如下幾種

　　

　　常見的三種Ajax請求方法

　　1）$.get(url, [data], [callback], [type])

　　2）$.post(url, [data], [callback], [type])

　　其中：

　　　　url：代表請求的服務器端地址

　　　　data：代表請求服務器端的數據（可以是key=value形式也可以是json格式）

　　　　callback：表示服務器端成功響應所觸發的函數（只有正常成功返回才執行）

　　　　type：表示服務器端返回的數據類型（jquery會根據指定的類型自動類型轉換）

　　　　常用的返回類型：text、json、html等　　

　　3）$.ajax( { option1:value1,option2:value2... } );

　　　　常用的option有如下：

　　　　async：是否異步，默認是true代表異步

　　　　data：發送到服務器的參數，建議使用json格式

　　　　dataType：服務器端返回的數據類型，常用text和json

　　　　success：成功響應執行的函數，對應的類型是function類型

　　　　type：請求方式，POST/GET

　　　　url：請求服務器端地址

　　最簡單的提交例子

function f1(){
        $.get("/ajax/ajax2",{"name":"張三","age":18},function(data){alert(data.name);},"json");
    }
    function f2(){
        $.post("/ajax/ajax2",{"name":"李四","age":18},function(data){alert(data.age)},"json");
    }
    function f3(){
        $.ajax(    {
                url:"/ajax/ajax2",
                async:true,
                data:{"name":"李四","age":28},
                dataType:"json",
                success:function(data){alert(data.age);},
                error:function(){alert("請求錯誤");},
                type:"POST"
                });
    }

5.json解析jar

　　將java的對象或集合轉成json形式的字符串

　　json的轉換插件是通過java的一些工具，直接將java的對象和集合轉換成json 的字符串

　　常見的json轉換工具有：

　　　　1）jsonlib

　　　　2）Gson：google

　　　　3）fastjson：阿里巴巴