ajax数据交互

ajax提交数据的详细解释

本文会从ajax的基本内容开始一步步详细讲解数据传输过程。之前的项目用过ajax传输数据也用过ajax+jsp传输数据，大同小异。

1.ajax简介

ajax是异步javascript和xml,可以在不加载整个页面的前提下更新数据。有两种类型，一种是有返回值的，一种的不返回数据的。使用AJAX都需要一个触发事件，目前我用得最多的是，点击触发（表单或者链接）

2.使用javascript写AJAX

主要使用到XMLHttpRequest,主要分为以下几个步骤：

• 通过事件触发包含ajax操作的函数

  $("hasu").on("click",function(){
      ajax代码
  })

• 创建XMLHttpRequest对象（考虑兼容性）

if(windows.XMLHttpRequest){
  xmlhttp = new XMLHttpRequest;
  }else{
  xmlhttp = ActiveXObject("Microsoft.XMLHTTP");

• 创建XMLHttpRequest对象（考虑兼容性）

/**
  每当 readyState 改变时，就会触发 onreadystatechange 事件。
  4表示请求完成并且响应就绪  200表示OK
  responseText和responseXML 为从后台接收到的数据，
  **/

 if(windows.XMLHttpRequest){
  xmlhttp = new XMLHttpRequest;
  }else{
  xmlhttp = ActiveXObject("Microsoft.XMLHTTP");
  }
 xmlhttp.onreadystatechange = function(){
      if (xmlhttp.readyState = '4' && xmlhttp.readyState = '200'){
                        document.getElementById("div-name").innerHTML =                          xmlhttp.responseText;
       - /** 
   }
  }

• 向服务器创建请求

open中的参数为method（POST或GET） url(文件在服务器上的位置，跟controller中的路径对应) async(必须为true表示使用ajax)
  **/
   xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
               xmlhttp.send();
           xmlhttp.send();

POST和GET的优缺点对比:

GET更简单也更快，大多情况下使用GET，
以下情况使用POST：
送未知字符的字符串（POST更加安全稳定）

---

3.使用jQuery创建ajax

直接上例子

        $.ajax({
            url: "http://localhost:8080/jcjk/obstacle/revise/state",
            type: "POST",
            scriptCharset: 'utf-8',
            contentType: 'application/json',
            dataType: 'json',
            data: JSON.stringify(building),
            headers: {
                "content-Type": "application/json"
            },
            success: function (data) {
                toastr.options = {
                    "closeButton": false,
                    "debug": false,
                    "newestOnTop": false,
                    "progressBar": false,
                    "positionClass": "toast-top-full-width",
                    "preventDuplicates": false,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "1300",
                    "extendedTimeOut": "2500",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                };
                if(data.code==0){
                    toastr.warning(data.msg,"");
                }
                else{
                    if (data.result.msg == "更新成功") {
                        $("#submitFile").removeAttr("disabled");
                        $(".obstacleId").val($("#submit-revise-data").attr("data-buildingId"));
                        $.toast("编辑成功");

                    }
                }

            },
            error: function () {
                console.log("error");
            }
        });
    } else {
        $.toast("输入数据不能为空！");
    }
});