Ajax common face questions what is Ajax and why use Ajax
Ajax is the abbreviation for "Asynchronous JavaScript and XML". He refers to a web development technique that creates interactive Web applications . 、
Clients and servers that can communicate asynchronously with the server without having to refresh the entire browser
What is the difference between AJAX applications and traditional Web applications?
What is the difference between AJAX applications and traditional Web applications?
- In the traditional web front-end interaction with the backend, the browser accesses the Tomcat servlet directly to get the data. the servlet sends the data to the browser by forwarding it.
- when we use Ajax , the browser first sends the request to the XMLHttpRequest asynchronous object, the asynchronous object encapsulates the request, and then sends it to the server. The server does not respond in a forward manner, but instead returns the data to the browser in a streaming fashion
- XMLHttpRequest asynchronous object will constantly listen to changes in server state, get the data returned by the server, write to the browser "because it is not forwarded, so there is no refresh to get the server-side data"
Please describe the XMLHttpRequest object
Please describe the XMLHttpRequest object
The core of Ajax is the JavaScript object XMLHttpRequest. This object was first introduced in Internet Explorer 5, which is a technique that supports asynchronous requests. In short,XMLHttpRequest allows you to use JavaScript to make requests to the server and handle the response without blocking the user. With the XMLHttpRequest object, Web developers can make a partial update of the page after the page is loaded
Describe common methods and properties of XMLHttpRequest objects
Method
- Open () (string method,string url,boolean asynch, string username,string password)
- Send (content)
- setRequestHeader (String header,string value)
- getAllResponseHeaders ()
- getResponseHeader (String header)
- Abort ()
The usual method is the first three black bold
- Open (): The method creates an HTTP request
- The first parameter is the specified commit method (post, get)
- The second parameter is the specified address to be submitted.
- The third parameter is whether to specify whether asynchronous or synchronous (true means asynchronous, false means synchronous)
- The IV and fifth parameters are used when HTTP authentication is in use. is optional
- setRequestHeader (String header,string value): Sets the message header (used with post to be used, the Get method does not need to call the method)
- Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
- Send (content): sends a request to the server
- If it is a GET method, you do not need to fill in the parameters, or fill in null
- If it is post, write the parameters to be submitted
Properties
- onReadyStateChange: Event trigger for request state change (this method is called when readystate changes), typically used to specify a callback function
- ReadyState: The request state readyState a change, the callback function is called, it has 5 states
- 0: not initialized
- After the 1:open method is successfully called
- 2: The server has answered the client's request
- 3: In the interaction. The HTTP header information has been received and the response data has not been received.
- 4: Complete. Data reception Complete
- ResponseText: The text content returned by the server
- Responsexml: XML content of the compatible DOM returned by the server
- Status: State code returned by the server
- StatusText: The server returns text information for the status code
The callback function is mentioned in two places above, what is the callback function??
The callback function is what the receiving server returns!
What is the implementation process of Ajax?
What is the implementation process of Ajax?
- (1) Create an XMLHttpRequest object, that is, create an asynchronous call object.
- (2) Create a new HTTP request and specify the method, URL, and authentication information for the HTTP request.
- (3) Set a function that responds to changes in the state of the HTTP request.
- (4) Send an HTTP request.
- (5) Gets the data returned by the asynchronous call.
- (6) Use JavaScript and Dom for local refreshes.
<Script type="Text/javascript"> varHttpRequest; function Checkusername(){ if(window.XMLHttpRequest){ //In versions above IE6 and other kernel browsers (Mozilla), etc.HttpRequest= New XMLHttpRequest(); }Else if(window.ActiveXObject){ //In versions below IE6HttpRequest= New ActiveXObject(); } //Create an HTTP request HttpRequest.Open("POST", "Servlet1", true); //Because I am using the Post method, I need to set the message header HttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //Specify callback function HttpRequest.onreadystatechange =Response22; //Get the data for the text box varName= Document.getElementById("username").value; //Send an HTTP request to pass in the username to be detected HttpRequest.Send("Username=" +Name; } function Response22(){ //Determine if the request status code is 4 "Data received complete" if(HttpRequest.readyState==4){ //re-determine whether the status code is 200 "200 is successful" if(HttpRequest.Status== $){ //Get Text data returned by the server varText= HttpRequest.ResponseText; //write the data returned by the server on the div varDiv= Document.getElementById("Result"); Div.InnerText =Text; } } } </script>
How many types of Ajax requests are there in total callback
How many types of Ajax requests are there in total callback
Ajax requests have a total of eight Callback
- Onsuccess
- OnFailure
- Onuninitialized
- Onloading
- onLoaded
- Oninteractive
- OnComplete
- Onexception
There is no difference in how XMLHttpRequest objects are created in IE and Firefox.
There, ie in the new ActiveXObject (), Firefox through the newxmlhttprequest () get
- Of course, we typically use jquery's encapsulated AJAX approach, which is less of a hassle.
What are some of the drawbacks of Ajax?
What are some of the drawbacks of Ajax?
Advantages:
- 1, the biggest point is that the page does not refresh, the user experience is very good.
- 2, the use of asynchronous way to communicate with the server, with more rapid response capability.
- 3, can transfer the work of some previous server to the client, take advantage of the client idle ability to handle, reduce the burden of server and bandwidth, save space and broadband rental cost. and reduce the burden on the server, the principle of Ajax is "on-demand data", can minimize redundancy requests, and response to the burden on the server.
- 4, based on standardized and widely supported technology, do not need to download plug-ins or small programs.
Disadvantages:
- 1, Ajax does not support the browser back button.
- 2. Security issues Ajax exposes the details of interacting with the server.
- 3, the support of the search engine is weaker.
- 4. The abnormal mechanism of the program is destroyed.
- 5, not easy to debug.
Please explain JavaScript's homologous strategy.
Please explain JavaScript's homologous strategy.
The same-origin policy is an important security metric for client-side scripting, especially JavaScript. It was first derived from Netscape Navigator2.0, which was designed to prevent a document or script from being loaded from multiple different sources. The so-called homologous refers to: protocol, domain name, the same port, the same origin policy is a security protocol, refers to a script can only read from the same source window and document properties .
Explain the asynchronous loading JS.
Explain the asynchronous loading JS.
- Scenarios for asynchronous loading: Inserting a script tag dynamically
- Use Ajax to get the JS code and then execute it through eval
- Add defer or Async attributes to the script tag
- Create and insert an IFRAME and let it execute JS asynchronously
Resources:
- Https://www.cnblogs.com/zichi/p/4597766.html
- Https://www.cnblogs.com/xkloveme/articles/7569426.html
How do I troubleshoot cross-domain issues?
How do I troubleshoot cross-domain issues?
Understand the concept of cross-domain: protocol, domain name, ports are the same domain, otherwise are cross-domain
For security reasons, the server does not allow Ajax to get data across domains, but it can get file content across domains.
- Therefore, based on this, you can dynamically create a script tag, using the SRC attribute of the tag to access the JS file in the form of JS script, and the content of this JS script is a function call, the function calls the parameters of the server returned data, in order to get the parameter data here, You need to define the callback function in the page beforehand, in the callback function to process the data returned by the server,"JSONP"
- Configure the cross-domain "cors mode" on the backend
- The front-end AJAX requests the local interface, the local interface requests the data to the actual interface after it receives the request, and then returns the information to the front end "proxy mode"
Ajax cross-domain issues can be consulted:
Ajax solves browser caching problems?
Ajax solves browser caching problems?
- 1. Add Anyajaxobj.setrequestheader ("If-modified-since", "0") to Ajax before sending the request.
- 2. Add Anyajaxobj.setrequestheader ("Cache-control", "No-cache") to Ajax before sending the request.
- 3, add a random number after the URL: "fresh=" + math.random ();.
- 4. Add a timestamp after the URL: "nowtime=" + New Date (). GetTime ();.
- 5. If you are using jquery, you can $.ajaxsetup ({cache:false}) directly. All of the Ajax on the page will execute this statement without having to save the cache record.
If the article is wrong, welcome to correct, we communicate with each other. students who are accustomed to reading technical articles can pay attention to the public number: Java3y
Ajax interview questions are here
