Detailed explanation of Ajax method implemented in JS

This time I will bring you a detailed explanation of the JS implementation of Ajax. What are the precautions for the JS implementation of Ajax. The following is a practical case, let's take a look.

1. What is Ajax

Read data or submit data without refreshing

(The earliest ajax appears: Google Maps, drag A new horizon suddenly appears)

Application:

User registration, online chat, Weibo

Features: Data can only be read from the server (so we need to configure Own server program AMP)

2. Using Ajax

1. Basics: Request and display static TXT files

btn.onclick=function(){
  ajax('abc.txt',function(str){
    alert(str);
  });
}

①Encoding of files in Ajax It must be consistent with the encoding of the page

②Cache and prevent caching (the benefits outweigh the disadvantages, so you cannot clear the cache all the time)

Cache can help us speed up network access. The so-called cache is this file on the server. It is only read once, and the second time it is fetched directly from your hard disk and cache, instead of actually requesting it through the network

Sometimes we need to prevent caching (for example, something on the server changes, but The client requested the original thing), the method is as follows, add the timestamp:

ajax('abc.txt?t='+new Date().getTime(),function(str){});
//new Date().getTime()为现在的毫秒数，用户绝对不可能在1毫秒内点两次，所以每次请求的t都不一样

2. Dynamic data: Request Js (or json) file

Ajax reads from the server Everything exists in the form of text (string), how to convert it?

eval() calculates the value in the string

ajax('abc.txt',function(str){
    var arr=eval(str);
    alert(arr);
});

Example: paging

<ul id="list">
</ul>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>

window.onload=function(){
  var oUl=getElementById("list");
  var aBtn=getElementsByTagName("a");
  var i;
  for(i=0;i<aBtn.length;i++){
    aBtn[i].index=i;
    aBtn[i].onclick=function(){
      ajax(&#39;page&#39;+(this.index+1)+&#39;.txt&#39;,function(str){
        var aData=eval(str);
        oUl.innerHTML=&#39;&#39;;
        for(i=0;i<aData.length:i++){
          var oLi=document.createElement("li");
          oLi.innerHTML=&#39;<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';
          oUl.appendChild(oLi);
        }
      });
    };
  }
};

3. Ajax principle

HTTP request method

1.GET--used to obtain data (such as browsing posts) put the data in the URL (website) to submit Low security, low capacity, easy to share (will Send the URL to others)

2.POST--used to upload data (such as user registration). Put the data in a place other than the URL. The security is average, the capacity is almost unlimited, and it is not easy to share

4. Encapsulate your own Ajax function

1. Create Ajax

2. Connect to the server

3. Send a request

4. Receive return

function ajax(url,fnSucc,fnFaild){
  //1.创建
  var oAjax=null;
  if(window.XMLHttpRequest){ //对ie6来说，直接用XMLHttpRequest是不存在的会出错
    oAjax=new XMLHttpRequest(); //ie6以上
  }else{
    oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //ie6
  }
  //2.连接服务器，open(方法，url，是否异步)
  oAjax.open('GET'，url，true);
  //3.发送请求
  oAjax.send();
  //4.接收返回 OnReadyStateChange
  oAjax.onreadystatechange=function(){    //onreadystatechange事件
    if(oAjax.readyState==4){ //readyState属性：请求状态 4是完成（完成不代表成功）
      if(oAjax.status==200){ //status属性：请求结果 200代表成功
        fnSucc(oAjax.responseText); //responseText属性：服务器发回给我们的内容
      }
      else{
        if(fnFaild){
          fnFaild();
        }
      }
    }
  };
};

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jQuery Ajax Analysis Complete Collection

AJAX injection usage detailed explanation

The above is the detailed content of Detailed explanation of Ajax method implemented in JS. For more information, please follow other related articles on the PHP Chinese website!