【Java Web】 AJAX请求

AJAX请求

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML） ， 是指一种创建交互式网页应用的网页开发
技术。
ajax 是一种浏览器通过 js 异步发起请求， 局部更新页面的技术。
Ajax 请求的局部更新， 浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容

jQuery使用Ajax请求

流程就是js这边发起ajax请求 ，然后服务器servlet处理后 回传给客户端json，然后js这边又通过回调函数接收数据展示在页面上。

$.ajax 方法

$.ajax 方法

• url 表示请求的地址
• type 表示请求的类型 GET 或 POST 请求
• data 表示发送给服务器的数据
• 格式有两种：
  一： name=value&name=value
  二： {key:value}
• success 请求成功， 响应的回调函数
• dataType 响应的数据类型
  常用的数据类型有：
  text 表示纯文本
  xml 表示 xml 数据
  json 表示 json 对象

$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
// data:"action=jQueryAjax",
data:{action:"jQueryAjax"},
type:"GET",
success:function (data) {
// alert("服务器返回的数据是： " + data);
// var jsonObj = JSON.parse(data);
$("#msg").html("编号： " + data.id + " , 姓名： " + data.name);
},
dataType : "json"
});
});

$.get方法和$.post 方法

就是封装了$.ajax 方法， 少了type参数

• url 请求的 url 地址
• data 发送的数据
• callback 成功的回调函数
• type 返回的数据类型

// ajax--get 请求
$("#getBtn").click(function(){
$.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGet",function (data) {
$("#msg").html(" get 编号： " + data.id + " , 姓名： " + data.name);
},"json");
});
// ajax--post 请求
$("#postBtn").click(function(){
$.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryPost",function (data)
{
$("#msg").html(" post 编号： " + data.id + " , 姓名： " + data.name);

$.getJSON 方法

继续封装，少了type返回的数据类型参数

// ajax--getJson 请求
$("#getJSONBtn").click(function(){
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQueryGetJSON",function
(data) {
$("#msg").html(" getJSON 编号： " + data.id + " , 姓名： " + data.name);
});
});

表单序列化 serialize()

serialize()可以把表单中所有表单项的内容都获取到， 并以 name=value&name=value 的形式进行拼接。

// ajax 请求
$("#submit").click(function(){
// 把参数序列化
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" +
$("#form01").serialize(),function (data) {
$("#msg").html(" Serialize 编号： " + data.id + " , 姓名： " + data.name);
});
});

Ajax请求的应用

使用 AJAX 验证用户名是否可用