荐 Ajax技术的应用入门
文章目录
一、Ajax 简介
1.1 Ajax 是什么?
Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯,获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。
① 传统Web应用中简易的同步模型分析:
② 基于Ajax技术的异步请求响应模型分析:
1.2Ajax 技术应用场景?
Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用,例如:
- 商品系统。
- 评价系统。
- 地图系统。
- ……
AJAX可以仅向服务器发送并取回必要的数据,并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少,服务器响应的速度就更快了。但Ajax技术也有劣势,最大劣势是不能直接进行跨域访问。
1.3Ajax 技术时序模型分析?
(1)传统Web应用中的,同步请求应用时序模型分析:
客户端向服务端向服务端发送请求需要等待服务端的响应结果,服务端返回数据以后,客户端可以继续发送请求。
(2)基于Ajax技术的Web 异步请求 响应模型:
客户端可以向服务端发送异步请求,客户端无需等待服务端的响应结果,可以不断向服务端发送请求。
二、Ajax 快速入门
2.1 Ajax 请求响应过程分析
所有的Ajax 请求都会基于DOM(HTML元素)事件,通过XHR(XMLHttpRequest)对象实现与服务端异步通讯局部更新
2.2 Ajax 编程基本步骤分析
第一步:基于dom事件创建XHR对象(XMLHttpRequest对象)
第二步:注册XHR对象状态监听,通过回调函数(callback)处理状态信息。
第三步:创建与服务端的连接
第四步:发送异步请求实现与服务端的通讯
第五步:通过回调(callback)函数,获得响应结果并进行数据更新.(非阻塞)
2.3 Ajax 请求响应编程操作实践
2.3.1 Ajax Get 请求操作实现
基于ajax技术中的XMLHttpRequest对象,向服务端发起异步Get请求,关键代码分析如下:
function doAjaxGet(url,params,callback){
//1.创建XmlHttpRequest对象
var xhr=new XMLHttpRequest();
//2.设置状态监听,监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立,请求是否在处理,响应是否已产生)
xhr.onreadystatechange=function(){//callback(回调函数)
//基于xhr对象获取的通讯状态,对响应数据进行处理
//readyState状态说明
//0:未初始化,尚未调用open() 方法
//1:启动。已经调用open() 方法,但尚未调用send() 方法
//2:发送。已经调用send() 方法,但尚未接收到响应
//3:接收。已经接收到部分响应
//4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了
if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
//服务端响应的结果会传递给XHR对象,我们可以借助responseText获取响应结果
callback(xhr.responseText);
}
}
//3.创建与服务端的连接
xhr.open("GET",url+"?"+params,true);//true表示异步
//4.发送请求
xhr.send(null); //Get请求,send方法不传内容
//5.对响应结果进行处理(在回调函数中处理)。
}
过程分析图:
案例分析:
动手尝试: 基于时序图分析,进行代码设计和实现
(1)服务端控制层关键代码实现:
在控制层的doFindGoods方法中,通过业务层获取商品信息,并通过 @ResponseBody注解对方法进行描述,用于告诉SpringMVC将方法返回值转换为json格式的字符串。
@RequestMapping("doFindGoods")
@ResponseBody
public List<Goods> doFindGoods(String name)throws Exception{
List<Goods> list=goodsService.findGoods(name);
return list;
}
(2)客户端关键代码实现:
在客户端页面通过doFindGoods方法,基于ajax技术异步获取商品信息,并将获取的商品信息更新到页面上。
function doFindGoods(){
//1.定义请求url
var url="doFindGoods";
//2.定义请求参数
var params="";
//3.发送异步请求
doAjaxGet(url,params,function(result){//callback
//将服务端响应的结果输出到控制台
console.log("result",result);//jsonStr
//处理响应结果(将响应结果更新到页面上)
doHandleResponseResult(result);
})
}
通过doHandleResponseResult方法将ajax获得的响应结果呈现在页面上。
function doHandleResponseResult(result){
//1.将json格式字符串转换为json格式的JS对象(字符串无法直接提取内容)
var jsonObj=JSON.parse(result);//JSON为JS中的一个类
//2.迭代jsonObj数组对象,并将内容呈现在tbody中
//2.1 将每一行内容封装到tr对象中
var trs=""
for(var i=0;i<jsonObj.length;i++){//循环一次取一行
trs+="<tr>"+
"<td>"+jsonObj[i].id+"</td>"+
"<td>"+jsonObj[i].name+"</td>"+
"<td>"+jsonObj[i].remark+"</td>"+
"<td>"+
new Date(jsonObj[i].createdTime).toLocaleString()+
"</td>"+
"<td>delete</td>"+
"</tr>"
}
//2.2将所有的tr添加到tbody中
var tBody=document.getElementById("tbodyId");
tBody.innerHTML=trs;
}
2.3.2 Ajax Post 请求操作实现
基于ajax中XMLHttpRequest对象,向服务端发起异步Post请求。对于post请求在发送请求执行需要设置请求头,见红色代码部分。
function doAjaxPost(url,params,callback){
//1.创建XmlHttpRequest对象
var xhr=new XMLHttpRequest();
//2.设置状态监听,监听XmlHttpRequest对象与服务端通讯的过程.
xhr.onreadystatechange=function(){//callback(回调函数)
//基于xhr对象获取的通讯状态,对响应数据进行处理
if(xhr.readyState==4&&xhr.status==200){//500表示服务端出错了
//服务端响应的结果会传递给XHR对象,
//我们可以借助xhr.responseText获取响应结果
callback(xhr.responseText);
}
}
//3.创建与服务端的连接
xhr.open("POST",url,true);//true表示异步
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send(params); //post请求将参数写到send方法
//5.对响应结果进行处理(在回调函数中处理)。
}
动手尝试: 基于时序图分析,进行代码设计和实现
(1)服务端控制层关键代码实现:
在控制层的doSaveGoods方法中,通过业务层获取商品信息,并通过@ResponseBody注解对方法进行描述,用于告诉SpringMVC将方法返回值转换为json格式的字符串。
@RequestMapping("doSaveGoods")
@ResponseBody
public String doSaveGoods(Goods goods)throws Exception{
goodsService.saveGoods(goods);
return “save ok”;
}
(2)客户端关键代码实现:
在客户端页面中,通过doSaveGoods方法,基于ajax技术异步提交商品信息到服务端,由服务端对象方法将数据写入到数据库。
function doSaveGoods(){
//1.定义请求url
var url="doSaveGoods";
//2.定义请求参数
var nameObj=document.getElementById("nameId");
var remarkObj=document.getElementById("remarkId");
var params="name="+nameObj.value+"&remark="+remarkObj.value+;
//3.发送异步请求
doAjaxPost(url,params,function(result){//callback
alert(result);
})
}
2.4 Ajax 编程框架基本实现
我们在实际的js编程中经常会以面向对象的方式进行实现,例如2.3章节中doAjaxGet函数如何以对象方法进行应用呢?关键代码分析如下:
(function(){
//定义一个函数,可以将其连接为java中的类
var ajax=function(){}
//在变量ajax指向的类中添加成员,例如doAjaxGet函数,doAjaxPost函数
ajax.prototype={
doAjaxGet:function(url,params,callback){
//创建XMLHttpRequest对象,基于此对象发送请求
var xhr=new XMLHttpRequest();
//设置状态监听(监听客户端与服务端通讯的状态)
xhr.onreadystatechange=function(){//回调函数,事件处理函数
if(xhr.readyState==4&&xhr.status==200){
//console.log(xhr.responseText);
callback(xhr.responseText);//jsonStr
}
};
//建立连接(请求方式为Get,请求url,异步还是同步-true表示异步)
xhr.open("GET",url+"?"+params,true);
//发送请求
xhr.send(null);//GET请求send方法不写内容
},
doAjaxPost:function(url,params,callback){
//创建XMLHttpRequest对象,基于此对象发送请求
var xhr=new XMLHttpRequest();
//设置状态监听(监听客户端与服务端通讯的状态)
xhr.onreadystatechange=function(){//回调函数,事件处理函数
if(xhr.readyState==4&&xhr.status==200){
//console.log(xhr.responseText);
callback(xhr.responseText);//jsonStr
}
};
//建立连接(请求方式为POST,请求url,异步还是同步-true表示异步)
xhr.open("POST",url,true);
//post请求传参时必须设置此请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求
xhr.send(params);//post请求send方法中传递参数
}
}
window.Ajax=new ajax();
})()
外界可以通过ajax.doAjaxPost或者ajax.doAjaxGet调用此js函数里面的方法,和面向对象类似,new一个对象,可以调用本类里面的属性和方法(此说法仅供参考),但是需要引入,如下:
三、Ajax 技术在Jquery中应用
3.1 Jquery 简介
jQuery是一个快速、简洁的JavaScript框架,是一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
3.2 Jquery 中常用Ajax 函数
jQuery中基于标准的ajax api 提供了丰富的Ajax函数应用,基于这些函数可以编写少量代码,便可以快速实现Ajax操作。常用函数有:
- ajax(…)
- get(…)
- getJSON(…)
- post(…)
- …
说明: jquery 中ajax相关函数的语法可参考官网(jquery.com).
四、Ajax 章节总结
4.1 重难点分析
- 客户端与服务端通讯时的请求响应模型?
----同步,异步 - Ajax编程的基本步骤(入口对象-XMLHttpRequest),Ajax应用场景?
- JQuery框架中ajax函数的基本应用?
----ajax()
----get()
----getJSON(…)
-----… - JS代码编写过程中断点(debugger)的应用方式?
4.2 FAQ分析
- Ajax技术有什么优势,劣势?
----优势:按需异步加载,局部更新,改善用户体验) - Ajax技术中最核心对象?
----XMLHttpRequest-入口对象 - 客户端JS问题如何调试?
----打桩console.log(),debugger,排除法 - 对于一些js框架你是如何学习?
----官网,demo,实践-浏览器测试,搜索引擎
本文地址:https://blog.csdn.net/qq1808814025/article/details/107378958