Ajax 技术应用

FiveMonthsDays

1 Ajax 简介

1.1 Ajax是什么

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

1.2Ajax技术应用场景

1)Ajax技术最大的优势就是底层异步,然后进行局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用。
2)Ajax可以仅向服务器发送并取回必要的数据,并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少,服务器响应的速度就可以加快。
劣势是:不能之间进行跨域访问

2 Ajax 快速入门

2.1请求响应过程分析

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

2.2Ajax应用的编程步骤如下

1)基于dom事件创建XHR对象(XMLHttpRequest对象)
2)注册XHR对象监听状态,通过回调函数(callback)处理状态信息
3)创建于服务端的连接
4)发送异步请求实现与服务端的通讯

2.3Ajax入门代码简易实现

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

2.3.1第一步服务端代码设计

**
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";
 }
}

2.3.2客户端代码设计

客户端页面关键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.1Ajax关键代码的封装

在实际编程过程中我们通常会封装代码共性。提取代码特性,然后来提高代码的可重用性。例如:
第一步:封装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.对响应结果进行处理(在回调函数中处理)。
}

第三步:在业务方法中应用封装好的代码

阅读 474
1 声望
0 粉丝
0 条评论
1 声望
0 粉丝
文章目录
宣传栏