AJAX请求
什么是AJAX请求
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
ajax 是一种浏览器通过 js 异步发起请求, 局部更新页面的技术。
Ajax 请求的局部更新, 浏览器地址栏不会发生变化
局部更新不会舍弃原来页面的内容同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。
#发起AJAX请求#
- 创建
XMLHttpReq
对象 - 调用
open
方法设置参数 - 调用
send
方法发送请求 - 在send方法前绑定onreadystatechange事件,处理请求完成后操作
function ajaxRequest() {
// 1、我们首先要创建XMLHttpRequest
var xmlhttprequest = new XMLHttpRequest();
//2、调用open方法设置请求参数
xmlhttprequest.open("GET","http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax",true);
//4、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。
xmlhttprequest.onreadystatechange = function(){
if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
alert("收到服务器返回的数据:" + xmlhttprequest.responseText);
var jsonObj = JSON.parse(xmlhttprequest.responseText);
// 把响应的数据显示在页面上
document.getElementById("div01").innerHTML = "编号:" + jsonObj.id + " , 姓名:" + jsonObj.name;
}
}
// 3、调用send方法发送请求
xmlhttprequest.send();
类AjaxServlet代码(用于响应AJAX请求)
protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("Ajax请求过来了");
Person person = new Person(1, "张三");
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
// json格式的字符串
Gson gson = new Gson();
String personJsonString = gson.toJson(person);
resp.getWriter().write(personJsonString);
}
JSON点这理
JSON是客户端和服务端之间业务数据的传递格式
jQuery中的AJAX请求
$.ajax 方法
- url 表示请求的地址
- type 表示请求的类型 GET 或 POST 请求
- data 表示发送给服务器的数据
- 格式有两种:
一: name=value&name=value
二: {key:value}
- 格式有两种:
- success 请求成功, 响应的回调函数
- dataType 响应的数据类型
- 常用的数据类型有:
- text 表示纯文本
- xml 表示 xml 数据
- json 表示 json 对象
- 常用的数据类型有:
// ajax请求
$("#ajaxBtn").click(function(){
$.ajax({
url:"http://localhost:8080/json/ajaxServlet",
//调用servlet方法
// data:"action=jQueryAjax",
data:{action:"jQueryAjax"},
type:"GET",
success:function (data) {
// alert("服务器返回的数据是:" + data);
// var jsonObj = JSON.parse(data);
$("#msg").html(" ajax 编号:" + data.id + " , 姓名:" + data.name);
},
//返回数据的格式
dataType : "json"
});
});
$.get 方法和 $.post 方法
- url 请求的 url 地址
- data 发送的数据
- callback 成功的回调函数
- type 返回内容格式,xml, html, script, json, text, _default。
// 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");
});
$.getJSON 方法
- url 请求的 url 地址
- data 发送给服务器的数据
- callback 成功的回调函数
// 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(){
// 把参数序列化,通过requst请求发送过去
$.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
$("#msg").html(" Serialize 编号:" + data.id + " , 姓名:" + data.name);
});
});