jQuery AJAX方法

开发工具与关键技术：Visual Studio ASP.NET MVC

作者：刘剑鸿

撰写时间：2019年05月25日 星期六

                                 jQuery AJAX方法

AJAX是（Asynchronous JavaScript and XML（异步的 JavaScript 和 XML））的简称。Ajax并不是某种编程语言，AJAX是一种在无需重新加载整个页面的情况下，能够更新部分页面的技术。传统的页面在不使用AJAX，要是更新内容，就必须更新整个页面。下面认识一下同步与异步：

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，所以进程就会一直拖下去，直到信息返回才能继续执行下去。

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。jQuery AJAX的请求方法有很多种，常用的有$.ajax()、$.get()
、$.post()。而它们有什么不同呢？

ajax() 方法用于执行 AJAX（异步 HTTP）请求。 所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成 的请求。

$.get()、$.post()两个不同之处比较多，它们在执行提交的时候不同，get提交时参数直接暴露在URL上，而post
不会。与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而在一些特殊的情况下就必须使用POST请求了。

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠 ‘

Get与post在服务器区别：

Get方法是用来向服务器上获取数据，

Post是用来向服务器上传递修改数据。

Get是不安全的，因为在传输过程中，数据被放在请求的Url中，这样，用户可以直接在浏览器上看到提交的数据，一些系统内部信息也一同显示在用户面前。

Post的所有操作对用户来说都是不可见的。

Get传输的数据量小，主要是受限与于Url长度限制，其中IE浏览器对URL的最大限度为2083个字符（http://hqlong.com/2009/12/1164.html）。

post可以的传输大量的数据，所以在上传文件和大数据量时使用post。

Form表单提交默认为Get方法提交，

要想在Form表单提交使用post 提交，则要添加method="post"给Form标签。

Get方式获取数据后，刷新不会有负面影响，因为它只是获取数据。

Post方式刷新页面重复提交可能会产生不良的后果。

下面是$.ajax()的请求代码：

     $("#btnPost").click(function () {

            $.ajax({//$.ajax({})

                type: "POST",

                url: "/jQueryAjax/postPersonInfor",

                data: {

                    name: $("#txtName").val(),

                    sex: $("#cboSex").val(),

                    address: $("#txtAddress").val()

                },

                dataType: "text",

                //dataType: "json", //这里返回的类型为字符串类型

                success: function (data) {

                    //console.log(data);

                    document.write(data);

                },

                error: function (jqXHR) {

                    alert("发生错误：" + jqXHR.status);

                }

            });

        });

在 type: “POST”,可以切换为type: “GET”。

jQuery.get()以GET方式从服务器获取数据

  $("#btnget").click(function () {

            $.get("/jQueryAjax/getPersonInfor",

                function (data) {

                    console.log(typeof (data));

                    var data =JSON.parse(data);//json转换成js

                    $("#txtName").val(data.name);

                    $("#cboSex").val(data.sex);

                    $("#txtAddress").val(data.address);

            });

        });

语法：jQuery.get(url,
[data], [callback], [type])

get()通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

post()以POST方式从服务器发送数据

   $("#btnpost").click(function () {

            var txtName = $("#txtName").val();

            var cboSex = $("#cboSex").val();

            var address= $("#txtAddress").val();

            $.post("/jQueryAjax/postPersonInfor", {

                name: txtName, sex: cboSex,
                  address: address

                  }, function (data) {

                document.write(data);

            });

        });

语法：jQuery.post(url, [data], [callback], [type]) 通过远程 HTTP POST 请求载入信息。
是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用
$.ajax。