AJAX native code

Ajax namely "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML), refers to a web development technology to create interactive web applications.

The whole process is asynchronous, without waiting for the server to return data only performed behind the content.

function Ajax (URL, Fn) {
                 // create objects xhr 
                var xhr = new new the XMLHttpRequest () 
                
                // set the server address and transmitting method 
                xhr.open ( "the GET" , URL) 
                
                // send 
                xhr.send () 
                
                // xhr state change event listener 
                xhr.onreadystatechange = function () { 
                    the console.log ( "the readyState:" + xhr.readyState) 
                    the console.log ( "status" + xhr.status)
                     IF (xhr.readyState == =. 4 && xhr.status 200 is = ) { 
                        Fn (XHR)  
                    }
                }
            }

transfer:

    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 native steps of:

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

jQuery_Ajax:

grammar:

$ .Get (url) .then (function (res) {} acquires the content execution function)

$ .Post (url) .then (function (res) {} acquires the content execution function)

Regardless of the method:

.ajax $ ({ 

         URL: "Server Address" , 

         Method: "request method" , 

         Data: { // passed to the server parameters 

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

                            Key: 'c8b18212397748599a7fb0bfa1022b56' 

         }, success: function (RES) { // function successfully executed 

                            the console.log ( "successfully implemented:" ) 

                            the console.log (RES) 

         }, 

         fail: function (RES) { // function execution fails 

                   the console.log ( " failed to perform: " )

                   console.log (RES) 

         }, 

         Complete: function (RES) { // regardless of success or failure will perform the function of 

                            console.log ( "Complete implementation:" ) 

                            console.log (RES) 

         } 

}) 

})