Ajax

Ajax concepts

Ajax(Asynchronous JavaScript and XML): asynchronous JavaScript and XML

effect

Using Ajax, the page can be updated without refresh, the page can be submitted asynchronously, and the user experience can be improved

essence

Use a special object (XMLHttpRequest) provided by the browser to send a request to the server asynchronously, and the server returns data. The browser can return to the page without refreshing, without interrupting the user's operation

Difference between synchronous and asynchronous

Case: when registering student information, the student's information (student number, name, address, birthday...) is filled in and ready to be submitted. When connecting with the database, it is found that the filled student number exists. When the server responds to the client, the data cannot be submitted. At this time, the role of synchronous and asynchronous requests is reflected

Synchronization: the whole page will be refreshed and the filled data will not be retained

Asynchronous: the whole page will not be refreshed, and the filled data will be retained

synchronization

In the past, the way of interacting with the server was synchronous. When the client interacts with the server, the client can't do anything else. It can only wait for the response of the server and refresh the page

asynchronous

When the client is in normal operation, it can interact with the server at the same time. The server responds to the client and updates the information to the part of the web page. The real process page will not be refreshed

Implementation mode

Native js implementation

Create XMLHttpRequest object: send the request to the server and return the obtained result

The JavaScript object XMLHttpRequest is the core of the whole Ajax technology and provides the ability to send requests asynchronously

Common methods:

Method name	explain
open(method,URL,async)	Establish a connection to the server Method parameter: Specifies the method to request Http, such as GET or POST URL parameter: Specifies the address of the request The async parameter specifies whether to use asynchronous requests, and its value is true or false
send(content)	Send the parameters specified in the request
setRequestHeader	Set request header information

Common attributes:

onreadystatechange: event that specifies the callback function

ReadyState: status information of XMLHttpRequest

Status: status code of HTTP

responseText: get the text content of the response

Ready status code	explain
0	The XMLHttpRequest object did not complete initialization
1	The XMLHttpRequest object starts sending requests
2	The request sending of XMLHttpRequest object is completed
3	The XMLHttpRequest object started reading the response, but it hasn't finished yet
4	End of XMLHttpRequest object read response

Status code	explain
200	The server responded normally
400	The requested resource could not be found
403	No access
404	The accessed resource does not exist
500	Server internal error

GET mode

 var httpObj  = new XMLHttpRequest();
            httpObj.open("get","${path}/Ajax1?account="+account,true);
            httpObj.send();
            httpObj.onreadystatechange=function (){
               // alert(httpObj.responseText);
                if (httpObj.readyState==4&&httpObj.status==200){
                    document.getElementById("idea").innerText=httpObj.responseText;
                }
            }

post mode

var httpObj = new XMLHttpRequest();
          httpObj.open("post","${path}/Ajax2",true);
          httpObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          httpObj.send("account="+account);
          httpObj.onreadystatechange = function (){
              if (httpObj.readyState==4&&httpObj.status==200){
                  document.getElementById("idea").innerText=httpObj.responseText;
              }
          }

Jquery implementation

Official API code

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

Implementation case code

 $.ajax({url:"${path}/student",
                type:"post",
                data:{num:num,mark:"checkNum"},
                async:true,
                success:function (res){
                    if (res==0){
                        $("#idea").html("√");
                    }else{
                        $("#idea").html(" student ID already exists ");
                    }
                }
            })