原生方式AJAX请求与JQ方式的AJAX请求示范

原生方式有更好的兼容性，对于早期IE和现代浏览器都能有好支持。

1. 
   
2. function ajax() {
   
3. 
   
4.         //创建核心对象
   
5. 
   
6.         xhr = null;
   
7. 
   
8.         if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象
   
9. 
   
10.             xhr = new XMLHttpRequest();
    
11. 
    
12.         } else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象
    
13. 
    
14.             xhr = new ActiveXObject("Microsoft.XMLHTTP");
    
15. 
    
16.         }
    
17. 
    
18.         //编写回调函数
    
19. 
    
20.         xhr.onreadystatechange = function() {
    
21. 
    
22.             if (xhr.readyState == 4 && xhr.status == 200) {
    
23. 
    
24.                 //alert(xhr.responseText)
    
25.                                 var result=xhr.responseText;
    
26.                                 result=result.slice(0,result.length-1)                       
    
27.                         var arr=result.split(",")
    
28.                         var obj;               
    
29.                         var j;         
    
30.                         for(j = 0,len=arr.length; j < len; j++)  {
    
31.                                   obj= document.getElementById("day_"+arr[j]);
    
32.                                        
    
33.                                        
    
34.                                   
    
35.                                   if (obj) {
    
36.                 　　　　obj.className +='ttasp';       
    
37.                  //console.log(obj);
    
38.                 　　}
    
39. 
    
40.                                 }
    
41.                                
    
42. 
    
43.             }
    
44. 
    
45.         }
    
46. 
    
47.         //open设置请求方式和请求路径
    
48. 
    
49.         xhr.open("get", "../ttasp/action.asp");//一个url还传递了数据，后面还可以写是否同步
    
50. 
    
51.         //send 发送
    
52. 
    
53.         xhr.send();
    
54. 
    
55.     }
    
56.        
    
57.         ajax();

复制代码

下面是JQ方式：

1. $.ajax({
   
2.   type: "GET",
   
3.   url: "../ttasp/action.asp",
   
4.   data: {   
   
5.     act: "qd"
   
6.   },
   
7.   success:function(result){
   
8.                         //$("#div1").html(result);
   
9.                         result=result.slice(0,result.length-1)                       
   
10.                         var arr=result.split(",")
    
11.                         var obj;                         
    
12.                         for (const elem of arr) {
    
13.                                     obj= $("#day_"+elem);
    
14.                                         console.log(obj);
    
15.                                         //obj.setAttribute("style","background-image:url(../ttasp/bg.jpg);background-repeat:no-repeat; background-size:100% 100%;  -moz-background-size:100% 100%;")
    
16.                                   obj.addClass('ttasp');
    
17. 
    
18.                                 }
    
19.                 }
    
20. });

复制代码