我怎样才能在纯javascript中使用jquery的$ .get？ （不想退货）

Question

我希望我的网站的移动版本尽可能快速，但我仍然需要一些基本的分析。

我想在移动页面加载后ping一个php文件（点击计数器）来计算启用javascript的浏览器的点击量。

Jquery对于1 ajax函数有点过分，所以我很想学习如何在纯javascript中执行以下操作：

<script type="text/javascript">
    Window.onload(function(){
       $.get('mvc/assets/ajax/analytics/event_increment.php?id='+id');
    })    
</script>

Answer 1

创建一个实用程序函数，它将返回特定于浏览器的Ajax对象：

 function ajax(url, method, callback, params = null) {
     var obj;
     try {   
      obj = new XMLHttpRequest();  
     } catch(e){   
       try {     
         obj = new ActiveXObject("Msxml2.XMLHTTP");     
       } catch(e) {     
         try { 
           obj = new ActiveXObject("Microsoft.XMLHTTP");       
         } catch(e) {       
           alert("Your browser does not support Ajax.");       
           return false;       
         }     
       }   
     }
     obj.onreadystatechange = function() {
      if(obj.readyState == 4) {
         callback(obj);
      } 
     }
     obj.open(method, url, true);
     obj.send(params);
     return obj; 
 }

然后您可以像这样调用该函数：

var ajax = ajax('someurl', 'get',  function(obj) { alert(obj.responseText); })

Answer 2

只需将您的文件指定为脚本标记的src属性即可。

Answer 3

简单化的东西：

<div id="hidden"></div>
<script type="text/javascript">
    window.onload = function(){
        var div = document.getElementById("hidden");
        div.innerHTML = "<img src='tracking.php' />";
    };
</script>

Answer 4

<迈克@Mike建议一个很好的方法。但是，如果您想进入AJAX，那并不困难。

代码c / o bobince

var xhr= new XMLHttpRequest();
xhr.open('GET', 'x.html', true);
xhr.onreadystatechange= function() {
    if (this.readyState!==4) return;
    if (this.status!==200) return; // or whatever error handling you want
    document.getElementById('y').innerHTML= this.responseText;
};
xhr.send();

// FOR <IE8 Compatibility do this first: 
if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
    window.XMLHttpRequest= function() {
        return new ActiveXObject('MSXML2.XMLHttp');
    };
}

用你的php文件替换x.html

Answer 5

您可以使用img标记并将其放在src中，让脚本返回透明图像。

或者正如其他人指出的那样，让它成为脚本标签的src。

修改

如果您不想在机器人访问该页面时加载它，您仍然可以使用img标签

<img src="transparent.gif" width="1" height="1" />

然后，使用javascript将图像的src更改为php脚本。大多数机器人不会执行javascript，因此永远不会访问您的PHP脚本。

你可能想稍微混淆javascript，所以他们没有看到其中的网址并尝试访问它。

Answer 6

虽然你可以通过AJAX创建一个带有该url作为src的图像标签，因为jQuery可以做到这一点：

<script type="text/javascript">   
   function report(){
     if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.open("GET",'mvc/assets/ajax/analytics/event_increment.php?id='+id',true);
}
window.onload = report;
</script>

Answer 7

<script type="text/javascript">
    Window.onload(function(){
     var id = "", xmlhttp = null;
     if (window.XMLHttpRequest)
     {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
     }
     else
     {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }


     if (xmlhttp) {
       xmlhttp.open("GET","mvc/assets/ajax/analytics/event_increment.php?id=" + id,true);
       xmlhttp.send();
     }
})    
</script>

Answer 8

在网页的早期存在image preloaders，当互联网连接仍然很慢时，会创建用于翻转效果的图像对象。这应该仍然有效并加载图像：

<script type="text/javascript">
  var img = new Image('http://url.to/your/image/or/script');
</script>

Answer 9

到2019年，您can use ES6 fetch可以替代XMLHttpRequest。

   const options = {
      method: "POST",
      data: {
        title: "foo",
        body: "bar",
        userId: 1
      },
      credentials: "include",
      headers: {}
    };

    fetch("https://jsonplaceholder.typicode.com/posts", options)
      .then(response => {
      return response.json();
    })
      .then(jsonObject => {
      console.log(jsonObject);
      document.write(`ID ${jsonObject.id} was created!`);
    })
      .catch(error => {
      document.write(error);
    });