**

Ajax 技术应用

1.Ajax 简介

1.1Ajax 是什么？

Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。

传统Web应用中简易的同步模型分析，如图-1所示：

图-1

基于Ajax技术的异步请求响应模型分析，如图-2所示：

图-2

1.2Ajax 技术应用场景？

Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用,例如:商品系统。

评价系统。

地图系统。

…..

AJAX可以仅向服务器发送并取回必要的数据，并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少，服务器响应的速度就更快了。但Ajax技术也有劣势，最大劣势是不能直接进行跨域访问。

1.3Ajax 技术时序模型分析？

传统Web应用中的，同步请求应用时序模型分析，如图-3所示：

图-3

在图-3中，客户端向服务端向服务端发送请求需要等待服务端的响应结果，服务端返回数据以后，客户端可以继续发送请求。

基于Ajax技术的Web异步请求响应模型如图-4所示：

图-4

在图-4中，客户端可以向服务端发送异步请求，客户端无需等待服务端的响应结果，可以不断向服务端发送请求。

2.Ajax 快速入门

2.1 Ajax 请求响应过程分析

所有的Ajax 请求都会基于DOM(HTML元素)事件，通过XHR(XMLHttpRequest)对象实现与服务端异步通讯局部更新，如图-4所示：

图-4

基于图-4的分析,Ajax应用的编程步骤如下:

第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)

第二步：注册XHR对象状态监听，通过回调函数(callback)处理状态信息。

第三步：创建与服务端的连接

第四步：发送异步请求实现与服务端的通讯

2.2 Ajax入门代码简易实现

业务描述,设计如下页面,在页面上点击Get Request按钮时,向服务端发送异步请求获取服务端数据,然后将响应结果更新到页面上.

第一步:服务端代码设计

创建AjaxController类,用于处理客户端请求

package com.cy.ajax.controller;

@Controller

@RequestMapping("/")

public class AjaxController {

//处理ajax请求的服务端设计

@RequestMapping("doAjaxGet")

@ResponseBody //将方法返回值以字符串形式进行输出

public String doAjaxGet() throws Exception{

System.out.println("==doGet()==");

//Thread.sleep(3000);//模拟耗时操作

return "Ajax Get request result";

}

}

第二步:客户端代码设计

客户端页面关键dom元素设计:

异步请求

Get Request

loading data ....

客户端页面中关键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/doAjaxGet",true);//true表示异步(底层会启动线程与服务端通讯)

//4.发送请求

xhr.send();

}Ajax 基本业务实现

===============

3.1 基本业务描述

构建ajax-02页面,首先,在文本框中注册焦点事件,基于焦点事件判断输入内容是否存在.其次点击save按钮时,将用户内容异步提交到服务器端.

3.2 服务端关键代码实现

在服务端AjaxConotroller中添加如下代码,处理客户端请求:

private List names=new ArrayList();//假设这是存储数据的表

/*通过此方法校验名字是否存在/

@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";

}

3.3 客户端关键代码实现

构建ajax-02页面,然后添加关键元素.

第一步:html关键表单元素设计

The Ajax 02 Page

Ajax 表单请求

第二步:添加JS关键业务代码

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=""+xhr.responseText+"";

}

};

//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=""+xhr.responseText+"";

}

};

//3.打开链接

//var name=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方法传值

}

4.Ajax 技术进阶实现

4.1 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;

})

}

调用过程分析：

断点：调试分析：

4.2 Ajax 编程框架基本实现(了解)

我们在实际的js编程中经常会以面向对象的方式进行实现，例如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对象并赋值给变量全局变量Ajax

})()

此时外界再调用doAjaxGet和doAjaxPost函数时，可以直接通过Ajax对象进行实现。

5.Ajax 技术在Jquery中应用

5.1Jquery 简介

jQuery是一个快速、简洁的JavaScript库框架，是一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

5.2Jquery 中常用Ajax 函数

jQuery中基于标准的ajax api 提供了丰富的Ajax函数应用，基于这些函数可以编写少量代码，便可以快速实现Ajax操作。常用函数有：ajax(…)

get(…)

getJSON(…)

post(…)

…

说明:jquery 中ajax相关函数的语法可参考官网(jquery.com).

5.3Jquery 中常用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[,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[,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完以后的结果,还可以这样写

}

4.Ajax 章节总结

4.1重难点分析客户端与服务端通讯时的请求响应模型?(同步,异步)

Ajax编程的基本步骤(入口对象-XMLHttpRequest),Ajax应用场景？

JQuery框架中ajax函数的基本应用？(ajax(),get(),getJSON(...).....)

JS代码编写过程中断点(debugger)的应用方式？

4.2FAQ分析Ajax技术有什么优势,劣势?(优势:按需异步加载,局部更新,改善用户体验)

Ajax技术中最核心对象?(XMLHttpRequest-入口对象)

客户端JS问题如何调试?(打桩console.log(),debugger,排除法)

对于一些js框架你是如何学习？官网(，demo，实践-浏览器测试，搜索引擎)

4.3BUG分析单词拼写错误,如图-7所示：

图-7

问题分析：点击错误提示中的54行代码，看看是不单词拼写错误，检查param单词在哪定义了。丢失括号，如图-8所示

图-8

问题分析：点击错误提示中的59行代码，看看是不是丢失了小括号“)”

**