AJAX原生代碼

Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創建交互式網頁應用的網頁開發技術。

整個過程是異步，不需要等待服務器返回數據，才執行后面的內容。

function ajax(url,fn){
                //創建xhr對象
                var xhr = new XMLHttpRequest()
                
                //設置發送的服務器地址和方法
                xhr.open("GET",url)
                
                //發送
                xhr.send()
                
                //xhr狀態改變的事件進行監聽
                xhr.onreadystatechange = function(){
                    console.log("readyState:"+xhr.readyState)
                    console.log("status"+xhr.status)
                    if(xhr.readyState==4&&xhr.status==200){
                        fn(xhr)
                    }
                }
            }

調用：

    ajax("./recommend.json",function(xhr){
                console.log(xhr)
                var jsonObj = JSON.parse(xhr.responseText)
                console.log(jsonObj)
                
                var arr =  jsonObj.list;
                console.log(arr)
                arr.forEach(function(item,index){
                    var div = document.createElement("div")
                    div.innerHTML = `<h3><a href="https://www.bilibili.com/video/av${item.aid}/"> ${item.title}</a></h3><p>${item.description}</p>`
                    document.body.appendChild(div)
                })
                
            })

 

jQuery_Ajax

原生Ajax的步驟：

Xhr->xhr.open(get,url)->xhr.send->xhr.onrealystatechange

jQuery_Ajax:

語法：

$.get(url).then(function(res){獲取內容執行的函數})

$.post(url).then(function(res){獲取內容執行的函數})

不分方法：

$.ajax({

         url:"服務器地址",

         method:"請求方法",

         data:{//傳給服務器的參數

location:$("#city").val(),

                            key:'c8b18212397748599a7fb0bfa1022b56'

         },success:function(res){//成功執行的函數

                            console.log("成功的執行：")

                            console.log(res)

         },

         fail:function(res){//失敗執行的函數

                   console.log("失敗的執行：")

                   console.log(res)

         },

         complete:function(res){//不管成功失敗都會執行的函數

                            console.log("complete的執行：")

                            console.log(res)

         }

})

})