# Ajax概念
異步提交，局部刷新
同步提交：Form提交，串行，全頁刷新。
異步提交：ajax提交，并行， 局部刷新
Ajax問題1：局部刷新的代碼是由js操作，js操作比較多。
問題2：瀏覽器導航的前進后退不能使用。
# Json數據格式
對象：{} 定界，
屬性用,分割，
屬性名和屬性值之間用：分割
屬性名：“”定界
屬性值： json 數據類型String, 數字類型(正數和小數都行)， Boolean: true, false
對象：{“cityid”:024,”cityname”:”沈陽”}
集合：[{“cityid”:024,”cityname”:”沈陽”},{cityid”:0411,”cityname”:”大連”}]
# 案例1： 省市聯動
get提交
服務器端代碼
~~~
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.獲取省的id
String pid = request.getParameter("pid");
//2.根據id獲得city列表(List)
//3.把List -> json字符串轉換
String jsonstr = "";
if(pid.equals("1"))
{
jsonstr = "[{\"cityid\":\"024\",\"cityname\":\"沈陽\"},{\"cityid\":\"0411\",\"cityname\":\"大連\"}]";
}
else if(pid.equals("2"))
{
jsonstr = "[{\"cityid\":\"011\",\"cityname\":\"長春\"},{\"cityid\":\"022\",\"cityname\":\"四平\"}]";
}
//4.通過reponse對象，把json字符串反饋給客戶端
//設置響應編碼
response.setCharacterEncoding("utf-8");
//設置響應類型
response.setContentType("text/plain");//ContentType MIME類型
PrintWriter out = response.getWriter();
//發
out.write(jsonstr);
//關閉流
out.flush();
out.close();
}
~~~
客戶端代碼
~~~
$("#province").change(function(){
//1. 選的省
var province = $(this).val();
//2. 發送ajax請求
//url: 絕對路徑，/開頭，/代表ip:port /工程名/ServletURL路徑
// 相對路徑，不以/開頭， 相對當前瀏覽器地址
//success:服務器正常響應
//error: 服務器錯誤 404,500,服務器返回的字符串不符合json格式，{"msg":xxx}
$.ajax({
url:"GetCityServlet?pid="+province,
type:"get",
dataType:"json",
success:function(data)
{
$("#city")[0].options.length = 1;
console.log(data);
//更新city列表
for(var i=0; i<data.length; i++)
{
$("#city").append('<option value="'+data[i].cityid+'">'+data[i].cityname+'</option>');
}
},
error:function(err)
{
console.log(err);
}
});
});
~~~
post提交
# 案例2： 檢查用戶名是否重復
服務器端代碼
~~~
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 得到用戶名
String username = request.getParameter("username");
//2. 假設已有用戶名admin, feiyy
String jsonstr = "";
if(username.equals("admin") || username.equals("feiyy"))
{
//3. 給客戶端反饋 {"result",true}
jsonstr = "{\"result\":true}";
}
else
{
//3. 給客戶端反饋 {"result",false}
jsonstr = "{\"result\":false}";
}
//給客戶端反饋
//設置響應編碼
response.setCharacterEncoding("utf-8");
//設置響應類型
response.setContentType("text/plain");//ContentType MIME類型
PrintWriter out = response.getWriter();
//發
out.write(jsonstr);
//關閉流
out.flush();
out.close();
}
~~~
客戶端代碼
~~~
$.ajax({
url:"CheckNameServlet",
type:"post",
data:{username:$(this).val()},
dataType:"json",
cache:false,
success:function(data)
{
if(data.result)
{
$("#msg").html("用戶名已經被占用")
}
else
{
$("#msg").html("用戶名可用")
}
},
error:function(err)
{
console.log(err);
}
});
~~~
# ajax 2.0特性
~~~
var formData = new FormData($("#myform")[0]);
$.ajax({
url:"../EditSelfServlet",
type:"post",
data:formData,
dataType:"json",
contentType:false,
processData:false,
success:function(data)
{
}
});
~~~
注意：
1. 頁面上， 讓表單以二進制方式提交
<form id="myform" method="post" enctype="multipart/form-data">
2. 后臺代碼上，以二進制方式處理
Servlet3.0簡單，@MultipartConfig注解
Servlet2.5復雜, 使用appache commons fileupload方式獲取表單數據
# Gson
處理對象<->Json互轉
Gson(chrome), fastjson(阿里巴巴), jackson(Spring MVC)
對象-》 json字符串
Object -> {}
List -> [{},{}]
json字符串 -》 對象
樣例1
~~~
//City -> str
public static void test1()
{
City c = new City();
c.setCityid("024");
c.setCityname("沈陽");
//{"cityid":"024","cityname":"沈陽"};
//創建Gson對象
Gson gson = new Gson();
String jsonstr = gson.toJson(c);
System.out.println(jsonstr);
}
~~~
樣例2：
~~~
//City List -> str
public static void test2()
{
List<City> list = new ArrayList<>();
City c = new City();
c.setCityid("024");
c.setCityname("沈陽");
City c2 = new City();
c2.setCityid("0411");
c2.setCityname("大連");
list.add(c);
list.add(c2);
//[{"cityid":"024","cityname":"沈陽"},{"cityid":"0411","cityname":"大連"}]
//創建Gson對象
Gson gson = new Gson();
String jsonstr = gson.toJson(list);
System.out.println(jsonstr);
}
~~~
樣例3
~~~
//str -> City
public static void test3()
{
String str = "{\"cityid\":\"024\",\"cityname\":\"沈陽\"}";
//創建Gson對象
Gson gson = new Gson();
City c = gson.fromJson(str, City.class);
System.out.println(c.getCityid()+"\t"+c.getCityname());
}
~~~
樣例4：
~~~
//str -> City List
public static void test4()
{
String str = "[{\"cityid\":\"024\",\"cityname\":\"沈陽\"},{\"cityid\":\"0411\",\"cityname\":\"大連\"}]";
//創建Gson對象
Gson gson = new Gson();
//List<City>
List<City> list = gson.fromJson(str, new TypeToken<List<City>>(){}.getType());
System.out.println(list.size());
}
~~~
# 案例3：圖靈聊天機器人
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.2.0.min.js"></script>
<script>
$(function(){
$("#btn_send").click(function(){
//把自己發送的消息放在消息區域里。
$("#panel").append('<p>我：'+$("#msg").val()+'</p>');
$.ajax({
url:"http://www.tuling123.com/openapi/api?key=fb6b7bcfbe52fccdb7f5d752a3088f75&info="+$("#msg").val(),
dataType:"json",
cache:false,
success:function(data)
{
$("#panel").append('<p>圖靈：'+data.text+'</p>');
}
});
});
})
</script>
<style>
#panel
{
width:100%;
height:600px;
border:1px solid #ccc;
overflow:auto;
}
#msgdiv
{
margin-top:20px;
}
#msgdiv>textarea
{
width:100%;
height:100px;
resize:none;
}
</style>
</head>
<body>
<div id="panel">
</div>
<div id="msgdiv">
<textarea id="msg"></textarea>
</div>
<button id="btn_send" type="button">發送</button>
</body>
</html>
~~~
# ajax跨域
跨域問題來源于javascript的同源策略，協議+ip+端口相同，就叫做同源，如果html要訪問的資源，協議+ip+端口不相同，就叫做跨域了。
跨域： html ajax 請求到其他服務器上的資源 http://www.taobao.com/xxServlet
解決方式1： 在服務器端允許跨域 xxServlet,給客戶端反饋之前 設置頭信息
response.setHeader("Access-Control-Allow-Origin", "*");
問題：1）改服務器端代碼
解決方式2： jsonp 利用了script標簽的跨域能力 callback=getinfo 服務器端有代碼配合 getinfo(xxx)
問題： 1）服務器端的配合
解決方式3： 本地服務器中轉 ajax->本地服務器->外部服務器
或者nginx反向代理
問題：需要編寫服務器中轉代碼
或者搭建nginx
jsonp的原理：
~~~
<!DOCTYPE HTML>
<html id="myhtml">
<head>
<title>test6.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="jquery-3.1.0.min.js"></script>
</head>
<body>
電話號碼：<input id="tel" type="text" />
<br><a href="#">省:</a><span id="provice"></span>
<br>類型:<span id="type"></span>
</body>
<script>
$('#tel').blur(function(){
$("#schange").remove();
$("#provice").empty();
$("#type").empty();
var tel = $('#tel').val();
var telnump = 'https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=';
var telnumb = '&callback=getresult';
var telnum = telnump+tel+telnumb;
var obj = document.createElement("script");
obj.id = "schange";
obj.src = telnum;
document.getElementById("myhtml").appendChild(obj);
})
function getresult(data)
{
$("#provice").html(data.province);
$("#type").html(data.catName);
}
</script>
</html>
~~~
# 案例4：手機歸屬地查詢
~~~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test7.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="jquery-3.1.0.min.js"></script>
</head>
<body>
電話號碼：<input id="tel" type="text" />
省<span id="provice"></span>
類型<span id="type"></span>
</body>
<script>
//自運行函數
(function(){
$(window).keydown(function(event){
//回車鍵
if(event.keyCode == 13)
{
$.ajax({
url:"https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel="+$("#tel").val(),
dataType:"jsonp",
jsonp:"callback",
success:function(data)
{
$("#provice").html(data.province);
$("#type").html(data.catName);
}
});
}
});
})();
</script>
</html>
~~~
# 案例5：手機天氣（采用服務器中轉）
自己編寫servlet，發送http請求獲取數據，返給ajax
服務器端：
~~~
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String city = request.getParameter("city");
String str = sendGetRequest("https://api.seniverse.com/v3/weather/now.json?key=0xwo33idzypm5gb7&location="+city+"&language=zh-Hans&unit=c");
//把str反饋給ajax
response.setCharacterEncoding("utf-8");
response.setContentType("utf-8");
PrintWriter out = response.getWriter();
out.write(str);
out.flush();
out.close();
}
~~~
~~~
public String sendGetRequest(String getUrl)
{
StringBuffer sb = new StringBuffer();
InputStreamReader isr = null;
BufferedReader br = null;
try
{
URL url = new URL(getUrl);
//URLConnection urlConnection = url.openConnection();
//urlConnection.setAllowUserInteraction(false);
isr = new InputStreamReader(url.openStream(),"utf-8");
br = new BufferedReader(isr);
String line;
while ((line = br.readLine()) != null)
{
sb.append(line);
}
}
catch (IOException e)
{
e.printStackTrace();
}
return sb.toString();
}
~~~
客戶端
~~~
$("#city").blur(function(){
$.ajax({
url:"GetCellPhoneServlet?city="+$("#city").val(),
dataType:"json",
success:function(data)
{
console.log(data.results[0].now.temperature);
},
error:function(err)
{
console.log(err);
}
});
});
~~~
