Ajax 是什么？
Ajax (Asynchronous JavaScript and XML) 是一种Web利用技术,能够借助客户端脚本(javascript)与服务端利用进行异步通信，获取服务端数据当前,能够进行部分刷新。进而进步数据的响应和渲染速度。
Ajax 技术利用场景？
Ajax技术最大的劣势就是底层异步,而后部分刷新,进而进步用户体验,这种技术当初在很多我的项目中都有很好的利用,例如:
- 商品零碎。
- 评估零碎。
- 地图零碎。
- …..
AJAX能够仅向服务器发送并取回必要的数据，并在客户端采纳JavaScript解决来自服务器的响应。这样在服务器和浏览器之间替换的数据大量缩小，服务器响应的速度就更快了。但Ajax技术也有劣势，最大劣势是不能间接进行跨域拜访。
Ajax 申请响应过程剖析
所有的Ajax 申请都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通信部分更新，如图-4所示：
图-4
基于图-4的剖析,Ajax利用的编程步骤如下:
第一步：基于dom事件创立XHR对象(XMLHttpRequest对象)
第二步：注册XHR对象状态监听，通过回调函数(callback)解决状态信息。
第三步：创立与服务端的连贯
第四步：发送异步申请实现与服务端的通信
Ajax入门代码繁难实现
业务形容,设计如下页面,在页面上点击Get Request按钮时,向服务端发送异步申请获取服务端数据,而后将响应后果更新到页面上.
第一步:服务端代码设计
创立AjaxController类,用于解决客户端申请
package com.cy.ajax.controller;@Controller@RequestMapping("/")public class AjaxController {@RequestMapping("doAjax01UI") public String doAjax01UI() { return "ajax-01"; } //解决ajax申请的服务端设计 @RequestMapping("doAjaxGet") @ResponseBody //将办法返回值以字符串模式进行输入 public String doAjaxGet() throws Exception{ System.out.println("==doGet()=="); //Thread.sleep(3000); //模仿耗时操作 return "Ajax Get request result"; } }第二步:客户端代码设计
客户端页面要害dom元素设计:
<!-- Ajax形式的异步申请测试 --> <fieldset> <!-- 分组设置 --> <legend>异步申请</legend> <button onclick="doAjaxGet()">Get Request</button> <span id="ajaxResultId">loading data ....</span> </fieldset>客户端页面中要害Ajax代码设计与实现
//Ajax形式的申请 function doAjaxGet(){//谬误调试:debugger,console.log(),排除法 //1.创立XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听(将服务端响应的后果更新到ajaxResultId地位) xhr.onreadystatechange=function(){ //console.log(xhr.readState); if(xhr.readyState==4&&xhr.status==200){ console.log(xhr.responseText); document.getElementById("ajaxResultId").innerHTML=xhr.responseText; } }; //3.建设连贯 xhr.open("GET","http://localhost/doGet",true); //true示意异步(底层会启动线程与服务端通信) //4.发送申请 xhr.send();}Ajax 根本业务实现
根本业务形容
构建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"; }客户端要害代码实现
构建ajax-02页面,而后增加要害元素.
第一步: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要害业务代码
客户端要害代码实现
构建ajax-02页面,而后增加要害元素.
第一步: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.getElementById("result").innerHTML=""; } function doSave(){ //1.创立XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ document.getElementById("result").innerHTML=" <font color='red'>"+xhr.responseText+"</font>"; } }; //3.关上链接 //var name=document.getElementById("nameId").value; var name=document.forms[0].name.value; xhr.open("POST","/doSave",true); //post申请要设置申请头(规定) xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4.发送申请 xhr.send("name="+name); //Post申请send办法传值 } function doCheck(){ //在此函数中向服务端发动异步申请,检测name是否存在 //1.创立XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>"; } }; //3.关上链接 //varname=document.getElementById("nameId").value; var name=document.forms[0].name.value; console.log("name",name); xhr.open("GET","/doCheck?name="+name,true); //4.发送申请 xhr.send(null); //Get申请send办法传值 }<script type="text/javascript"> function doClear(){ document.getElementById("result").innerHTML=""; } function doSave(){ //1.创立XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>"; } }; //3.关上链接 //varname=document.getElementById("nameId").value; var name=document.forms[0].name.value; xhr.open("POST","/doSave",true); //post申请要设置申请头(规定) xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4.发送申请 xhr.send("name="+name);//Post申请send办法传值 } function doCheck(){ //在此函数中向服务端发动异步申请,检测name是否存在 //1.创立XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>"; } }; //3.关上链接 //varname=document.getElementById("nameId").value; var name=document.forms[0].name.value; console.log("name",name); xhr.open("GET","/doCheck?name="+name,true); //4.发送申请 xhr.send(null); //Get申请send办法传值 }Ajax 技术进阶实现
Ajax 要害代码的封装
在理论编程过程中咱们通常会封装代码共性,提取代码个性.而后来进步代码的可重用性.例如:
第一步:封装AJax 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.对响应后果进行解决(在回调函数中解决)。}第二步:封装AJax 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.对响应后果进行解决(在回调函数中解决)。}第三步:在业务办法中利用封装好的代码,例如:
保留业务的要害客户端代码剖析及实现.
function doSave(){ //1.定义申请url var url="doSave"; //2.定义申请参数 var params="name="+document.forms[0].name.value; //3.发送异步的post申请 doAjaxPost(url,params,function(result){ document.getElementById("result").innerHTML=result; }) }查看名字是否存在的要害客户端代码实现
function doCheck(){ //在此函数中向服务端发动异步申请,检测name是否存在 //1.定义申请url var url="doCheck"; //2.定义申请参数 var name=document.forms[0].name.value; var params="name="+name; //3.发送异步Get申请 doAjaxGet(url,params,function(result){ document.getElementById("result").innerHTML=result; }) }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 技术在Jquery中利用
Jquery 简介
jQuery是一个疾速、简洁的JavaScript框架，是一个优良的JavaScript代码库（或JavaScript框架）。jQuery设计的主旨是“write Less，Do More”，即提倡写更少的代码，做更多的事件。它封装JavaScript罕用的性能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
query 中罕用Ajax 函数
jQuery中基于规范的ajax api 提供了丰盛的Ajax函数利用，基于这些函数能够编写大量代码，便能够疾速实现Ajax操作。罕用函数有：
- ajax(…)
- get(…)
- getJSON(…)
- post(…)
- …
阐明:jquery 中ajax相干函数的语法可参考官网(jquery.com).
Jquery 中罕用Ajax 函数利用案例分享
get函数利用,代码如下
//向服务端发送Ajax Get 申请function doGet(){ //1.定义申请的url var url="doAjaxGet"; //2.定义申请的参数 var params="msg=hello jquery ajax get";//3.发送异步Get申请 //这里的$符号为jQuery中的一个对象 //get(url[,params][,callback][,dataType])为jquery中的一个ajax函数$.get(url,params,function(result){ //document.getElementById("result").innerHTML=result; $("#result").html(result); },"text");//在这个函数中你看到ajax的代码了吗? }post函数利用,代码如下
//向服务端发送Ajax Post 申请 function doPost(){ //1.定义申请的url var url="doAjaxPost"; //2.定义申请的参数 var params="msg=hello jquery ajax Post"; //3.发送异步POST申请 //这里的$符号为jQuery中的一个对象 //post(url[,params][,callback][,dataType])为jquery中的一个ajax函数 $.post(url,params,function(result){ //post申请个别用于向服务端提交数据 $("#result").html(result); }); //在这个函数中你看到ajax的代码了吗? }ajax函数利用
//向服务端发送Ajax Post 申请 function doAjax(){ //1.定义申请的url var url="doAjaxGet"; //2.定义申请的参数 var params="msg=hello jquery ajax request"; //3.发送异步Get申请 //这里的$符号为jQuery中的一个对象 $.ajax({ type:"GET", //示意get申请(默认为get),省略不写为Get url:url, //":"右边的内容为语法定义,咱们不能批改.":"左边为咱们本人定义 data:params, //申请参数 async:true, //true示意异步 success:function(result){ //回调函数 $("#result").html(result); } }); //在这个函数中你看到ajax的代码了吗? }load函数利用
function doLoad(){ //1.定义申请的url var url="doAjaxGet"; //2.定义申请的参数 var params="msg=hello jquery ajax request"; //3.发送异步Get申请 //在指定地位异步加载url对象的资源, //在以后利用中示意把url对象的资源出现到#result地位. //$("#result").load(url,params,function(){ //回调函数,资源加载实现执行此函数 // console.log("load complete"); //}); $("#result").load(url); //如果不向服务端传值,不须要解决load完当前的后果,还能够这样写 }总结
重难点剖析
- 客户端与服务端通信时的申请响应模型?(同步,异步)
- Ajax编程的根本步骤(入口对象-XMLHttpRequest),Ajax利用场景？
- JQuery框架中ajax函数的根本利用？(ajax(),get(),getJSON(...).....)
- JS代码编写过程中断点(debugger)的利用形式？
FAQ剖析
- Ajax技术有什么劣势,劣势?(劣势:按需异步加载,部分更新,改善用户体验)
- Ajax技术中最外围对象?(XMLHttpRequest-入口对象)
- 客户端JS问题如何调试?(打桩console.log(),debugger,排除法)
- 对于一些js框架你是如何学习？官网(，demo，实际-浏览器测试，搜索引擎)
BUG剖析
- 单词拼写错误,如图-7所示：
图-7
问题剖析：点击谬误提醒中的54行代码，看看是不单词拼写错误，查看param单词在哪定义了。
- 失落括号，如图-8所示
图-8
问题剖析：点击谬误提醒中的59行代码，看看是不是失落了小括号“)”。