How to use Ajax

Ajax is asynchronous JavaScript and XML. It is a web development technology for creating interactive web applications. We know that ajax is a very powerful technology, so today I will tell you about this powerful technology in detail.

Before I explain, let me tell you about the linear data structure. We can think of a single linear data structure as a line segment. A line segment has a beginning and a tail. You all know that a single thread means that the head of a line segment has no front area. , there is no trailing area at the tail, and each element in the middle has two elements before and after it. When one element is missing, two elements will know and tell you at the same time. And it doesn’t even work without a single element.

Callback function is to pass function A as a parameter to function B, and function B executes function A. The most common uses of callback functions are the success() and error() functions we use when requesting data with ajax, as well as the first parameter in setInterval, which also uses callback functions. Callback function, callback function, the literal meaning of callback is to turn around and go back to walk that road again. So ajax turns around and walks again when the callback function success() or error is triggered, and then it is asynchronous. At the same time, ajax is asynchronous. Similar to it, there is es6's promise (asynchronous synchronous operation) .

The process of the browser is multi-process. As for why it is the same as why you call it XXX~

The second question is when the omnipotent front-end encounters ajax acquisition Everyone should be confused about why the background data is garbled.
-Maybe it’s a network speed problem, the network is too slow.

-Maybe the encoding format is not uniform, and your backend brothers have tricked you, hahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahaha

   
//1.创建xmlhttpRequest对象
var xhr;
try{
   xhr = new XMLHttpRequest();
   console.log(5555)
}
catch(e){
//ie浏览器低版本兼容
   xhr = new ActiveXobject("Microsoft.XMLHTTP");
}
finally{
  console.log(1111)
}
// try{} catch{} finally{}在这里是处理异常的方法，用if{}else{}也ok
//if(window.XMLHttpRequest){
 // xhr = new XMLHttpRequest();
//  }else{
  //ie浏览器低版本的兼容
 // xhr = new ActiveXobject("Microsoft.XMLHTTP")
//}
//2.建立异步连接
xhr.open("get","url/+string",true/false);//true是异步，false是同步
//xhr.open("post","url",true/false)
//3.发送异步请求
 xhr.send(null);//get
 xhr.send(string);//post
//4.获取返回数据
 xhr.onreadystatechange = function (){
  if((xhr.readystate)==4&&(xhr.status==200)){
   var data = xhr.responseText;
   var data = JSON.parse(data);
   show(data);
}
}
function show(data){
 document.getElementById("p1").innerHTML = data;
}

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Examples to explain Ajax asynchronous request technology

What is the common syntax of AJAX

AJAX principles and CORS cross-domain methods

The above is the detailed content of How to use Ajax. For more information, please follow other related articles on the PHP Chinese website!