Ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), refers to a web development technique that creates interactive Web applications.
AJAX = Asynchronous JavaScript and XML (a subset of standard generic markup languages).
AJAX is a technique for creating fast, Dynamic Web pages.
AJAX is a technique that can update parts of a Web page without reloading the entire page. [1]
AJAX enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server. This means that you can update a part of a webpage without reloading the entire page.
Traditional Web pages (without AJAX) if you need to update the content, you must reload the entire page page.
This article focuses on the use of AJAX-related knowledge.
Ajax as asynchronous transmission, local refresh is very convenient, very useful!
First, there are 4 steps to using Ajax:
1. Creating an Ajax Object
var xmlHttp = new XMLHttpRequest();
2. Establish a connection (' submission method ', ' URL ')
xmlHttp.open('get','./AJAX_XML.xml');
3. Determine Ajax readiness status and status code
Xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate==4 && xmlhttp.status==200) { }}
4. Sending the request
xmlHttp.send(null); //get方式参数为null,post方式,参数为提交的参数
The following is the asynchronous submission of the user name (after entering the user name, the asynchronous submission of background judgment, the foreground immediately prompts whether to register, do not have to judge when submitting!) )
Get mode Commit
Xx.html
<script type= "Text/javascript" >window.onload=function () { document.getElementById (' username '). onblur= function () { var Name=document.getelementbyid (' username '). value; var req=new xmlhttprequest (); Req.open (' Get ', ' 4-demo.php?name= ' +name); Req.onreadystatechange=function () { if (req.readystate==4 && req.status==200) { alert ( Req.responsetext); } } Req.send (null); If there is no data in the Send () method, write null }}</script>
User name:<input type="text" name="" id="username">
xx.php
<?phpprint_r ($_get);? >
1. IE does not support Chinese
2, =, & is confused with the keyword of the requested string.
Post Submission
Xx.html
<script type= "Text/javascript" >window.onload=function () { document.getElementById (' username '). onblur= function () { var Name=document.getelementbyid (' username '). value; Name=encodeuricomponent (name); var req=new xmlhttprequest (); Req.open (' Post ', ' 5-demo.php?age= ' +20); Req.onreadystatechange=function () { if (req.readystate==4 && req.status==200) { alert ( Req.responsetext); } } Req.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded '); Req.send (' name= ' +name);} } </script>
User name:<input type="text" name="" id="username">
xx.php
<?phpprint_r ($_post);p rint_r ($_get);? >
1. Send data via Send ()
2. setRequestHeader () must be set to convert the passed parameters into XML format
3, post submission can be directly submitted in Chinese, do not need to transcode
4. The characters in the POST request will also be confused with the &, = character typeface in the URL, so it is recommended to use encodeURIComponent () encoding
5, at the same time as the post submission, you can make a get commit
Resolves a problem where IE does not support Chinese =, & is confused with the keyword of the requested string
In JS, it is encoded by encodeURIComponent ().
Window.onload=function () { document.getElementById (' username '). Onblur=function () { var name= document.getElementById (' username '). value; Name=encodeuricomponent (name); Coded var req=new xmlhttprequest (); Req.open (' Get ', ' 4-demo.php?name= ' +name); Req.onreadystatechange=function () { if (req.readystate==4 && req.status==200) { alert ( Req.responsetext); } } Req.send (null); If there is no data in the Send () method, write null }}
1. Req.responsetext: Gets the returned string
2. Req.responsexml: Gets the returned data by DOM structure
Note Post/get two ways to submit the difference!