AJAX的话题与简单实现

Contents
  1. 什么是ajax?
  2. ajax的优缺点
  3. ajax简介
    1. 一般格式
    2. 参数描述
    3. 使用ajax需注意
    4. ajax实例

本篇文章主要介绍了ajax技术的概念,以及一些简单的实现。看到这个标题,我想你也有同样的困惑,那就是…

什么是ajax?

Wiki上的解释:AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),blabla…(根本就看不懂!)

那就简单点来说吧!

当年还在我小的时候,大概03年吧,我在上初一,那个时候网吧刚在我们那个小城市萌生。传奇,大话西游等第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个账号玩玩,然后接下来的一个小时我一直在,注,册,账,号。遥记得注册的时候,填了一堆信息,提交,页面跳转,嘣!“您填写的信息有误,请重填”。然后跳转回了注册页面,以此循环。我现在就在想,如果当时ajax能普及开来,我就可以省2块钱了。

那么ajax是什么?

首先ajax是一种技术。以往的网页交互方式,用户在点击一个按钮后,比如提交按钮,用户就要等待漫长的数据和服务器的交互,期间用户无法进行任何操作,只能点根烟。而ajax所做的,就是在向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他事情,等到有了结果我们可以再来处理这个事儿。

其实ajax技术早在1998年的时候就已经由微软实现了,然而直到2005年2月,Adaptive Path公司的Jesse James Garrett发表文章Ajax: A New Approach to Web Applications,人们读了后觉得哎呦不错哦这个屌,这之后ajax才大规模普及开来。

ajax的出现,极大的提高了web的用户体验。时至今日,即使国内IT发展再怎么落后,所有网站的登陆注册也已经实现了ajax交互。用户点填写完信息后,页面不用刷新就可以知道信息提交成功与否,哪错改哪。

我们姑且把ajax作为一种前后端分离的解决方案吧。

ajax的优缺点

  • 优点:
    不言而喻,使用ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序可以更加快速的回应用户动作。

  • 缺点:
    对应于使用ajax最主要的批评就是,它可以破坏浏览器的后退功能。在这种动态更新页面的情况下,用户有时候难以回到前一个页面状态,这是因为浏览器仅能记录下history中的静态页面。用户总是希望点击一下“后退”按钮就可以取消他们前一次的操作,但是在ajax应用程序中很显然无法这样做:一个被完整读入的页面和一个已经被动态修改过的页面还是有差别的。

另外一个观点认为,使用动态页面更新使得用户很难将某个特定的“状态”保存到收藏夹或者share给其他人,不过这个问题是有解决方案的:使用“URL片断标识符”(也就是我们通常称为锚点,即URL中#后面的部分)来保持追踪,目前来讲我在github中的很多readme的链接中经常看到,并且很多浏览器允许JavaScript动态更新锚点,这就使得ajax应用程序在更新显示内容的同时可以更新锚点,这些solution同时也解决了不能使用后退按钮的问题。

ajax简介

一般格式

1
2
3
4
5
6
7
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});

参数描述

符号 描述
url 必需,规定把请求发送到哪个 URL
data 可选,映射或字符串值,规定连同请求发送到服务器的数据
success(data, textStatus, jqXHR) 可选,请求成功时执行的回调函数
dataType 可选,规定预期的服务器响应的数据类型,默认执行智能判断(xml、json、script 或 html)

使用ajax需注意

  1. data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断;
  2. $.ajax只提交form以文本方式,如果异步提交包含<file>上传时传不过去,需要使用jquery.form.js的$.ajaxSubmit。

ajax实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var aj = $.ajax( {
url: 'productManager_reverseUpdate',
data: {
selRollBack: selRollBack,
selOperatorsCode: selOperatorsCode,
PROVINCECODE: PROVINCECODE,
pass2: pass2
},
type: 'post',
cache: false,
dataType: 'json',
success:function(data) {
if (data.msg == "true") {
alert("Modified Successfully!");
window.location.reload();
} else {
view(data.msg);
}
},
error : function() {
alert("Modified Error!");
}
});