JQuery-AJAX使用

JQuery-AJAX使用

---

概述

---

JQuery-AJAX的出现极大的简化了AJAX的使用过程，使得只需要简单的一个步骤就能实现在AJAX中需要6步才能实现的功能。我们说AJAX是Google在2005年提出的一种异步编程
模式，主要解决的问题和应用的主要场景，在我的关于AJAX的demo中已经有详尽的说明，现在仍然是解决那些问题，但是所用到的知识变得更加的简化。

JQuery-AJAX使用步骤

---

• 首先导入JQuery的jar包，我推荐使用BootCDN的加速版本，地址为： http://www.bootcdn.cn/jquery/
• 我们知道JQuery实际上是对JavaScript的封装，所以我们需要将JQuery的代码包含在一个script标签中
• 使用其load(url,sendData,function(){回调函数})API解决问题

loadAPI的讲解

---

loadAPI中JQuery中AJAX使用的重点，用好它就能达到在AJAX中需要6步才能解决的问题。

<script type="text/javaxcript">    var url = "发送到的控制器的url地址";    var sendData = {       "key1": value1,       "key2": value2    };   //发送的数据采用的是JSON数据格式，如果不需要发送数据，则省略该参数    JQuery对象.load(url,sendData,function(){        //回调函数，该函数中可以有三个参数，分别是backData、textStatus、xmlHttpRequest对象        //回调函数中的参数一是返回数据，也就是该参数接收从服务端传送回来的数据，该数据会用于在jsp页面中的显示       　alert("backData:"+backData);  //查看返回值的什么，其返回值是一个传统的js对象        //回调函数中的参数二是整个过程的状态，也就是说如果整个异步的过程成功，那么将返回200        alert("textStatus:"+textStatus);  //查看整个过程是否成功        //回调函数中的参数三是传统的AJAX对象，也就是AJAX技术给我们封装了一个传统的AJAX对象，有了该对象，我们就能够像之前的纯AJAX那样去操作        alert("xmlHttpRequest:"+xmlHttpRequest.responseText);  //传统的方法接收凶服务器端传回来的流数据，其值是一个字符串    })</script>

进一步讨论

---

在使用load方法时，我们没有去处理编码，那么当我们在客户端使用中文是不是会出现问题呢？回答是在JQuery-AJAX中我们完全不必去关心所谓的编码问题，是JQuery
自动帮我们去处理。还有就是在传送数据的过程中，我们并没有去指定数据的传送方式，究竟是采用POST方式还是采用GET方式，通过代码中我们知道，当我们的sendData
参数不指定时，会默认使用get方式去处理，当我们去指定sendData参数时会使用POST方式去提交。这种方式存在的弊端就是我们很可能不能从源代码明显的看到究竟采用的是
get方式还是post方式，这样代码的可读性不好，于是JQuery仍然解决了这个问题，显示的提供了get方法和post方法，具体的使用如下。

使用get和post方法

---

$.post(url,sendData,function(){});$.get(url,sendData,function(){});$.ajax({    "type": POST/GET,   //提交的方式    "url": "\*\*\*?time="+new Date().getTime(),  //传递到服务器的url    "data": {    //发送的数据，以JSON数据传递        "key1": value1,        "key2": value2    },    "success": function(backData,textStatus,ajax){   //成功之后执行的函数        //和使用load函数时的回调函数一样    }});

上述两个JQuery函数的使用方法和load函数的使用方法以及参数含义是完全相同的，唯一不同的是更加明确的指明了采用什么样的方式提交。

上述代码存在的弊端

---

上述代码的实现过程还是存在比较大的弊端，首先，大家可能已经注意到，在向服务器端传送数据的过程中，对于sendData使用的是JSON对数据进行封装，那么疑问是：
当我们从表收集的数据很多时，需要一个个写出来或者说要写这么多吗？在JQuery中是否有收集参数并且将其自动转换为JSON数据格式呢?回答是肯定的，下面将对JQuery-AJAX的使用做最后的最重要的改进，以后每次在使用JQuery-AJAX的时候我们都基于下面的版本。

终极版本

---

<script type="text/javaxcript">    var url = "发送到的控制器的url地址";    var sendData = {       "key1": value1,       "key2": value2    };   

//在之前我们封装JSON数据的时候采用的是手动封装的方式，但是实际上可以通过一个函数直接完成封装，但是要满足下面的要求

需要满足的要求是:

• 必须要将所要封装的数据放入到一个中
• 给每一个表单元素都要加上一个name属性
• 使用form对象调用:serialize()方法，即var sendData = $(“form”).serialize()
• 该步骤之前的内容和该步骤之后的内容与终极版本之前的内容完全一样。