AJAX基础
AJAX
简介
AJAX 是与浏览器与服务器交换数据的技术，它在不重载全部页面的情况下，实现了前后台数据交互，可以选择操作dom对页面进行更新
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本（text）、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
提示：如果没有 jQuery，AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能
常用属性参数
参 数 | 类 型 | 说 明 |
|---|---|---|
url | String | 发送请求的地址，默认为当前页地址 |
type | String | 请求方式，默认为GET |
data | PlainObject或 String或Array | 发送到服务器的数据 |
dataType | String | 预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text |
timeout | Number | 设置请求超时时间 |
global | Boolean | 表示是否触发全局Ajax事件，默认为true |
beforeSend | function | 发送请求前调用的函数 |
success | function | 请求成功后调用的函数参数result：可选，由服务器返回的数据 |
error | function | 请求失败时调用的函数 |
complete | function | 请求完成后（无论成功还是失败）调用的函数 |
contentType | String | 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。 |
async | Boolean | true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 |
$.ajax( {
"url" : "url", // 要提交的URL路径
"type" : "get", // 发送请求的方式
"data" : data, // 要发送到服务器的数据
"dataType" : "text", // 指定传输的数据格式
"beforeSend": function() { 请求之前的方法
}
"success" : function(result) { // 请求成功后要执行的代码
},
"error" : function() { // 请求失败后要执行的代码
}
} );
var data ={}后台响应
使用ajax进行增删改查时get、post方法都能实现其功能。但是出于数据安全性的考虑，数据的添加和修改最好不要使用get方法。当数据量极大的时候，数据的获取也不建议采用get方法。get方法数据传输速度快但不能传大数据，传输不安全，post方法适用于传输大数据，传输速度比get较慢但安全性高。 如：当获取某个实体类集合的时候
举例
@WebServlet("/back/facebook/facebookmanage")
public class FacebookManageServlet extends HttpServlet {
IFacebookService facebookService = new FacebookServiceImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
req.setCharacterEncoding("UTF-8");
resp.setCharacterEncoding("UTF-8");
String fid = req.getParameter("id");
int id = 0;
if (!"".equals(fid))
id = Integer.parseInt(fid);
int result = facebookService.deleteFacebook(id);
resp.getWriter().print(result);
}
注意
resp.setContentType中的值根据前台所要接收的对应的数据类型来填写，dataType是json类型则填写"application/json"，其他则为"text/html;charset=utf-8"。这是因为前后台的编码类型不一样所导致。
其实没有多大意义。success里的result接受到值之后，你可以把它转成json数据然后通过点的方式去获取数据
方法是：
JSON.parse(jsonstr); //可以将json字符串转换成json对象
JSON.stringify(jsonobj);//可以将json对象转换成json对符串
$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象
resp.getWriter().print()可以传对象
resp.getWriter().writer()只能传字符串
需要灵活运用
JSON
简介
JSON（JavaScript Object Notation） 一种轻量级的数据交换格式 采用独立于语言的文本格式 通常用于在客户端和服务器之间传递数据
优点
JSON的优点 轻量级交互语言 结构简单 易于解析
定义JSON对象
var person = { "name" : "张三", "age" : 30, "spouse" : null };定义JSON数组
var countryArray = [ "中国", "美国", "俄罗斯" ];
var personArray = [ { "name":"张三", "age":30 },
{ "name":"李四", "age":40 } ];