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("输入数据不能为空！");    }});