0317 ajax
同步请求：客户端发送数据到服务器，当服务器没有给回反应之前，浏览器客户端是处于卡死状态
异步请求，客户端发送数据到服务器，当服务器没有返回响应之前，浏览器客户端可以正常干任何事情
Ajax运行原理，当浏览器客户端发出请求，会将请求发送给ajax引擎，ajax引擎再将请求发送给服务器，在这段时间内客户端可以做任意操作，直到服务器将数据返回给ajax引擎后，再执行设置的操作
json数据格式
两种数据格式：
对象格式：{"key1":obj,"key2":obj,"key3":obj...}
数组/集合格式：[obj,obj,obj...]
代码展示
json01.html
<script language="JavaScript">
var person={
"firstname":"张",
"lastname":"三丰",
"age":100
};
alert(person.firstname);
</script>
json02
<script language="JavaScript">
var java1127=[
{"uname":"公雪","age":21},
{"uname":"公雪2","age":21}
];
alert(java1127[1].uname);
</script>
Json03
<script language="JavaScript">
var school={
"java1127":[
{"name":"张三","age":21},
{"name":"李四","age":21}
],
"java1128":[
{"name":"王五","age":21},
{"name":"赵六","age":21}
]
};
alert(school.java1128[1].name);
</script>
ajax技术要搭配json数据格式使用
三种ajax的操作
1、$.get(url, [data], [callback], [type])
2、$.post(url, [data], [callback], [type])
这两种的用法都是一样的只不过是一个get请求，一个post请求
url：代表请求的服务器端地址
data：代表请求服务器端的数据
callback：表示服务器端成功响应所触发的函数
type：表示服务器端返回的数据类型 常用的返回类型：text、json、html等
3、$.ajax( { option1:value1,option2:value2... } )
常用参数
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址
在使用post请求或者ajax请求的时候，不用解决请求乱码，ajax就自动解决了，而get请求则需要解决get请求乱码
代码展示
demo01.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="get请求" onclick="get()">
<input type="button" value="post请求" onclick="post()">
<input type="button" value="ajax请求" onclick="ajax()">
<script type="text/javascript" src="${pageContext.request.contextPath }/jquery.min.js"></script>
<script type="text/javascript">
function get(){
//get异步请求服务器
$.get(
"${pageContext.request.contextPath }/GetServlet",
{"username":"张三"},
function(data){
alert(data.uname);
},
"json"
);
}
function post(){
//]post请求服务器
$.post(
"${pageContext.request.contextPath }/GetServlet",
{"username":"李四"},
function(data){
alert(data.uname);
},
"json"
);
}
function ajax(){
$.ajax({
url:"${pageContext.request.contextPath }/GetServlet",
data:{"username":"王五"},
async:true,
type:"post",
success:function(data){
alert(data.uname);
},
dataType:"json"
});
}
</script>
</body>
</html>
GetServlet
package com.oracle.web;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class GetServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取参数
String username=request.getParameter("username");
//解决get请求乱码
//username=new String(username.getBytes("ISO8859-1"),"UTF-8");
System.out.println(username);
//响应回去
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("{\"uname\":\""+username+"\"}");
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
