Ajax Basics 1

Last Update:2016-06-20 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Ajax is also the front-end prerequisite skills, learning any language, need a lot of theory-based practice to really learn, before learning Ajax many times, because the lack of a lot of practice, will always forget. So do not practice is the mother of failure ... Of course the theoretical basis is also very important, today to talk about my basic knowledge of ajax.definition : Full name: Asynchronous JavaScript and XML (in the form of asynchronous JavaScript to manipulate XML) is used to transfer data to interact with Data.Application : We think about the HTML code we write, when we change the content and want to see the effect of the time, is not first save, and then go to the browser to refresh the page, and Ajax is to do when the page content changes can not refresh the page, You can tell us about the Changes. For example, When we register the information fill error, is not refreshing the page can directly see the information, such as when we play qq, what news will remind you, the slightest refresh the page, did not affect you do other things, this is what Ajax do. Below we first do not parse the specific principle, first of all to see a general implementation process.of course, first of all, you have to know is to put the code under the server to run, open the time can not use the local address, to use localhost/. This form is accessed under the Service. If this does not understand, you can first Baidu Under.Chestnut demand: Create a new text 1.txt, whatever you type, create a new HTML page, click on the button in the page to get the contents of 1.txt<pre>varOBTN = document.getElementById (' btn ')); Obtn.onclick=function(){ varXHR =NewXMLHttpRequest ();//create Ajax ObjectsXhr.open (' Get ', ' 1.txt ',true);//set Request Informationxhr.send ();//Submit Request //wait for the server to return contentXhr.onreadystatechange =function() { if(xhr.readystate = = 4{alert (xhr.responsetext);//popup content} }}</pre>When you click on the button, you will find the contents of the 1.txt pop up.Let's take a concrete look at this Step.<pre><pre>var New // creating an Ajax object</pre></pre>We want to use Ajax to get the data, first of all, to create an Ajax object, just as you want to get the system time to create a time object is a Reason. The name of the object is XMLHttpRequest (), and we can use the method properties under the object to interact with the data after it is Created.It should be noted that this object is actually a compatibility problem, IE6 the following does not have this object, so is not getting the data, IE6 the following is actually a plug-in way:<pre><pre>// Activexobject:ie6 under the general name of the plug-in , including many plugins // microsoft.xmlhttp: The name of a specific plugin</pre></pre>So we need to do a compatibility deal with the above:<pre><pre>var NULL ; if // Add window is because if you directly judge what does not exist in IE will error, add window, is to determine whether a property exists, so that will not error (of course, We all know that everything is under the window object, so this judgment is Valid) New XMLHttpRequest ();} Else { new activexobject (' microsoft.xmlhttp ');}</pre></pre>Then look<pre><pre>Xhr.open (' get ', ' 1.txt ',true// Set Request information for the Open method three the meaning of the parameter 1, the method of submission Form-method(get/ Post)2, Submit address form-action3, whether asynchronous, is (True)</pre></pre>first, the way to submit: get/post the difference between the Two.Here we do not use the Ajax way, first directly through the traditional form of data submission to Analyze.The traditional form submission is to set some parameters in the form, the User's information input submission, will jump to the specified background page.Parameters of the Form: Action: where to submit the default is the current page Method: Submit by default is get Enctype: submitted data format, default is application/x-www-form-urlencodedLet's take a look at the chestnuts requested by the Get method and understand how the front and back end Interacts.Chestnut requirements: Create HTML page, PHP page, fill in the data, click submit, and then output the content we Entered.HTML page:<pre><formAction= "1.get.php"> <inputtype= "text"name= "username"> <inputtype= "text"name= "age"> <inputtype= "submit"value= "button" /></form></pre>1.get.php (if You do not know the PHP language, probably see the following comments simply know what to Do)<pre><pre><? PHP Header (' content-type:text/html;charset= ' utf-8 ');//set encoding format, and document type error_reporting (0); $username $_get [' username ']; //get data about how get is requested $age $_get [' age ']; Echo "your name: {$username}, age: {$age}"; Output content</pre></pre>Observing the experimental results, when the button is clicked, the page jumps to the 1.get.php page and outputs the Content. And looking at the address bar above, we will find that the information we have entered is placed on the address bar.In fact, the entire GET request process is like This.1 Enter the user information, Click submit, Skip to the designated background pageThe 2 Get method concatenates the data names and corresponding values entered by the user in such a format (username=value&age=value), placing the question mark (?) in the address bar of the specified background page. Behind3 Backstage code through the PHP language $_get method, get to the Address bar user information, $_get[' username ']; $_get[' Age ']; then assign to the variable and output the Information.thus, we can know the get mode:1 concatenate the data name and the corresponding value (username=value&age=value), then put the data to the URL address of the specified page? Behind.2 we can actually change the user information manually on the address bar of the background page, and the corresponding output will Change. Because the background code is the information obtained from the address bar.So also because of this, this transmission mode is not safe,The Get mode also has some other features:3 because the URL has a length limit reason get requests have data volume restrictions, each browser is different, so do not pass too long data in this way. Otherwise it will be intercepted, resulting in incomplete delivery of Data. 4 only string types can be passedHere's a look at the post method, which is the same requirementHTML page:<pre><formAction= "1.get.php" method= "post"> <inputtype= "text"name= "username"> <inputtype= "text"name= "age"> <inputtype= "submit"value= "button" /></form></pre>1.get.php<pre><pre><? PHP Header (' content-type:text/html;charset= ' utf-8 '); error_reporting (0); $username $_post [' Username '];//different Request Method methods, The $_post method is specifically used to obtain the data requested by the Post method $age $_post [' Age ']; Echo "your name: {$username}, age: {$age}";</pre></pre>Enter the page, as in front of no interception, output information page, we can see that the address bar has no user information, but the page is also output user Information. Where do you see the passing process?In fact, in the process of transmitting data, the browser will also send a request header to the server (background) containing some of the requested information (get request also has header information), we open the developer tool, find the network can see our request, click into the concrete content, look at the second diagram above, you can see some request information, The requested encoding format, as well as the request address, etc., can be personally understood.We look at the third picture, you can see the requested data, the above is actually the browser has been in some format input information, the following source code is the actual delivery of information, you can see the concatenated format and get request is the same, but the user name encryption, more Secure.Thus we can knowPOST request 1 The concatenated format of the data is the same as the GET request 2 via the request header information through the browser internal transmission:There's another difference. 3 Transmit data volume post theoretically unlimited 4 can pass multiple data types (text type, Binary)There must be a backend to get the data format not only $_get, $_post also has a 3 $_request can get any submission method of Data.We need to be aware that the data transfer method must be consistent to obtainThe first argument about the Open method is presented here, the second address is simple to understand, and the third parameter is about asynchronous and Synchronous.Synchronization: is a blocking mode, such as code var a =1; alert (a); This is a synchronization, you must execute the first var a = 1, you will pop the value of A.disadvantage: generally when you need to use the code behind the previous things to use synchronization, but with very little, because the code behind to wait for the front, the experience is not good.Asynchronous: is a non-blocking mode, the most obvious example, is the timer, when we write a 30s after the execution of the timer, in the 30S in fact, the code behind can be executed, rather than the 30s behind the code to execute, which is an asynchronous.Cons: If you use async when the code behind you needs to use the front, then the code behind it will come out before it is loaded, and there may be a problem. fortunately, we can work it Out. Workaround: when the code behind you needs to use the previous things, you can use the conditional judgment to determine the execution of the code, if the condition is reached can be executed.And take a chestnut from Above.<pre>varOBTN = document.getElementById (' btn ')); Obtn.onclick=function(){ varXHR =NULL; if(WINDOW. Xmlhttprequest) {XHR=NewXMLHttpRequest (); }Else{XHR=NewActiveXObject (' microsoft.xmlhttp '); } xhr.open (' Get ', ' 1.txt ',true);//Set Request InformationXhr.send ();//Submit Request //wait for the server to return the content here will be specific, probably is the state of the listener server, the first simple to understand canXhr.onreadystatechange =function() { if(xhr.readystate = = 4{//if The data received by the docking corresponds to, and resolves the completed alert (xhr.responsetext);//Popup Content } } } </pre>It takes time to submit a request in the code above, so it must wait until a certain period of time for the xhr.send to get the content correctly, so this is the code that follows it correctly, depends on the front,But if we use synchronization, the code behind us that does not depend on the preceding code is not going to work, and the experience is not good, so we choose to use async, and for the code that relies on the previous code execution, we judge<pre><pre>if (xhr.readystate = = 4) is judged if the data response to, received, and then popup content. (if We do not judge, according to the principle of asynchrony, will immediately bounce out, the acquisition of data takes time, because the actual data has not been acquired, so it will pop empty, afraid of misunderstanding, so here I emphasize again). </pre></pre>Because the Ajax content is more, so will separate, we continue to analyze the next blog, I am mu qing, not seeAjax Basics 1

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Ajax Basics 1

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

Ajax Basics 1

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support