1.Ajax 是异步的JavaScript 客户端与服务器之间的异步通信方式
掌握:
第一层 : $.ajax(...)最底层Ajax请求 编写最复杂
第二层:load(),$.get(),$.post()---客户端与服务器之间通信 通过回调函数 方式
第三层:$.getJson() 完成 js 跨域 ;$.getScript()进行动态加载
域名: 域名+端口+项目 ;js默认不能跨域
<!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>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("input").click(function(){
//0.1 请求路径
var url = "/ee19_jquery_day02/SendDataServlet";
//0.2 请求参数,采用json
var params = {"username":"杰克", "password":"1234"};
/* 1 load()函数 ,必须使用jquery对象
* * 格式:load(url, [data], [callback])
* 参数1:url ,请求路径
* 参数2:data,请求参数
* 参数3:callback,回调函数
* * 如果没有请求参数,发送的GET请求
* * 如果有请求参数,发送的POST请求。请求没有中文乱码
* * 回调函数的参数
* 参数1:data,响应数据。load()永远获得字符串,如果需要使用,必须手动转换json对象。
$(this).load(url,params,function(data){
//转换json对象
var jsonData = eval("("+data+")");
alert(jsonData.message);
});
*/
/* 2 $.get() 全局函数,发送get请求
* * 格式:jQuery.get(url, [data], [callback], [type])
* * 参数4:type ,返回内容格式,xml, html, script, json, text, _default。
* * GET请求不适合发送中文数据,存放请求的中文乱码。
* 必须手动解码 new String(username.getBytes("ISO-8859-1") ,"UTF-8")
* * 响应数据,如果使用 application/json;charset=UTF-8 ,jQuery自动将数据转换json对象。
* * 响应数据,如果使用 text/html;charset=UTF-8 ,回调函数获得字符串数据,需要手动转换。
* 使用“参数4”,设置"json",jQuery将字符串 转换成 json对象
$.get(url,params,function(data){
alert(data);
},"json");
*/
/* 3 $.post() 全局函数,发送post请求
* * 格式:jQuery.post(url, [data], [callback], [type])
$.post(url,params,function(data){
alert(data);
},"json")
*/
/* 4 $.ajax() 底层功能最强大的
* * 格式:jQuery.ajax([settings])
* 参数settings:设置所有的参数
* url:发送请求的地址
* data:发送到服务器的数据,请求参数
* type:请求方式 ("POST" 或 "GET"),
* success:成功的回调函数,success(data, textStatus, jqXHR)
* error:请求失败时调用此函数
* dataType:预期服务器返回的数据类型
* "xml": 返回 XML 文档,可用 jQuery 处理。
* "html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
* "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
* "json": 返回 JSON 数据 。
* "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
* "text": 返回纯文本字符串
*/
$.ajax({
"url":url,
"data":params,
"type":"POST",
"success":function(data){
alert(data);
},
"error":function(){
alert("服务器繁忙,请稍后重试");
},
"dataType":"json"
});
});
});
</script>
</head>
<body>
<input type="button" value="发送ajax" />
</body>
</html>
2.在服务器端 手动写json数据时候 转译\ 不要用‘’
对于服务器 发送给客户端的响应 数据有中文则会出现 数据乱码
解决 json 中文乱码 在Servlet 中设置response.setContextType(MIME);
response.setContextType("application/json;charset=UTF-8");
response.getWriter().print(jsonData);---在响应浏览器之前 设置内容显示的类型
package com.in.Servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class SendDataServlet
*/
@WebServlet("/SendDataServlet")
public class SendDataServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SendDataServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1.获取请求方式
String method=request.getMethod();
System.out.println("发送请求方式"+method);
//2.获取请求参数
String username=request.getParameter("username");
String password=request.getParameter("password");
//3.生成 json数据 转译\ 不能使用''(畸形json)
String jsonData = "{\"message\":\"成功了\"}";
// 设置 响应中文乱码
response.setContentType("application/json;charset=UTF-8");
// 发送数据
response.getWriter().print(jsonData);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}