Ajax技术应用

头像
思无邪
    阅读 5 分钟
    2

    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实现局部刷新.
    ajax
    思无邪
    4 声望0 粉丝

    万水千山皆要好运

    « 上一篇
    微服务架构之注册中心
    下一篇 »
    设计模式之单例模式

    引用和评论

    推荐阅读
    头像
    设计模式之单例模式

    思无邪阅读 1.1k

    头像
    第6章：Vue中的ajax（包含：回顾发送ajax请求方式、vue-cli脚手架配置代理服务器）

    刘大猫阅读 167

    头像
    回顾前端页面发送ajax请求方式

    刘大猫阅读 120

    0 条评论
    得票最新