Dark Horse programmer [two Ajax methods], dark horse programmer ajax
Two Ajax Methods
Ajax is a technology used to quickly create dynamic web pages. by performing a small amount of data exchange with the server in the background, it can implement asynchronous updates of web pages, you can update a part of a webpage without reloading the webpage like a traditional webpage. Now this technology has been widely used, for beginners who do not have a deep understanding of the Web, Ajax still carries a mysterious and obscure color, today we will give you a simple explanation of the Ajax implementation steps and principles, and give you two ways to implement Ajax, js and jquery.
First, ajax is actually the js + xml technology, and the front-end shows a piece of js Code. To use Ajax, in addition to the page wait for sending the request, you must create a suffix named. jsp files are used to receive Ajax requests and process data before returning to the current page. For convenience, we define this page name as ajax first. jsp.
With such a page, we will return to the request page. I believe that those who have learned this page should be very familiar with the script tag. Yes, the following code is written in the script tag. We should know that the webpage contains events, such as mouse click events, mouse hover events, keyboard landing events, and so on. Ajax requests must be sent through events, the following code is used to create a basic Ajax request:
<Script type = "text/javascript"> function showHint (val) {var xmlHttp = new XMLHttpRequest (); var url = "ajax. jsp? Q = "+ val; url = url +" & sid = "+ Math. random (); xmlHttp. open ("GET", url, true); xmlHttp. send (null); document. getElementById ("sun "). innerHTML = xmlHttp. responseText ;} </script>
Because there are few operations on data, the code on the ajax. jsp page is very simple:
<body> <% String name = request.getParameter("q"); out.print(name); %> </body>
You only need to accept and repeat the sent data. Now let's talk about the principle of this Code. XMLHttpRequest is an object supported by modern browsers, it is used for data interaction between the backend and the server. First, we need to create an object named var xmlhttp = new XMLHttpRequest (). This object is created, we need to use this object to initiate a request to the server. In this case, we need to use its open () and send () methods. Both methods initiate a request to the server, so what are their differences? Let me take a simple look at the following table:
Through this table, we can see that the most common and best-to-use method should be open (), because with post, get is simpler and faster, but in some cases, you also need to use post. For example, you cannot use cached files (update files or databases on the server) or send large amounts of data to the server (there is no data size limit for POST ). After talking about the difference, let's talk about the problem of the three parameters of open () through this table. The method is the same as the form, and it specifies the submission method (get or post ). The url is the location of the file on the server. The file here refers to ajax. jsp is the file that Ajax processes data in the background. Generally, through relative path locating, you can find that the above Code is through response? To pass the specified data. Async refers to whether an asynchronous request is initiated. When async = true is used, specify the function to be executed in response to the readiness state in the onreadystatechange event. async = false is not recommended, however, the Demo code for some small projects is the same if it is changed to true or false.
After a request is sent to the server, it interacts with the service weapon through the background to perform a series of operations on the data. After the operation is completed, the data can pass out. the print () method outputs data. On the request page, you can use xmlhttp. responseText obtains the data. It is worth noting that when your data needs to be parsed as an XML object, use xmlhttp. responseXML attribute.
Simply put, do you have a preliminary understanding of how to send Ajax requests using the js method and can apply them to development? In fact, our powerful Jquery also encapsulates Ajax implementation methods, so we will not explain them here, because the principles are similar and the code can be understood directly:
<Script type = "text/javascript" src = "jQuery1.11.1.js"> </script> <script type = "text/javascript"> function sayHi () {$. ajax ({cache: false, type: "POST", url: "ajax. jsp ", data: $ ('# frm '). serialize (), async: true, error: function (request) {alert ("request failed! ") ;}, Success: function (data) {$ (" # d ").html (data );}});} </script>
Ajax. jsp page code:
<Body> <% String userName = request. getParameter ("tname"); out. print (userName + "Hello! "); %> </Body>
In this way, Ajax requests are sent using the Jquery method. There is no big difference between the two methods.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
