Use XMLHttpRequest and jQuery to implement ajax and jqueryajaxrequest

Source: Internet
Author: User

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;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.