Ajax技术应用

思无邪

1.Ajax简介


1.1Ajax是什么

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

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。


在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,JavaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。

Ajax 的核心思想是将数据分类(可以按任何用户需要的方式分类)然后放在不同的服务器页中, 这样当用户需要时只要加载需要的那个页即可.


传统Web应用中简易的同步模型分析,如图-1所示:
image.png

图-1


基于 Ajax 技术的异步请求响应模型分析,如图-2所示:
image.png
图-2


1.2Ajax的应用场景*

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

  • 商品系统
  • 评价系统
  • 地图系统
  • ......

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


1.3. Ajax技术时序模型分析

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

image.png

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


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

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


2.Ajax 快速入门


2.1 Ajax 请求响应过程分析

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

图-5

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

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

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

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

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


2.2 Ajax入门代码简易实现

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


第一步:服务端代码设计
创建 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();
}

3. Ajax 基本业务实现

3.1 基本业务描述

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


3.2 服务端关键代码实现


在服务端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";
 }

3.3 客户端关键代码实现

构建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.打开链接
 //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方法传值
 }

调用过程分析:

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
3. 设置响应HTTP请求状态变化的函数.
4. 发送HTTP请求.
5. 获取异步调用返回的数据.
6. 使用JavaScript和DOM实现局部刷新.
阅读 666

万水千山皆要好运

4 声望
0 粉丝
0 条评论

万水千山皆要好运

4 声望
0 粉丝
文章目录
宣传栏