js和jQuery的AJAX实现

关于js和jQuery的AJAX实现，直接进入主题

1、原生js的AJAX实现，这里的后台是test.php，点击id为inputBox的时候便触发AJAX请求：

[javascript] view plain copy

1. function getInfoByJs() {//原生js获取信息  
2.             var request=new XMLHttpRequest();  
3.  //         request.open("GET","test.php?number="+document.getElementById("inputBox").value);//get方法向后台传值 通过url传输数据  
4.             request.open("POST","test.php");                                                 //POST方法传值  
5.             var data="number="+document.getElementById("inputBox").value;                    //如果是get方式这里就不需要定义data  
6.             request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gbk");//必须写的 千万注意！！！  
7.             request.send(data);                                                               //如果是get方法就不需要send数据 用url的方式传输  
8.             request.onreadystatechange=function () {                                          //事件监听 readyState改变的时候便会触发   
9.                 if(request.readyState===4) {                                        //当readyState变成4的时候说明响应内容解析完成，可以在客户端调用了  
10.                     if (request.status === 200) {                         //当请求的status是200的时候表示后台页面正常访问 可以在接下来执行相应的操作了  
11.                         //    to do...                                    //处理相应的业务逻辑  
12.                     }  
13.                     else {  
14.                         alert("发生错误:" + request.status);               //如果发生了错误 输出请求的状态码  
15.                     }  
16.                 }  
17.             }  
18.         }  

2、①jQuery的AJAX实现get请求，这里的后台是test.php，点击id为jqAjaxTestByGET的时候就会向AJAX触发AJAX请求：

[javascript] view plain copy

1. $(document).ready(function () {                            //当document加载完成 执行function这个匿名函数 GET测试  
2.             $("#jqAjaxTestByGET").click(function () {        
3.                 $.ajax({//以json 的形式传入参数     //使用jQuery的方式异步加载数据 使用GET方法 这样相当于给id为jqAjaxTest的标签添加了一个匿名函数  
4.                     type:"GET",                    //get方法  
5.                     url:"test.php?number="+$("#inputBox").val(),  //如果是get方法的话 数据需要在url里进行传输 用拼接url的方式传输id为inputBox的值  
6.                                                                   //第一个参数以?符号传输 后面的以&符号继续拼接传输 比如 test.php?a=1&b=2&c=3  
7.                    dataType:"json",              //数据以json的形式进行传输  
8.                     success:function () {  
9.                         alert("传输成功");  
10.                     },                           //传输成功执行的匿名函数  
11.                     error:function (jqXHR) {     //jqXHR是这个浏览器原生的XMLHttpRequest对象  
12.                         alert("传输失败，错误码"+jqXHR.status);  
13.                     }                          //传输失败执行的匿名函数  
14.                 })  
15.             });                                 //click触发的匿名函数结束  
16.         });                                    //ready触发的匿名函数结束  

     ②jQuery的AJAX实现post请求，这里的后台是test.php，点击id为jqAjaxTestByPOST的时候就会向AJAX触发AJAX请求：

[javascript] view plain copy

1. $(document).ready(function () {                   //当document加载完成 执行function这个匿名函数 POST测试  
2.     $("#jqAjaxTestByPOST").click(function () {  //使用jQuery的方式异步加载数据 使用POST方法 这样相当于给d为jqAjaxTest的标签添加了一个匿名函数  
3.         $.ajax({                                 
4.             type:"POST",                       //POST方法  
5.             url:"test.php",                    //如果是get方法的话 数据需要在url里进行传输 由于是POST 就不需要了  
6.             dataType:"json",                  //数据以json的形式进行传输  
7.             data:{  
8.               number:$("#inputBox").val()     //data这里要写成前面dataType所对应的形式  
9.             },  
10.             success:function () {  
11.                 alert("传输成功");  
12.             },                                //传输成功执行的匿名函数  
13.             error:function (jqXHR) {          //jqXHR表示这个jQuery的XMLHttpRequest  
14.                 alert("传输失败，错误码"+jqXHR.status);  
15.             }                                 //传输失败执行的匿名函数  
16.         })  
17.     });                                       //click触发的匿名函数结束  
18. });  

原文：http://blog.csdn.net/qq_35580883/article/details/77926120