Ajax简单应用入门以及简单的jq框架应用

Ajax 是什么?

Ajax不允许直接跨域访问(需要注解CrossOrigin支持跨域访问)

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

Ajax 技术应用场景?

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

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

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

    Ajax 请求响应过程分析


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

Ajax简单应用入门以及简单的jq框架应用_第1张图片

图-4

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

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

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

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

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

Ajax入门代码简易实现

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

Ajax简单应用入门以及简单的jq框架应用_第2张图片

第一步:服务端代码设计

创建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元素设计:

 
  
    异步请求         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/doGet",true);
 //true表示异步(底层会启动线程与服务端通讯) 
 //4.发送请求 xhr.send();
}

Ajax 基本业务实现

基本业务描述

构建ajax-02页面,首先,在文本框中注册焦点事件,基于焦点事件判断输入内容是否存在.其次点击save按钮时,将用户内容异步提交到服务器端.
Ajax简单应用入门以及简单的jq框架应用_第3张图片

服务端关键代码实现

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

 private List names=new ArrayList();
 //假设这是存储数据的表  
 @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关键表单元素设计

 

The Ajax 02 Page

   Ajax 表单请求    
               
   

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

客户端关键代码实现

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

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

 

The Ajax 02 Page

   Ajax 表单请求    
               
   

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