jQuery的AJAX

jQuery的AJAX

1.了解AJAX

​ AJAX是一种异步技术，AJAX = 异步 JavaScript 和 XML。也就是说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

​ 如果使用同步请求会出现以下问题，任何请求调转将会重新刷新页面，也就是说客户端发出的request，要等服务端返回response，并重新加载response的页面。这就导致我看视频，点个赞，页面也会刷新，我的视频将重新从零开始，这是十分不现实的事情。

​ 而异步请求有以下好处，在不重载整个网页的情况下，对页面进行数据更新，并在网页上进行显示。客户端在发出的request后，无需再重新等待response，也可以继续其他的页面操作，也就是非同步的形式，不需要request和response一前一后同步。当服务端response时，AJAX根据response更改页面改变的数据。

2.AJAX 方法

2.1执行ajax请求

在一个button上click事件捆绑ajax请求。一些重要参数如下：

• url：服务器资源
• data：规定要发送到服务器的数据，可以是"text"，“json”，“html”，"xml"等格式
• contentType：内容的类型，默认是：“application/x-www-form-urlencoded”（表单等非文件）。如果使用的是文件形式使用”multipart/form-data“（post形式提交的文件），json格式的用“application/json”。
• dataType：预期的服务器响应的数据类型,如"text"，“json”，“html”，"xml"等格式
• type：规定请求的类型（GET 或 POST）。
• success(result,status,xhr)：当请求成功时运行的函数。其中result为服务器返回的结果，status为状态码
• error(xhr,status,error)：如果请求失败要运行的函数。error返回的错误原因，status为状态码

其他的参数可以上网查，不过用得比较多的就这几个了。

<script>
    $("button").click(
        function(){
            $.ajax({url:"checkServlet",     //服务器中的checkServlet
                    data:"butt=check",      //"text"格式的数据（key=value）
                    type："get"             //请求方式
                    success:function(result){        //成功后执行的函数（回调函数）
                		$("#div1").html(result);
            			}
                   });
        }
    );
</script>

2.2用$.get()发起get形式的ajax请求

$.get()是用来发送get形式的ajax请求，其实跟上面的$.ajax指定的get形式的请求。

语法格式如下：

$.get(URL,data,function(data,status,xhr),dataType)

只有如下4个参数：

• URL：服务器资源
• data：数据，可以是"text"，“json”，“html”，"xml"等格式
• function(data,status,xhr)：对应$.ajax()中的success(result,status,xhr)
• dataType：服务端预期返回数据类型

使用同样的例子，注意这里的json_object使用的是json格式的数据

<script>
    $("button").click(function(){
        $.get("checkServlet",     //服务器中的checkServlet代码
              json_object,		 //json格式的数据（这种数据格式比较流行）
              function(data,status){           //对应success函数，$.get只有这种形式的写法
            alert("Data: " + data + "Status: " + status);
        });
    });
</script>

2.3用$.post()发起post形式的ajax请求

请求形式：post

语法：

$.post(URL,data,function(data,status,xhr),dataType)

参数同上：

• URL：服务器资源
• data：数据
• function(data,status,xhr)：对应$.ajax()中的success(result,status,xhr)
• dataType：服务端预期返回数据类型

因为跟**$.get()**一样使用，这里就不重复例子了。

3.请求的数据格式

除了注意请求方式：get，post外，我们还应该注意请求的数据格式，数据格式如下：

• “xml” - 一个 XML 文档
• “html” - HTML 作为纯文本
• “text” - 纯文本字符串
• “script” - 以 JavaScript 运行响应，并以纯文本返回
• “json” - 以 JSON 运行响应
• “jsonp” - 使用 JSONP 加载一个 JSON 块

其中我们比较常用的是"json" 和"text" ，“xml” 。

• 其中"json"为JavaScript原生格式（用得最多的），而且很轻便
• ”text“一般以key，value对（?wd=JavaScript&user=zhangsan）形式，也就地址栏里面的k=v形式。
• 而"xml"先对与"json"来说数据结构更严密，但用的空间比较大，一般使用"json"而不使用"xml"，空间较小就意味这传送跟快。

在jQuery中可以这样使用"json"格式的数据：

var json_str = '{"user":"zhangsan","pwd":"123456"}'
var json_object = jQuery.parseJSON(json_str);

然后使用$.post或者$.ajax把数据post到服务端。这样就可以实现异步请求啦。