one
AJAX = Asynchronous JavaScript and XML.
AJAX is not a new programming language, but a new way to use existing standards.
The biggest advantage of AJAX is that you can exchange data with the server and update part of the web page content without reloading the entire page.
AJAX does not require any browser plugins, but requires the user to allow JavaScript to execute on the browser.
Using Ajax can save network bandwidth, improve web page loading speed, and shorten user waiting time.
Ajax works: JavaScript, asynchronous data acquisition technology XMLHttpRequet (core), data exchange and manipulation technology xml, dynamic display and interaction technology Dom, XHTML and CSS
two
Create an XMLHttpRequet object:
1. Constructor method: request=new XMLHttpRequet()-->For firefox, opera, safari advanced browsers
2.xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")-->IE6 and above
3.xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP")-->IE6 or below
three
Three properties of the XMLHttpRequet object:
1.onreadystatechange stores the function of processing the server response
2.readyState stores the state information of the server response. Five values of 0 The request is not initialized, that is, the request has not been initiated (request not initialized). 1 indicates that the request was made before the request was sent (the server connection was established). 2 The request has been sent The header information can usually be obtained from the response (request received). 3 The server is processing but did not respond to completion (request processing). 4 The server request is complete and has responded (the request is complete and the response is ready). 200: "OK"
404: Page not found
3.responseText obtains the data returned by the server (response data in the form of a string), and responseXML obtains the response data in the form of XML.
Four
Two methods of the XMLHttpRequet object:
1. The three GET/POST parameters of the open() parameter indicate the type and method of the http request. The URL parameter is the address of the file on the server, that is, the location of the file on the server. The file can be any type of file and specifies the asynchronous processing flag for the request. true (asynchronous) or false (synchronous), must be true for Ajax. When using false, do not write the onreadystatechange function --> put the code after the send() statement.
2.send() sends the request to the server. Such as building a request request.open("GET","test.txt",true) and then sending a request request.send()
get is fast and simple, but using post: 1. Unable to use cache files (update files or databases on the server) . 2. Send a large amount of data to the server (POST has no data limit). 3. POST is more stable and reliable than GET when sending user input containing unknown characters
Fives
1.GET request: If you want to send information by GET method, you need to add information to the URL
2.POST request: If you need data like HTML form 1, you need to use setRequestHeader(header,value) to add http header (header: the specified header name, value: specify the value of the header), and then specify the data you want to send in the send() method, like this xmlhttp.send("fname=Henry&lname=Ford"); requires information
six
A callback function is a function that is passed as a parameter to another function. If there are multiple AJAX tasks on the website, you should write a standard function for creating the XMLHttpRequest object and call that function for each AJAX task. The function call should contain the URL and the task to execute when the onreadystatechange event occurs (may be different for each call)
seven
1. AJAX and ASP/PHP instances, AJAX is used to create more dynamic applications. (showHint() function, which is triggered by the "onkeyup" event) (how the web page communicates with the web server when the user types characters into the input box. Similar to search engine hints, etc.)
If the input box is empty (str.length= =0), the function clears the contents of the txtHint placeholder and exits the function.
If the input box is not empty, the showHint() function performs the following tasks:
Creates the XMLHttpRequest object
Executes the function when the server response is ready
Sends the request to a file on the server
Note that we add a parameter q to the URL (with the content of the input box )
2. Ajax and database instance, how the web page reads information from the database through AJAX (showCustomer() function, which is triggered by the "onchange" event)
The showCustomer() function performs the following tasks:
Check whether a customer has been selected
Create an XMLHttpRequest object
Execute the created function when the server response is ready
Send the request to the file on the server
Notice that we added a parameter q to the URL (with the content in the input field)
3. Ajax and XML, how web pages can be read using AJAX Information from the XML file ( loadXMLDoc() function)
After the loadXMLDoc() function executes:
Creates an XMLHttpRequest object,
adds functions to execute when the server response is ready, and sends the request to the server.
When the server response is ready, it builds an HTML table, extracts the nodes (elements) from the XML file, and finally populates the table element with id="demo" from the XML data.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Introduction to Ajax</title>
</head>
<body>
<p>One. AJAX = Asynchronous JavaScript and XML (asynchronous JavaScript and XML). </p>
<p>AJAX is not a new programming language, but a new way to use existing standards. </p>
<p>The biggest advantage of AJAX is that it can exchange data with the server and update parts of the web page without reloading the entire page. </p>
<p>AJAX does not require any browser plugins, but requires the user to allow JavaScript to execute on the browser. </p>
<p>Using Ajax can save network bandwidth, improve web page loading speed, and shorten user waiting time</p>
<p>Ajax working principle: JavaScript, asynchronous data acquisition technology XMLHttpRequet (core), data exchange and manipulation technology xml, dynamic display and interaction technology Dom, XHTML and CSS</p>
<p>2. Create XMLHttpRequet object: 1. Constructor method: request= new XMLHttpRequet()-->For firefox, opera, safari advanced browser</p>
<p>2.xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")-->IE6及以上</p>
<p>3.xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")-->IE6以下</p>
<p>Three. Three properties of the XMLHttpRequet object: 1. onreadystatechange stores the function of processing the server response</p>
<p>2.readyState stores the status information of the server response. Five values of 0 The request is not initialized, that is, the request has not been initiated (request not initialized). 1 indicates that the request was made before the request was sent (the server connection was established). 2 The request has been sent The header information can usually be obtained from the response (request received). 3 The server is processing but did not respond to completion (request processing). 4 The server request is complete and has responded (the request is complete and the response is ready). 200: "OK"
404: Page not found</p>
<p>3.responseText obtains the data returned by the server (response data in the form of strings), and responseXML obtains the response data in the form of XML. </p>
<p>4. Two methods of XMLHttpRequet object: 1. open() The three GET/POST parameters indicate the type method of the http request. The URL parameter is the address of the file on the server, that is, the location of the file on the server. The file can be Is any type of file that specifies the flag true (asynchronous) or false (synchronous) for asynchronous processing of requests, must be true for Ajax</p>
<p>2.send() sends the request to the server. For example, create a request request.open("GET","test.txt", true ) and then send a request request.send()</p>
<p>get is quick and easy, but using post: 1. Unable to use cached files (update files or databases on the server). 2. Send a large amount of data to the server (POST has no data limit). 3. POST is more stable and reliable than GET when sending user input containing unknown characters</p>
<p>5.1. GET request: If you want to send information through the GET method, you need to add information to the URL</p>
<p>2.POST request: If you need data like HTML form 1, you need to use setRequestHeader(header,value) to add the http header (header: specifies the name of the header, value: specifies the value of the header), and then send() The data you want to send is specified in the method, like this xmlhttp.send("fname=Henry&lname=Ford"); information is required</p>
<p>Six. When using false, do not write the onreadystatechange function --> put the code after the send() statement. </p>
<p>7. A callback function is a function that is passed as a parameter to another function. If there are multiple AJAX tasks on the website, you should write a standard function for creating the XMLHttpRequest object and call that function for each AJAX task. The function call should contain the URL and the task to execute when the onreadystatechange event occurs (may be different for each call)</p>
<p>AJAX and ASP/PHP examples, AJAX is used to create more dynamic applications. (showHint() function, which is triggered by the "onkeyup" event) (how the web page communicates with the web server when the user types characters into the input box. Similar to search engine hints, etc.)</p>
<pre>
If the input box is empty (str.length ==0 ), the function clears the content of the txtHint placeholder and exits the function.
If the input box is not empty, the showHint() function performs the following tasks:
Create XMLHttpRequest object
Execute function when server response is ready
send the request to the file on the server
Note that we added a parameter q to the URL (with the content of the input box)
</pre>
<p>Ajax and database instances, how web pages read information from the database through AJAX (showCustomer() function, which is triggered by the "onchange" event)</p>
The <pre> showCustomer() function performs the following tasks:
Check if a customer has been selected
Create XMLHttpRequest object
Execute the created function when the server response is ready
send the request to the file on the server
Note that we added a parameter q to the URL (with the content from the input field)
</pre>
<p>Ajax and XML, how web pages use AJAX to read information from XML files (the loadXMLDoc() function)</p>
<pre>
After the loadXMLDoc() function executes:
Create XMLHttpRequest object,
Add a function that executes when the server response is ready, and sends the request to the server.
When the server response is ready, an HTML table is constructed, the nodes (elements) are extracted from the XML file, and finally the table element
with id = "demo" is populated with the XML data </pre>
<script>
function loadXML(){
var xmlhttpread; // Create an object
if (window.XMLHttpRequest){ // Decide the object creation method by judgment
// Support IE7+, Firefox, Chrome, Opera, Safari
xmlhttpread= new XMLHttpRequest();
}else{
// IE6以下
xmlhttpread=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttpread.onreadystatechange = function (){
if (xmlhttpread.readyState==4 && xmlhttpread.status==200){ // Specify the function
alert() to be executed when the response is in the ready state (4/200) in the onreadystatechange event ; // When the readyState changes, the onreadystatechange event will be triggered, and the onreadystatechange event will be triggered 4 times (0 - 4), namely: 0-1, 1-2, 2-3, 3-4, corresponding to each change of readyState .
// There can be: 1.document.getElementById('p1').innerHTML=responseText; return data from a TXT file
// xmlhttp.status;xmlhttp.statusText;xmlhttp.responseText; etc. return from an XML file Data
// xmlhttp.getAllResponseHeaders(); Retrieve the header information of the resource (file)
// "Last modified: " + xmlhttp.getResponseHeader('Last-Modified'); Retrieve the specified header information of the resource (file).
}
};
xmlhttpread.open("GET","wenjian.txt",true);
xmlhttpread.send();
}
</script>
</body>
</html>