AJAX技术--03--原生框架
基本业务描述
构建ajax-02页面,首先,在文本框中注册焦点事件,基于焦点事件判断输入内容是否存在.其次点击save按钮时,将用户内容异步提交到服务器端.
方式一
服务端关键代码实现
在服务端AjaxConotroller中添加如下代码,处理客户端请求:
private List<String> names=new ArrayList<String>();//假设这是存储数据的表
@RequestMapping("doAjax02UI")
public String doAjax02UI() {
return "ajax-02";
}
/**通过此方法校验名字是否存在*/
@RequestMapping("doCheck")
@ResponseBody
public String doCheck(String name) {
if(names.contains(name))
return "名字"+name+"已经存在,请选择其它名字";
return "名字"+name+"不存在,可以注册";
}
/**将客户端请求数据写入到names对应的集合*/
@RequestMapping("doSave")
@ResponseBody
public String doSave(String name) {
System.out.println("name="+name);
names.add(name);
return "save ok";
}
客户端关键代码实现
第一步:html关键表单元素设计
<h1>The Ajax 02 Page</h1>
<fieldset>
<legend>Ajax 表单请求</legend>
<form>
<input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()">
<input type="button" onclick="doSave()" value="Save">
</form>
<span id="result"></span>
</fieldset>
第二步:添加JS关键业务代码
<script type="text/javascript">
function doClear(){
document.forms[0].name.value="";
document.getElementById("resultId").innerHTML="";
}
//检测名字是否已存在
function doCheck(){
//1.创建XHR对象
const xhr=new XMLHttpRequest();
//2.定义XHR对象的状态监听函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
document.getElementById("resultId").innerHTML=
`${xhr.responseText}`;
}
}
//3.建立连接
let name=document.forms[0].name.value;
xhr.open("GET",`doCheck?name=${name}`,true);
//4.发送请求
xhr.send(null);
}
//保存表单中名字的值
function doSave(){//debugger,log,排除法
// debugger
//1.创建XHR对象
const xhr=new XMLHttpRequest();
//2.定义XHR对象的状态监听函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
document.getElementById("resultId").innerHTML=xhr.responseText;
}
}
//3.建立连接(Post)
xhr.open("POST","doSave",true);
//post请求传参需要设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
let name=document.forms[0].name.value;//获取输入的name属性值
//构建参数对象
var params={"name":name};//JavaScript中的对象(原生ajax方式不可以直接传递这样的对象)
xhr.send(params);//post请求的参数需要写到此位置
}
</script>
构建参数对象
- 方式1 ====> var params=“name=”+name;
淘汰 - 方式2 ====> const params=
name=${name};
一种新的写法,这种写法称之为模板字符串,所有字符串拼接都可以以这种方式进行实现 - 方式3 ====> var params={“name”:name};
JavaScript中的对象(原生ajax方式不可以直接传递这样的对象
方式二
抽取共性,封装到 js 文件中
<script type="text/javascript" src="/js/ajax.js"></script>
客户端关键代码实现
第一步: .html 的JS关键业务代码
<script type="text/javascript" src="/js/ajax.js"></script>
<script type="text/javascript">
//检测名字是否已存在
function doCheck(){
//1.定义请求的url
var url="http://localhost/doCheck";
//2.定义请求参数
var name=document.forms[0].name.value;
var params=`name=${name}`;
//3.发送ajax get请求
doAjaxGet(url,params,(result)=>{
document.getElementById("resultId").innerHTML=
`${result}`;
});
}
//保存表单中名字的值
function doSave(){//debugger,log,排除法
//1.请求url
const url="http://localhost/doSave";
//2.请求参数
let name=document.forms[0].name.value;
let params=`name=${name}`;
//3.发送ajax post请求
doAjaxPost(url,params,(result)=>{
alert(result);
})
}
</script>
第二步:ajax.js文件业务代码
//封装共性,提取特性
function doAjaxGet(url,params,callback){//定义函数(函数声明方式)
//1.创建XHR对象
const xhr=new XMLHttpRequest();
//2.定义XHR对象的状态监听函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
callback(xhr.responseText);//回调函数
}
}
//3.建立连接
xhr.open("GET",`${url}?${params}`,true);
//4.发送请求
xhr.send(null);
}
function doAjaxPost(url,params,callback){
//1.创建XHR对象
const xhr=new XMLHttpRequest();
//2.定义XHR对象的状态监听函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
callback(xhr.responseText);//回调函数
}
}
//3.建立连接
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send(params);
}
方式三:
构建一个原生ajax框架
客户端关键代码实现
第一步: .html 的JS关键业务代码
<script type="text/javascript" src="/js/ajaxfk.js"></script>
<script type="text/javascript">
//检测名字是否已存在
function doCheck(){
//1.定义请求的url
var url="http://localhost/doCheck";
//2.定义请求参数
var name=document.forms[0].name.value;
var params=`name=${name}`;
//3.发送ajax get请求
$$.doAjaxGet(url,params,(result)=>{
document.getElementById("resultId").innerHTML=
`${result}`;
});
}
//保存表单中名字的值
function doSave(){//debugger,log,排除法
//1.请求url
const url="http://localhost/doSave";
//2.请求参数
let name=document.forms[0].name.value;
let params=`name=${name}`;
//3.发送ajax post请求
$$.doAjaxPost(url,params,(result)=>{
alert(result);
})
}
</script>
第二步:ajax.js文件业务代码
(()=>{
//1.定义一个构造函数
var ajax=function(){}//函数表达式(可以将其理解为构造函数)
//2.在构造函数内部的原型对象(Prototype)上添加ajax函数
ajax.prototype={
doAjaxGet:function(url,params,callback){
//1.创建XHR对象
const xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//服务端响应结束,客户端接收完成
if(xhr.status==200){//200表示正常响应结束
callback(xhr.responseText);//回调函数
}else{//表示出现了异常
callback(xhr.status);
}
}
}
//3.建立连接
xhr.open("GET",`${url}?${params}`,true)
//4.发送请求
xhr.send(null);
},
doAjaxPost:function(url,params,callback){
//1.创建XHR对象
const xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//服务端响应结束,客户端接收完成
if(xhr.status==200){//200表示正常响应结束
callback(xhr.responseText);//回调函数
}else{//表示出现了异常
callback(xhr.status);
}
}
}
//3.建立连接
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send(params);
}
}
//3.基于ajax构造函数构建ajax对象,并将对象赋值给全局变量Ajax
window.$$=new ajax();
})()
方式四
优化原生ajax框架
客户端关键代码实现
第一步: .html 的JS关键业务代码
<script type="text/javascript" src="/js/ajaxfk02.js"></script>
<script type="text/javascript">
//检测名字是否已存在
function doCheck(){
//1.定义请求的url
var url="http://localhost/doCheck";
//2.定义请求参数
var name=document.forms[0].name.value;
var params=`name=${name}`;
//3.发送ajax get请求
$$.doAjaxGet(url,params,(result)=>{
document.getElementById("resultId").innerHTML=
`${result}`;
});
}
//保存表单中名字的值
function doSave(){//debugger,log,排除法
//1.请求url
const url="http://localhost/doSave";
//2.请求参数
let name=document.forms[0].name.value;
let params=`name=${name}`;
//3.发送ajax post请求
$$.doAjaxPost(url,params,(result)=>{
alert(result);
})
}
</script>
第二步:ajax.js文件业务代码
(()=>{
//1.定义一个构造函数
var ajax=function(){}//函数表达式(可以将其理解为构造函数)
var JsonObj=function(type,url,data,contentType="application/x-www-form-urlencoded",async=true){//es6 中允许参数有默认值
this.type=type;
this.url=url;
this.data=data;
this.contentType=contentType;
this.async=async;
}
//2.在构造函数内部的原型对象(Prototype)上添加ajax函数
ajax.prototype={
doAjax:function(obj){
//1.创建XHR对象
const xhr=new XMLHttpRequest();
//2.设置状态监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4){//服务端响应结束,客户端接收完成
if(xhr.status==200){//200表示正常响应结束
obj.success(xhr.responseText);//回调函数
}else{//表示出现了异常
obj.error(xhr.status);
}
}
}
//3.建立连接
let type=obj.type?obj.type:"GET";
xhr.open(type,type=="GET"?`${obj.url}?${obj.data}`:obj.url,obj.async)
//4.发送请求
if(type!="GET"){
xhr.setRequestHeader("Content-Type",obj.contentType);
}
xhr.send(type=="GET"?null:obj.data);
},
doAjaxGet:function(url,params,callback){
var jsonObj=new JsonObj("GET",url,params);
jsonObj.success=callback;
jsonObj.error=callback;
this.doAjax(jsonObj);
},
doAjaxPost:function(url,params,callback){
var jsonObj=new JsonObj("POST",url,params);
jsonObj.success=callback;
jsonObj.error=callback;
this.doAjax(jsonObj);
}
}
//3.基于ajax构造函数构建ajax对象,并将对象赋值给全局变量Ajax
window.$$=new ajax();
})()