What is ajax? Detailed explanation of several implementation methods of ajax (with usage examples)

This article mainly introduces the implementation method of ajax, as well as the definition analysis of ajax. Let everyone better understand how to use ajax and how to use jQuery to implement ajax. Let’s start reading this article now

1. What is Ajax

Ajax: Asynchronous javascript and xml, realizes the data exchange process between the client and the server and sends requests asynchronously. Ajax is not a new programming language, but a technology for creating better, faster, and more interactive web applications.
The advantage of using technology is: There is no need to refresh the page, and other operations can be performed while waiting for the page to transmit data.

2. Implementing Ajax with native JS

Here is an implementation routine. The idea is roughly as follows:
1. Create xmlHttpRequest objects according to different browsers;
2. Use open to call and send to send the request to the Ajax engine.
3. After the server program is executed, the result is returned to the client (use xml.readyState == 4 && xml.status == 200 to determine whether the sending is successful, and then use xml. responseTextReceive data sent back from the background)

//返回一个xmlHttpRequest 对象function creathttprequest()
{    if(window.XMLHttpRequest)        var xml=new XMLHttpRequest();    else
        var xml=ActiveXObject("Miscrosoft.XMLHTTP");    return xml;
}//这里是触发 AJAX 的事件（比如是一个按钮的点击事件之类的）function triggerAjax() {   //上面思路步骤1，创建一个xmlHttpRequest 对象
    var xml = creathttprequest();    //上面思路步骤2
    xml.open("POST","result.php",false);   //open() 第二个参数是你后台php文件的相对路径
    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    xml.send(url);    //上面思路步骤3
    if(xml.readyState==4&&xml.status==200)
    {
        alert(xml.responseText);
    }
}

3. JQuery implements Ajax

The method of JQuery implementing Ajax is much simpler, and a $.ajax has been encapsulated function is very convenient to call.

$.ajax({ 
  type: "POST", //发送是以POST还是GET
  url: "ajax.php", //发送的地址
  dataType: "json", //传输数据的格式
  data: {"username": "zwkkkk1","password": 123456}, //传输的数据
  //成功的回调函数
  success: function(msg) { 
    console.log(msg) 
  }, 
  //失败的回调函数
  error: function() { 
    console.log("error") 
  } 
})

1. What is Ajax

---

Ajax: Asynchronous javascript and xml, realizes the data exchange process between the client and the server and sends requests asynchronously. Ajax is not a new programming language, but a technology for creating better, faster, and more interactive web applications.
The advantage of using technology is: There is no need to refresh the page, and other operations can be performed while waiting for the page to transmit data.

2. Native JS implements Ajax

---

Here is an implementation routine, the idea is roughly like this:
1. Create xmlHttpRequest according to different browsers Object ;
2. Use open to call and send to send the request to the Ajax engine.
3. After the server program is executed, the result is returned to the client (use xml.readyState == 4 && xml.status == 200 to determine whether the sending is successful, and then use xml. responseTextReceives the data sent back from the background) (If you want to see more, go to the PHP Chinese websiteAJAX Development Manual column to learn)

//返回一个xmlHttpRequest 对象function creathttprequest()
{    if(window.XMLHttpRequest)        var xml=new XMLHttpRequest();    else
        var xml=ActiveXObject("Miscrosoft.XMLHTTP");    return xml;
}//这里是触发 AJAX 的事件（比如是一个按钮的点击事件之类的）function triggerAjax() {   //上面思路步骤1，创建一个xmlHttpRequest 对象
    var xml = creathttprequest();    //上面思路步骤2
    xml.open("POST","result.php",false);   //open() 第二个参数是你后台php文件的相对路径
    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    xml.send(url);    //上面思路步骤3
    if(xml.readyState==4&&xml.status==200)
    {
        alert(xml.responseText);
    }
}

3. JQuery implements Ajax

JQuery's method of implementing Ajax is much simpler. It has already encapsulated a $.ajax function, which is very convenient to call.

$.ajax({ 
  type: "POST", //发送是以POST还是GET
  url: "ajax.php", //发送的地址
  dataType: "json", //传输数据的格式
  data: {"username": "zwkkkk1","password": 123456}, //传输的数据
  //成功的回调函数
  success: function(msg) { 
    console.log(msg) 
  }, 
  //失败的回调函数
  error: function() { 
    console.log("error") 
  } 
})

This article ends here (if you want to see more, go to the PHP Chinese website ajax User Manual column to learn). If you have any questions, you can leave a message below.

The above is the detailed content of What is ajax? Detailed explanation of several implementation methods of ajax (with usage examples). For more information, please follow other related articles on the PHP Chinese website!