How to implement ajax in javascript

Javascript method to implement ajax: first use the XMLHttpRequest object to exchange data with the server in the background; then obtain the data from the server; finally add the http header and the content encoding type when sending information to the server.

The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, DELL G3 computer.

Javascript method to implement ajax:

var Ajax={
  get: function(url, fn) {
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 从服务器获得数据 
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头，发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}

open(method, url, async) method requires three parameters:

method: where to send the request The method to use (GET or POST);

Compared to POST, GET is simpler and faster, and will work in most cases; however, use POST requests in the following situations:

Unable to use cached files (updating files or databases on the server)

Sending large amounts of data to the server (POST has no data volume limit)

When sending user input containing unknown characters , POST is more stable and reliable than GET

URL: Specifies the URL of the server-side script (the file can be any type of file, such as .txt and .xml, or a server script file, such as .asp and . php (can perform tasks on the server before returning the response));

async: Specifies that the request should be processed asynchronously (true) or synchronously (false); true means that other tasks should be performed while waiting for the server response. Script, process the response when the response is ready; false means wait for the server response before executing.

Related free learning recommendations: javascript video tutorial

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