简单的动态JavaScript Ajax函数

目录

介绍

背景

使用代码

1.参数

2.方法体

3.调用

---

简单紧凑的可重用本机JavaScript函数，您可以在Web页面中轻松使用它来启用Ajax并避免刷新

介绍

通常，Ajax和JavaScript很难为初学者开发或理解。此外，它需要由更多代码编写。

仅使用一个函数AjaxCall()可以使动态功能在webPages上运行Ajax。它允许初学者在任何网页上运行Ajax代码，无需额外的代码或外部库。尽可能简单地以最大的灵活性简化和运行Ajax请求变得非常有用。

背景

在我的上一个项目中，我想设计和开发“单页设计”，它应该是完全可用的，与后端连接，无需任何客户端刷新。经过多次试验和优化后，我实现了这个JavaScript函数，以优化可用于任何Web项目的Ajax调用。所以我决定与全世界分享。

使用代码

为了描述这个函数AjaxCall()，我将它分为三个部分：

1. 参数
2. 方法体
3. 调用

以下是详细信息：

1.参数

在深入研究之前，您可以使用调用函数作为示例：

AjaxCall("ServerPage.php")

只有一个必需参数serverFile Parameter1: serverFile：这是Ajax运行时将调用的文件。它将包含：文件名和参数，如：“ FileName.php?id=111&y=222”等。

对于其他参数：

参数2 : ControlId: 控件ID是您需要在以下位置显示结果的控件：“ innerHTML attribute”

参数3：attName

• empty ('' )：Ajax将运行但结果文本将不会显示。
• not Empty：如果你需要在属性中填充结果，如“BG-Color” class等等。

参数4 :callId: 此调用的标识变量，因此您可以知道是哪个请求的反馈。此调用ID也将包含在该函数中。

参数5 : Device:(可选）如果您反复使用一个参数，例如：分类，以便您更容易控制页面中的输出位置，以便您可以将其写入设备...

参数6 :Async: 这是Ajax的调用类型。默认情况下，它将是Async，这意味着页面不会等待来自服务器的响应，这意味着您的代码将永远不会因为Ajax而挂起。但在某些情况下，您需要使其为false，因为所有应用程序都可能基于此调用，因此应该在这些情况下为false。顺便说一句，我不建议使其为false。

参数7 :Timeout: 这是等待Ajax从服务器返回结果的时间
默认值：5秒

2.方法体

这是AjaxCall()函数的完整方法体。

如果您有兴趣查看方法体的详细信息，可以查看说明。

function AjaxCall(serverFile=null,controlId=null,attName='', 
    callId='',device='robot',async=true,timeout='5000') {
    document.getElementById("divglobalstatuscontent").innerHTML="loading..";
    
  if (serverFile==''|| serverFile==null) {
      //"AjaxCall : ServerFile Empty"
      return;
  }        
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {  // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
        xmlhttp.ontimeout = function () {
        //addLog("The request TimeOut  "+serverFile);
             document.getElementById("divglobalstatuscontent").innerHTML="time out";
    };
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
        var address= this.responseText;
        if(attName=='')
            {
        if(controlId !=''&& controlId)
            {  
                document.getElementById(controlId).innerHTML = this.responseText; 
            }
            }
        else
            {
                 document.getElementById(controlId).setAttribute(attName,this.responseText); 
            }
         //addLog("AjaxCall: "+callId+"STATUS="+this.status+",VALUE="+this.responseText);
        
        switch(device) //if you filled the device , 
          // you can categorize the result into Divs in your page .. Here is some examples: 
            {
                    case("robot"):
                    document.getElementById("divrobotstatusbar").innerHTML = this.responseText;
                    break;
                    case("cam"): 
                    document.getElementById("divcamstatusbar").innerHTML = this.responseText;
                    break;
                    case("led"):
                    document.getElementById("divledstatusbar").innerHTML = this.responseText;
                    break;
                    case('notification'):
                    break;
                    case("move"):
                        document.getElementById("divmovestatusbar").innerHTML = this.responseText;
                    break;
                    case('global'):
                    break;
                default:
                    document.getElementById("divglobalstatuscontent").innerHTML=this.responseText; 
            }
         document.getElementById("divglobalstatuscontent").innerHTML="Success call";         
     return true;
    }
      else{
          
          //request failed.
          //document.getElementById("divglobalstatuscontent").innerHTML="...";
      }
  }
  xmlhttp.open("GET",serverFile,async);
  xmlhttp.timeout=timeout;
  xmlhttp.send();
}

3.调用

要调用该函数，您只需将代码与页面中的任何按钮或任何控件一起使用，例如：

示例1：使用结果调用Ajax到div

AjaxCall("backend.php?device=robot¶m=getConnectionStatus","divconnectionicon");

在此示例中，AjaxCall将使用一些参数调用文件：BackEnd.php。

然后，将结果返回到divResult inner HTML属性中的页面。

在HTML中，你应该有这样的东西：

< div id="divResult">  RESULT OF AJAX CALL < / div>

示例2（类属性）

AjaxCall("backend.php?device=robot¶m=getConnectionStatus","divconnectionicon","Class",'global');

在此示例中，AjaxCall将使用一些参数调用文件：BackEnd.php。

然后，将结果返回到Class属性中的divconnectionicon页面 。

结果将是这样的：

< div id="" class="RESULT of Ajax call ">< / div>

 

原文地址：https://www.codeproject.com/Tips/1272258/Simple-Dynamic-JavaScript-Ajax-Function