Use XMLHttpRequest and jQuery to implement ajax and jqueryajaxrequest
I. XMLHttpRequest
If you do not use jQuery to implement the page without refreshing the retrieved content, we use the native XMLHttpRequest code here.The js Code is as follows:
// 1. Obtain node a and add the Oncilck response function to it
Document. getElementsByTagName ("a") [0]. onclick = function (){
// 3. Create an XMLHttpRequest (); var request = new XMLHttpRequest (); // 4. Prepare the request url var url = this. href; var method = "GET"; // 5. Call the open method request of the XMLHttpRequest object. open (method, url); // 6. Call the send method request of the XMLHttpRequest object. send (null); // 7. Add the onreadystatechange response function to the XMLHttpRequest object. onreadystatechange = function () {// 8. Determine whether the response is complete. if (request. readyState = 4 ){
// 9. When determining whether the response is available: the XMLHttpRequest object status attribute value is 200 if (request. status = 200 ){
// 10. Response result alert (request. responseText) ;}}// 2. Cancel the default behavior of node a: return false ;}
Insert HTML code:
<A href = "hello.txt"> click to obtain text content </a>
Ii. ajax-based Information Retrieval Using jQuery
This example dynamically retrieves data from the background to change the content of the drop-down button;
The js Code is as follows:
Function bindCarteam0 () {// request data through URL var URL = <select: link page = "/xiaoshouwl. do? Method = getCarteamList "/>;$. ajax ({url: URL, type: 'get', dataType: "json", success: function (html) {var str = "<option value = '-1'> all </option>"; for (var I = 0; I
The HTML code is as follows:
<Select: select property = "carteam_code" styleId = "carteam_code" style = "width: 150px"> <select: option value = "-1"> all </select: option> </select: select>
The type can be get or post;
The amount of data that post can transmit is relatively large, and the get has a byte limit;