ajax JavaScript和jQuery

学习Java有一段时间了,做项目的时候多多少少涉及一些Ajax的问题,今天就Ajax JavaScript 和 jQuery做一个小总结,如有问题欢迎大家指出。

Ajax

什么是 Ajax ?

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
简单来说 ajax就是能让你在不刷新的情况下进行异步更新,比如微博在你不刷新的情况下提示你有新微博
这样可以在我们无需加载整个网页的情况下对网页进行更新,这样不仅提高了界面对用户的友好度,而且能够使网页更快,减少不必要的操作,是现在大多数网站都会用的技术。

JavaScript的原生ajax

JavaScript中ajax的调用过程

  • 创建XMLHttpRequest对象
  • 设置回调函数
  • 设置访问url
  • 向服务器发送请求
  • 处理响应信息

    以下为JavaScript原生的ajax

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    var xmlHttp=false; 
    function createXMLHttpRequest() // XMLHttpRequest对象用于在后台与服务器交换数据
    {
    if (window.ActiveXObject) //在IE浏览器中创建XMLHttpRequest对象
    {
    try{
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e){
    try{
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(ee){
    xmlHttp=false;
    }
    }
    }
    else if (window.XMLHttpRequest) //在非IE浏览器中创建XMLHttpRequest对象
    {
    try{
    xmlHttp = new XMLHttpRequest();
    }
    catch(e){
    xmlHttp=false;
    }
    }
    }

    function readercheck(){
    createXMLHttpRequest(); //调用创建XMLHttpRequest对象的方法
    xmlHttp.onreadystatechange=Result; //设置回调函数
    var url="url";
    xmlHttp.open("POST",url,true); //向服务器端发送请求
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf8");
    xmlHttp.send(null);
    }

    function readercheckResult(){
    if (xmlHttp.readyState==4 && xmlHttp.status==200){
    ...
    }
    }

jQuery封装$ajax

jQuery中代码非常简短,jQuery对ajax进行了很好的封装

下面是一些重要的参数

参数 类型 #
options Object 可选。AJAX 请求设置。所有选项都是可选的。
async Boolean 默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
beforeSend(XHR) beforeSend(XHR) 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头
cache Boolean 默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
complete(XHR, TS) Function 请求完成后回调函数 (请求成功或失败之后均调用)。参数: XMLHttpRequest 对象和一个描述请求类型的字符串。
contentType String 默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。
context Object 这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。
data String 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。
dataFilter Function 给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
dataType String 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:”xml”: 返回 XML 文档,可用 jQuery 处理。”html”: 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。”script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)”json”: 返回 JSON 数据 。”jsonp”: JSONP 格式。使用 JSONP 形式调用函数时,如”myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。”text”: 返回纯文本字符串

以下为jQuery的ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({
data: {
},
type: "post",
url: "/",
dataType: "json",
error: function (data) {
...
},
success: function (response) {
...
}
});

通过代码可以知道,jQuery的ajax不仅代码量小,而且很容易理解,一般在开发中会选择jQuery的ajax
在项目中,比如登录(验证账号密码是否正确) 注册(账号是否存在) 这些地方,我们完全可以不用刷新整个页面或者跳转到其他页面来实现,ajax很好的解决了这个问题。

下面放一些在项目中的实例
总项目源码
Java 校园助手
Java 图书馆管理系统

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

var xmlHttp=false;
function createXMLHttpRequest()
{
if (window.ActiveXObject) //在IE浏览器中创建XMLHttpRequest对象
{
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(ee){
xmlHttp=false;
}
}
}
else if (window.XMLHttpRequest) //在非IE浏览器中创建XMLHttpRequest对象
{
try{
xmlHttp = new XMLHttpRequest();
}
catch(e){
xmlHttp=false;
}
}
}
function logincheck(){
var usernameinput = document.getElementById("usernameinput").value;
var passwordinput = document.getElementById("passwordinput").value;
createXMLHttpRequest(); //调用创建XMLHttpRequest对象的方法
xmlHttp.onreadystatechange=logincheckResult; //设置回调函数
var url="LoginAction?action=login&username=" + usernameinput + "&password=" + passwordinput;
xmlHttp.open("POST",url,true); //向服务器端发送请求
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf8");
xmlHttp.send(null);
}

function logincheckResult(){
var usernameinput = document.getElementById("usernameinput").value;
var passwordinput = document.getElementById("passwordinput").value;
if (xmlHttp.readyState==4 && xmlHttp.status==200){
var data= xmlHttp.responseText;
document.getElementById("checkinfo").innerHTML = "";
if(data == "false"){
document.getElementById("checkinfo").innerHTML = "用户名或密码错误";
}
if (usernameinput == ""){
document.getElementById("checkinfo").innerHTML = "用户名不能为空";
}
if (passwordinput == ""){
document.getElementById("checkinfo").innerHTML = "密码不能为空";
}
if (usernameinput == "" && passwordinput == ""){
document.getElementById("checkinfo").innerHTML = "用户名和密码不能为空";
}
if(document.getElementById("checkinfo").innerHTML == ""){
window.location.href="main.jsp";
}
}
}

ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$.ajax({
data: {
username:$("#username").val(),
password:$("#password").val()
},
type: "post",
url: "/checklogin",
dataType: "json",
error: function (data) {
alert("系统错误 请重试");
$(that).removeClass("processing");
},
success: function (response) {
$(that).removeClass("processing");
if (response == "error") {
$("#msg").text("用户名或密码错误");
} else {
window.location.href = "/login";
}
}
});

总结

简单来说 这三者关系
JavaScript前端语言
Ajax是一门技术 可以使网页实现异步更新
jQuery是一个框架,它对JS进行了封装 Query使JS与Ajax的更方便