Ajax
简介
一种用于网页 异步 请求的技术.
作用:
用于与服务器进行异步交互 以及 局部页面的刷新.
Ajax的GET使用步骤
1. 创建一个 异步请求的对象
var xhr = new XMLHttpRequest();
2. 设置请求的方式, 以及 请求的地址
xhr.open("GET","请求地址");
3. 设置请求结果产生时 的 事件处理函数 (当请求状态发生改变时, 执行的函数)
xhr.onreadystatechange = function(){
//此方法在一次ajax中, 会执行五次. 分别表示五种状态
//每次的状态值, 从xhr.readyState属性中得到.
//状态值:
//0. 请求初始化中 , 它的触发, 在new对象时, 此方法不会执行
//1. 请求正在发送, 它的触发在open函数执行时, 此方法如果在open前指定, 则状态发生时 方法执行
//2. 请求发送完毕
//3. 服务器开始响应
//4. 响应完毕, 内容已经得到了.
//请求也存在状态码 , 例如: 404表示资源找不到 500表示服务器内部错误. 200表示成功 302表示重定向..
//请求状态码, 通过xhr.status得到. 如果是200 表示请求成功
if(xhr.readyState == 4){
if(xhr.status == 200){
//成功得到结果
//得到的结果 ,在xhr.responseText中. 是文本内容.
}else{
//请求失败
//提示失败
}
}
}
4. 发送请求 (null是参数, 因为GET请求,参数在网址中拼接了, 所以这里传递的是null)
xhr.send(null);
Ajax的POST请求使用步骤
1. 创建一个 异步请求的对象
var xhr = new XMLHttpRequest();
2. 设置请求的方式, 以及 请求的地址
xhr.open("POST","请求地址");
3. 设置请求结果产生时 的 事件处理函数 (当请求状态发生改变时, 执行的函数)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//成功得到结果
//得到的结果 ,在xhr.responseText中. 是文本内容.
}else{
//请求失败
//提示失败
}
}
}
4. 设置请求头部
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
5. 发送请求
xhr.send(参数列表);
**注意：**
使用IE浏览器8 操作上述的案例
GET或POST请求 都需要修改第1步:
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
GSON.jar
"{"name":"张三"}";
作用:
将Java中的对象 快速的转换为 JSON格式的字符串.
将JSON格式的字符串, 转换为Java的对象.
转换JSON字符串的步骤:
1. 引入JAR包
2. 在需要转换JSON字符串的位置编写如下代码即可:
String json = new Gson().toJSON(要转换的对象);
案例:
Book b = BookDao.find();
String json = new Gson().toJson(b);
System.out.println(json);
转换Java对象的步骤
1. 引入JAR包
2. 在需要转换Java对象的位置, 编写如下代码:
对象 = new Gson().fromJson(JSON字符串,对象类型.class);
案例:
String json = "{\"id\":1,\"name\":\"金苹果\",\"author\":\"小泽马\",\"info\":\"嘿嘿嘿嘿嘿嘿\",\"price\":198.0}";
Book book = new Gson().fromJson(json, Book.class);
System.out.println(book);
Ajax - Jquery
Jquery对Ajax操作, 进行了封装, 简化了ajax的开发, 且实现了多浏览器的兼容性.
ajax函数-ajax
函数名称: $.ajax
参数列表: 长度为1 , 需要传递一个对象.
通常我们传递参数时, 传递的是JSON对象 , 格式:
{
"url":"请求地址",
"type":"请求方式GET/POST",
"async":请求是否为异步(默认true为异步),
"data":"请求的参数,格式与网址后的参数拼接一致",
"dataType":"服务器返回的数据类型TEXT或JSON",
"success":function(data){
//当请求成功时, 函数执行了 相当于xhr.readyState==4 status==200
//data就是响应的内容
//如果dataType:JSON , 则data就是一个JSON对象.
//如果dataType:TEXT , 则data就是一个字符串文本.
},
"error":function(){
//当请求失败时, 函数执行
}
}
案例:
$(function(){
$("#start").click(function(){
var index = layer.load(2);
var id = $("#pid").val();
var s1 = $("#s1").val();
var s2 = $("#s2").val();
var s3 = $("#s3").val();
$.ajax({
url:"img.do",
type:"GET",
data:"id="+id+"&s1="+s1+"&s2="+s2+"&s3="+s3,//id=1&s1=xxx&s2=xxx&s3=xxx
dataType:"JSON",
success:function(data){
layer.close(index);
layer.msg("制图完成");
//清空div
$("#imgDiv").html("");
//制作图片img标签
var $img = $("<img src='"+data.imgPath+"'>");
//将img标签 追加到div中
$("#imgDiv").append($img);
},
error:function(){
layer.close(index);
layer.msg("网络错误...");
}
});
});
});
</script>
</head>
<body>
<h3>自动p图</h3>
<div><input id="pid" placeholder="请输入图片id"></div>
<div><input id="s1" placeholder="请输入第一个填充的文本"></div>
<div><input id="s2" placeholder="请输入第二个填充的文本 - 可选"></div>
<div><input id="s3" placeholder="请输入第三个填充的文本 - 可选"></div>
<div><button id="start">开始制图</button></div>
<br>
<br>
<br>
<div id="imgDiv"></div>
$.get函数 / $.post函数
这两个函数的格式, 完全一致, 一个用于GET请求, 一个用于POST请求
函数名称: $.get / $.post 参数列表:
1. url : 请求地址
2. data: 请求时携带的参数
3. success : 请求成功时 处理的函数
4. 响应的数据类型: TEXT/JSON
**案例:**
$(function(){
$("#sub").click(function(){
var index = layer.load();
var num = $("#num").val();
$.post("s1.do","num="+num,
function(data){
layer.close(index);
if(data.status != 0){
layer.msg(data.msg);
}else{
showList(data);
}
},"JSON");
});
});
function showList(data){
var list = data.result.list;
$("#list").html("");
for(var i=0;i<list.length;i++){
var $li = $("<li>时间:"+list[i].time+"<br>进度:"+list[i].status+"</li>");
$("#list").append($li);
}
}
**getJSON函数 *****
用于get请求 .返回JSON对象
函数名: $.getJSON();
参数列表:
1. url : 请求地址
2. data: 请求时携带的参数
3. success:请求成功时 , 处理的函数
案例:
<script type="text/javascript">
$(function(){
$("button").click(function(){
$.getJSON("s2.do","",function(data){
$("#div1").html(data.msg);
});
});
});
</script>
</head>
<body>
<button>加载数据</button>
<div id="div1"></div>
jquery对象.load
通过jquery对象, 调用load函数, 将服务器返回的内容, 直接嵌入到元素的内部.
使用load函数访问的服务器通常返回的不是JSON , 而是html标签
函数名称: $obj.load
参数列表:
1. url : 请求的地址
2. [data]: 传递的参数
3. [success]:请求成功时执行的函数
案例:
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("#div1").load("s3.do");
});
});
</script>
</head>
<body>
<button>刷新数据</button>
<div id="div1"></div>
Vue的ajax
想要使用Vue的ajax , 需要使用两个js文件:
1. vue.js
2. vue-resource.js
基于全局Vue对象使用 ajax
GET请求: Vue.http.get("请求地址",[传递的参数]).then(success,error);
POST请求: Vue.http.post("请求地址",[传递的参数],[配置]).then(success,error);
案例:
GET:
function x1(){
var city = document.getElementById("input1").value;
Vue.http.get("s4.do",{params:{"city":city}})
.then(function(res){
console.info(res.body.result);
showList(res.body.result.daily);
}
,function(res){
layer.msg(res.statusText);
});
}
function showList(arr){
var divs = "";
for(var i=0;i<arr.length;i++){
var text = "<div>"
+"<div>日期: "+arr[i].date+" "+arr[i].week+"</div>"
+"<div>白天: 天气情况:"+arr[i].day.weather+" 温度情况:"+arr[i].day.temphigh+"</div>"
+"<div>夜晚: 天气情况:"+arr[i].night.weather+" 温度情况:"+arr[i].night.templow+"</div>"
+"</div>";
divs+=text+"<br><br>";
}
document.getElementById("d").innerHTML = divs;
}
</script>
</head>
<body>
<h3>天气查询</h3>
<input placeholder="请输入要查询的城市" id="input1"> <button onclick="x1()">查询</button>
<div id="d"></div>
POST:
<script type="text/javascript">
function x1(){
var city = document.getElementById("input1").value;
Vue.http.post("s4.do",{"city":city},{"emulateJSON":true})
.then(function(res){
console.info(res.body.result);
showList(res.body.result.daily);
}
,function(res){
layer.msg(res.statusText);
});
}
function showList(arr){
var divs = "";
for(var i=0;i<arr.length;i++){
var text = "<div>"
+"<div>日期: "+arr[i].date+" "+arr[i].week+"</div>"
+"<div>白天: 天气情况:"+arr[i].day.weather+" 温度情况:"+arr[i].day.temphigh+"</div>"
+"<div>夜晚: 天气情况:"+arr[i].night.weather+" 温度情况:"+arr[i].night.templow+"</div>"
+"</div>";
divs+=text+"<br><br>";
}
document.getElementById("d").innerHTML = divs;
}
</script>
</head>
<body>
<h3>天气查询</h3>
<input placeholder="请输入要查询的城市" id="input1"> <button onclick="x1()">查询</button>
<div id="d"></div>
在Vue实例中使用ajax
GET请求: this.$http.get(“请求地址”,[传递的参数]).then(success,error);
POST请求: this.$http.post(“请求地址”,[传递的参数],[配置]).then(success,error);
案例:
<div id="main">
<h3>天气查询</h3>
<input placeholder="请输入要查询的城市" id="input1" v-model="city"> <button @click="x1" >查询</button>
<div id="d" v-if="flag">
天气:{{text1}}<br><br>
温度:{{text2}}
</div>
</div>
<script type="text/javascript">
var vue = new Vue({
el:"#main",
data:{
city:"",
text1:"",
text2:"",
flag:false
},
methods:{
x1:function(){
this.$http.post("s4.do",{"city":this.city},{"emulateJSON":true})
.then(function(res){
this.text1 = res.body.result.weather;
this.text2 = res.body.result.templow +" ~ "+res.body.result.temphigh ;
this.flag = true;
},function(res){
alert("很遗憾 ,查询失败");
});
}
}
});
</script>
GET请求传递的参数格式:
{params:{键1:值,键2:值 … 键n:值}}
POST请求传递的参数格式:
{键1:值,键2:值 … 键n:值}
success函数
函数中的参数 是 响应对象.
error函数
函数中的参数 也是响应对象
响应对象的属性以及方法
属性:
1. url : 请求的网址
2. body : 服务器返回的数据, 如果数据是JSON格式, body就是一个对象 如果是普通文本 body就是string数据
3. ok : boolean值, 当服务器响应的状态码 200-299之间, 值就为true
4. status : 服务器响应的状态码
5. statusText : 响应状态文字
函数:
1. text() : 以字符串方式 返回响应内容.
2. json() : 以对象方式 返回响应内容
3. blob() : 以二进制 Blob对象方式 返回响应内容
ajax请求 数据缓存问题
在操作ajax时, 浏览器对ajax请求的结果缓存以后 . 当我们再次向这个地址发起ajax时,
浏览器有可能会不再请求服务器 , 采用上一次的缓存
解决缓存:
需要先明白缓存的原理 . 浏览器是按照网址进行缓存的. 比如: 浏览器不会将百度的缓存 给到京东
所以, 我们想要浏览器不使用缓存 , 只需要保证网址不重复就可以了.
格式:
给请求地址字符串, 添加一个时间戳参数.
例如:
$.load("s3.do",time="+new Date().getTime(),function(){});
1183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
