Ajax
2020/9/3 17:40:34
Ajax简介
一种用于网页异步请求的技术 , 用于与服务器进行异步交互 , 以及 局部网页的刷新.
ajax的GET请求使用步骤
1. 创建一个用于异步请求的对象
var xhr = new XMLHttpRequest();
2. 设置请求的方式 以及请求地址
xhr.open("GET","地址?参数列表");
3. 设置请求结果产生时 的 处理函数
(此函数在一次 请求中会执行多次 , 当请求状态每改变一次, 则触发一次)
xhr.onreadystatechange = function(){
4. 获取请求状态码, 根据状态码判断请求到了哪一步.
if(xhr.readyState == 4){
5. 判断响应的状态码 (404资源找不到 , 500服务器内部错误 , 200成功 等等)
if(xhr.status == 200){
6. 获取到响应体(xhr.responseText)
}else{
//错误的提示
}
}
}
7. 将请求发送
xhr.send();
Ajax的POST请求使用步骤 ***
1. 创建一个用于异步请求的对象
var xhr = new XMLHttpRequest();
2. 设置请求的方式 以及请求地址
xhr.open("POST","地址");
3. 设置请求结果产生时 的 处理函数
(此函数在一次 请求中会执行多次 , 当请求状态每改变一次, 则触发一次)
xhr.onreadystatechange = function(){
4. 获取请求状态码, 根据状态码判断请求到了哪一步.
if(xhr.readyState == 4){
5. 判断响应的状态码 (404资源找不到 , 500服务器内部错误 , 200成功 等等)
if(xhr.status == 200){
6. 获取到响应体(xhr.responseText)
}else{
//错误的提示
}
}
}
7. 设置请求头部
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
8. 将请求发送 (参数列表格式: 与GET请求?后的格式一致)
xhr.send(参数列表);
注意:
xhr.readyState :
表示请求状态 , 值:
0 : 请求初始化中
1 : 请求正在发送
2 : 请求发送完毕
3 : 服务器开始响应
4 : 响应完毕 ,连接已断开, 回复的内容已经得到了
Ajax跨域实现
在servlet的代码中, 在响应之前加入如下两行代码, 即可实现:
response.addHeader("Access-Control-Allow-Origin","*");
response.addHeader("Access-Control-Allow-Methods","GET,POST");
通过GSON.jar 更快速的生成JSON格式字符串 .
步骤:
1. 引入jar文件
2. 在需要将对象转为JSON字符串的位置, 加入如下格式代码即可:
String json = new Gson().toJSON(对象);
对象:
String json2 = new Gson().toJson(u);
集合:
ArrayList<User30> data = new ArrayList<>();
for(int i=0;i<100;i++) {
User30 u = new User30(1001+i, "dsg"+i, "123"+i);
data.add(u);
}
String json = new Gson().toJson(data);
System.out.println(json);
通过GSON.jar 将JSON格式字符串, 转换为对象, 并取出其中属性.
前提条件:
1. JSON格式的字符串, 格式必须正确.
2. JSON字符串中的属性 必须要与 准备转换类型属性 一致.
例如:
要将如下字符串转换为对象 , 必须存在属性匹配的类, 例如:
字符串:
{
"name":"xxx",
"age":18
}
类:
class 类名{
private String name;
private int age;
get/set...
}
格式:
1. 引入Jar包
2. 在需要转换的位置, 加入如下代码:
对象名 = new Gson().fromJson(JSON字符串,对象类型.class);
案例:
String json = "{"id":10001,"username":"zhangsan","password":"123456"}";
User30 u = new Gson().fromJson(json, User30.class);
System.out.println(u.getUsername());
通过GSON.jar 将JSON数据, 转换为集合
Map:
Map<String,Object> map = new Gson().fromJson(JSON字符串,Map.class);
List
List<Object> list = new Gson().fromJson(JSON字符串,List.class);
ajax-Jquery
Jquery对ajax操作进行了封装 , 简化了ajax开发的流程 .实现了多浏览器的兼容.
ajax函数
函数名称: $.ajax
参数列表: 长度为1 , 需要传递一个对象.
通常传递到参数1的对象, 我们使用JSON格式传输, 属性与值描述如下:
{
url:"请求的地址",
type:"请求方式GET/POST...",
async:"默认true,表示异步请求",
data:"请求的参数,格式与网址?后的格式一致",
dataType:"TEXT/JSON",//表示服务器返回的数据类型.如果编写JSON , 我们接收到的数据 就是一个对象
success:function(data){
//当服务器请求成功时, 这里执行
//参数data就是响应的内容.
// 当dataType的值为TEXT时, data是一个string类型的数据
// 当dataType的值为JSON时, data是一个对象.
},
error:function(){
//当服务器返回的状态码不再200-299的范围 , 则表示失败, 这里执行
}
}
get函数与post函数
两个函数的格式, 完全一致, 一个用于GET请求, 一个用于POST请求.
函数名称: $.get $.post
参数列表:
列表长度为4:
参数1. url : 请求地址
参数2. data: 请求时携带的参数 , 与网址?后的参数格式一致.
参数3. success: 当请求成功时 , 处理的函数
参数4. 响应的数据类型: TEXT/JSON
格式示例:
$.get("s1.do","",function(data){
},"JSON");
getJSON函数
函数名称: $.getJSON
参数列表:
参数列表长度为3
参数1. url : 请求地址
参数2. data: 请求时携带的参数, 与网页?后的参数格式一致
参数3. success: 当请求成功时, 处理的函数.
案例:
<h3>快递查询2</h3>
<input placeholder="请输入快递单号"><button onclick="x1()">查询</button>
<script type="text/javascript">
function x1(){
$("#ul1").html("");
//1. 得到用户输入的快递单号
var number = $("input").val();
//2. 发送ajax请求
layer.msg("拼命查询中...",{icon:16,shade:0.01});
$.getJSON("s2.do","number="+number,function(data){
if(data.status == 0){
//查询成功
var arr = data.result.list;
for(var i=0;i<arr.length;i++){
var $li = $("<li>时间:"+arr[i].time+"<br>进度:"+arr[i].status+"</li>");
$("#ul1").append($li);
}
}else{
//查询失败
layer.msg("很遗憾, 查询失败了");
}
});
}
</script>
<ul id="ul1">
</ul>
load函数 熟悉
与其他的ajax函数不同, 它是使用jquery对象调用的.
作用是 , 将一个网址的响应体, 加载到调用方法的元素内部.
函数名称: $obj.load
参数列表:
参数列表长度为3
参数1. url : 请求地址
参数2. [data]: 传递的参数
参数3. [success]: 请求成功时的处理函数.
案例:
<style type="text/css">
#content{
1170px;
margin: 0 auto;
text-align: center;
}
.item{
200px;
text-align: center;
height:300px;
line-height: 300px;
border:2px solid #999;
box-shadow:0px 0px 3px 2px #aaa;
display: inline-block;
margin: 10px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
</head>
<body>
<h3>JD商品</h3>
<script type="text/javascript">
//表示当前页数
var count = 1;
function x1(i){
if(count==1 && i==-1){
layer.msg("已经是第一页了");
return;
}
count+=i;
//发起ajax, 请求页面.得到新的商品内容
$("#content").load("page.jsp","count="+count);
$("#count").html(count);
}
</script>
<div>
<button onclick="x1(-1)">上一页</button>
<span id="count">1</span>
<button onclick="x1(1)">下一页</button>
</div>
<div id="content">
<div class="item">
商品1 ，图片请自行脑补
</div>
<div class="item">
商品2 ，图片请自行脑补
</div>
<div class="item">
商品3 ，图片请自行脑补
</div>
<div class="item">
商品4 ，图片请自行脑补
</div>
<div class="item">
商品5 ，图片请自行脑补
</div>
<div class="item">
商品6 ，图片请自行脑补
</div>
<div class="item">
商品7 ，图片请自行脑补
</div>
<div class="item">
商品8 ，图片请自行脑补
</div>
<div class="item">
商品9，图片请自行脑补
</div>
<div class="item">
商品10 ，图片请自行脑补
</div>
</div>
</body>
ajax-Vue
除了需要引入vue.js文件以外, 还需要引入: vue-resource.js
基于全局的 Ajax
GET请求格式:
Vue.http.get("请求地址",[传递的参数]).then(success,error);
POST请求格式:
Vue.http.post("请求地址",[传递的参数],{"emulateJSON":true}).then(success,error);
在Vue实例中使用的ajax
GET请求格式:
this.$http.get("请求地址",[传递的参数]).then(success,error);
POST请求格式:
this.$http.post("请求地址",[传递的参数],{"emulateJSON":true}).then(success,error);
GET请求参数传递的格式
{params:{键1:值1,键2:值2...键n:值n}}
POST请求参数传递的格式
{键1:值1,键2:值2...键n:值n}
success函数 与 error函数 :
这两个函数都存在一个参数: response , 指的是响应对象.
响应对象的属性:
1. url : 请求的网址
2. body: 服务器返回的响应体, 如果是JSON格式, 则body为对象, 如果不是JSON格式 ,则body为string
3. ok : boolean值, 如果响应码为200-299之间 值为true , 表示成功.
4. status: 服务器响应的状态码 ,例如: 200 , 404 ,500 ...
5. statusText: 响应状态码对应的文字, 例如status==200时, 则statusText=ok.
响应对象的函数:
1. text() : 以字符串形式, 返回响应体.
2. json() : 以对象形式, 返回响应体.
3. blob() : 以二进制Blob对象形式, 返回相应内容
Vue ajax 案例1 . 全局GET
<h3>天气查询</h3>
<input id="input1" placeholder="请输入查询的城市"><button onclick="x1()">查询</button>
<div id="div1"></div>
<script type="text/javascript">
function x1(){
var div1 = document.getElementById("div1");
div1.innerHTML = "";
var city = document.getElementById("input1").value;
//s3.do?city=输入框内容
Vue.http.get("s3.do",{params:{"city":city}}).then(function(res){
var date = res.body.result.date;
var week = res.body.result.week;
var weather = res.body.result.weather;
var temp = res.body.result.temp;
var templow = res.body.result.templow;
var temphigh = res.body.result.temphigh;
div1.innerHTML =
"日期:"+date+" "+week+"<br><br>"
+"天气情况:"+weather
+"<br>当前温度:"+temp+"<br>"
+"今天温度区间: "+templow+" ~ "+temphigh;
;
},function(res){
div1.innerHTML = "很遗憾, 查询失败";
});
}
</script>
Vue ajax 案例2 . 全局POST
<h3>天气查询</h3>
<input id="input1" placeholder="请输入查询的城市"><button onclick="x1()">查询</button>
<div id="div1"></div>
<script type="text/javascript">
function x1(){
var div1 = document.getElementById("div1");
div1.innerHTML = "";
var city = document.getElementById("input1").value;
//s3.do?city=输入框内容
Vue.http.post("s3.do",{"city":city},{"emulateJSON":true}).then(function(res){
var date = res.body.result.date;
var week = res.body.result.week;
var weather = res.body.result.weather;
var temp = res.body.result.temp;
var templow = res.body.result.templow;
var temphigh = res.body.result.temphigh;
div1.innerHTML =
"日期:"+date+" "+week+"<br><br>"
+"天气情况:"+weather
+"<br>当前温度:"+temp+"<br>"
+"今天温度区间: "+templow+" ~ "+temphigh;
;
},function(res){
div1.innerHTML = "很遗憾, 查询失败";
});
}
</script>
Vue ajax 案例3 . Vue实例中GET
<h3>天气查询</h3>
<div id="main">
<input id="input1" placeholder="请输入查询的城市" v-model="city"><button @click="x1">查询</button>
<div><br><br>
日期:{{time}} {{week}}<br><br>
天气:{{weather}}<br>
当前温度:{{temp}}<br>
当天温度区间:{{templow}} ~ {{temphigh}}<br>
</div>
</div>
<script type="text/javascript">
var vue = new Vue({
el:"#main",
data:{
city:"",
time:"",
week:"",
weather:"",
temp:"",
templow:"",
temphigh:"",
},
methods:{
x1:function(){
this.$http.get("s3.do",{params:{"city":this.city}}).then(function(res){
this.time = res.body.result.date;
this.week = res.body.result.week;
this.weather = res.body.result.weather;
this.temp = res.body.result.temp;
this.templow = res.body.result.templow;
this.temphigh = res.body.result.temphigh;
},function(res){
});
}
}
});
</script>
Vue ajax 案例4 . Vue实例中POST
<h3>天气查询</h3>
<div id="main">
<input id="input1" placeholder="请输入查询的城市" v-model="city"><button @click="x1">查询</button>
<div><br><br>
日期:{{time}} {{week}}<br><br>
天气:{{weather}}<br>
当前温度:{{temp}}<br>
当天温度区间:{{templow}} ~ {{temphigh}}<br>
</div>
</div>
<script type="text/javascript">
var vue = new Vue({
el:"#main",
data:{
city:"",
time:"",
week:"",
weather:"",
temp:"",
templow:"",
temphigh:"",
},
methods:{
x1:function(){
this.$http.post("s3.do",{"city":this.city},{"emulateJSON":true}).then(function(res){
this.time = res.body.result.date;
A this.week = res.body.result.week;
this.weather = res.body.result.weather;
this.temp = res.body.result.temp;
this.templow = res.body.result.templow;
this.temphigh = res.body.result.temphigh;
},function(res){
});
}
}
});
</script>