AJAX如何使用

@Tong

JavaScript-ajax

• Ajax的简单实用方法(可以实现完成基础操作)

Ajax-get请求

• jquery方法：

 $(function(){
             $("#all").click(function(){
                 $.ajax({
                     "type":"GET",
                     "url":"地址",
                     "data":{"键"："值"},
                     "dataType":"text",//返回类型
                     "success":function(data){//成功执行方法(data:返回的数据)
                         
                     },
                     "error":function(){//失败执行方法
                         alert("错误，请联系管理员")
                     }
                 })
             })
         })
 ​

• 原生javascript方法:

   function validate() {
           var name = $("#name").val();
           if (name == null || name == "") {
               $("#nameDiv").html("用户名不能为空！");
           } else {
               //1.创建XMLHttpRequest对象
               xmlHttpRequest = createXmlHttpRequest();
               //2.设置回调函数
               xmlHttpRequest.onreadystatechange = callBack;
               //3.初始化XMLHttpRequest组件
               var url = "userServlet?name=" + name+“&time="+Math.random();//服务器端URL地址,name为用户名文本框获取的值
               xmlHttpRequest.open("GET", url, true);
               //4.发送请求
               xmlHttpRequest.send(null);
               /* 使用POST方式发送请求
               var url = "userServlet";//服务器端URL地址
               xmlHttpRequest.open("POST", url, true);
               xmlHttpRequest.setRequestHeader("Content-Type",
                       "application/x-www-form-urlencoded");
               var data ="name=" + name+“&time="+Math.random();//需要发送的数据信息,name为用户名文本框获取的值
               xmlHttpRequest.send(data);
               */
               //Ajax 回调函数
               function callBack() {
                   if (xmlHttpRequest.readyState == 4
                           && xmlHttpRequest.status == 200) {
                       var data = xmlHttpRequest.responseText;
                       if (data == "true") {
                           $("#nameDiv").html("用户名已被使用！");
                       } else {
                           $("#nameDiv").html("用户名可以使用！");
                       }
                   }
               }//end of callBack()
           }
       }//end of validate()
   ​
       /*
        *创建XMLHttpRequest对象
        */
       function createXmlHttpRequest() {
           if (window.XMLHttpRequest) {//返回值为true时说明是新版本IE或其他浏览器
               return new XMLHttpRequest();
           } else {//返回值为false时说明是老版本IE浏览器（IE5和IE6）
               return new ActiveXObject("Microsoft.XMLHTTP");
           }
       }
   ​

   

Ajax-Post请求方式

 $.ajax({
 "url":"url",
 "datat":"data",
 "type":"post",
 "success":function(){
 ​
 }
 })
 ​