十二、Ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

作用:
AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
AJAX 可使因特网应用程序更小、更快，更友好。

Ajax.png

一、ajax入门案例

获取XMLHttpRequest对象
对于不同的浏览器，获取方式有区别

function getXMLHttpRequest() {
  var xmlhttp;
  if (window.XMLHttpRequest) {// code for all new browsers
    xmlhttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {// code for IE5 and IE6
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
   return xmlhttp;
}

设置回调函数(onreadystatechange)
xmlHttp.onreadystatechange=function(){ };
目的是服务器端响应完成后，浏览器端可以知道，并完成后续工作。

open操作
xmlHttp.open(“GET”,”/day/ajax”);
设置访问的资源路径以及请求方式

send操作
xmlhttp.send(null);
发送请求

二、原生js的Ajax

XMLHttpRequest之API详解
Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。
简而言之，XmlHttpRequest 使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。
XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。

onreadystatechange属性
当XMLHttpRequest对象的状态改变时会调用的一个函数.

readyState属性
对于XMLHttpRequest对象，它有一个属性readyState,它有五个状态
0 创建XMLHttpRequest对象.
1 当open时
2 当send时
3 响应头已经返回，但响应正文没有完成，也就是响应没有完全完成.
4 响应完成了
一般情况下,在回调的函数中，我们都是判断
if(xmlhttp.readyState==4&&xmlhttp.status==200)
来接收服务器端响应的信息.

status属性
由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

responseText属性
目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。
如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。

responseXML属性
对请求的响应，解析为 XML 并作为 Document 对象返回。

open方法
初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
xmlhttp.open(请求方式,url);
请求方式: POST GET
路径:客户端路径 格式 /工程名/资源路径
如果是GET方式，想要向服务器发送请求，并且携带请求参数，可以直接在url后面连接。
如果是POST方式,想要向服务器发送请求，并且携带请求参数,我们需要在send时传递参数

send方法
发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
如果请求方式是post,并且要携带参数，可以通过send的参数来传递

setRequestHeader方法
向一个打开但未发送的请求设置或添加一个 HTTP 请求。
如果请求方式是POST,并且要携带参数，需要设置一个请求头.
setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");

中文乱码问题
get请求需要在发送请求的时候对中文进行编码,如下:

中文乱码问题.png

服务器端处理方式和之前request的处理乱码方式一样.

Ajax开发步骤：

  1. 获得XMLHttpRequest对象.
    • IE将XMLHttpRequest封装到一个ObjectXActive插件中.
    • Firefox直接可以创建XMLHttpRequest.
  2. 设置状态改变触发一个函数.
  3. 打开一个链接.
  4. 发送请求.

AJAX的GET入门

创建XMLHttpRequest
function createXMLHttpRequest() {
    var xmlHttp;
    try { // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {// Internet Explorer
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
            }
        }
    }

    return xmlHttp;
}

AJAX的代码：
function loadData() {
    // 1.创建异步XMLHttpRequest对象
    var xhr = createXMLHttpRequest();
    // 2.设置状态改变触发一个函数
    xhr.onreadystatechange = function(){
        // 回调函数.
        if(xhr.readyState == 4){// 请求发送完成
            if(xhr.status == 200){// 响应也正确
                var data = xhr.responseText;
                document.getElementById("d1").innerHTML=data;
            }
        }
    }
    // 3.打开一个连接：
    xhr.open("GET","/WEB15/ServletDemo1",true);

    // 4.发送请求
    xhr.send(null);
}

AJAX的POST入门

function loadData(){
    // 1.创建异步对象
    var xhr = createXMLHttpRequest();
    // 2.设置状态改变触发的函数
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                document.getElementById("d1").innerHTML=xhr.responseText;
            }
        }
    }
    // 3.打开连接
    xhr.open("POST","/WEB15/ServletDemo2",true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    // 4.发送数据
    xhr.send("name=李四&password=456");
}

使用AJAX完成用户名异步校验

在注册页面中,当输入了用户名之后,光标离开文本框,显示用户名是否已经存在.
用户名是否已经存在,需要到后台的数据库进行查询的.

使用AJAX完成用户名异步校验.png

步骤分析:

  1. 创建一个用户表
  2. 设计一个注册页面:
  3. 在用户名文本框上绑定一个事件:onblur
  4. 在JS的函数中使用AJAX异步向Servlet发送请求.
  5. 在Servlet中接收参数-->调用业务层-->调用DAO
    • 查询到了：用户名已经存在
    • 没有查询到：用户名可以使用
创建用户表:
CREATE TABLE `user` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(20) DEFAULT NULL,
  `password` VARCHAR(20) DEFAULT NULL,
  `email` VARCHAR(20) DEFAULT NULL,
  `name` VARCHAR(20) DEFAULT NULL,
  `sex` VARCHAR(10) DEFAULT NULL,
  `birthday` DATE DEFAULT NULL,
  `hobby` VARCHAR(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
INSERT  INTO `user`(`id`,`username`,`password`,`email`,`name`,`sex`,`birthday`,`hobby`) VALUES (1,'bbb','123','123@163.com','张三','男','1992-01-02','篮球, 足球, 排球'),(2,'ccc','123','ccc@itcast.cn','李四','女','1992-03-20','排球, 乒乓球'),(3,'aaa','123','aaa@itcast.cn','王守义','男','1990-08-11','足球, 排球'),(5,'tom','123','haha@qq.com','提莫','男',NULL,'篮球');

设计注册页面;
引入jar包和工具类;
创建包结构;

AJAX异步校验用户名:

function checkUsername(){
    // 获得文本框的值:
    var username = document.getElementById("username").value;
    // 创建对象:
    var xhr = createXMLHttpRequest();
    // 2.状态改变触发一个函数
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                // 获得到响应内容:
                var data = xhr.responseText;
                if(data == 1){
                    // 可以使用
                    document.getElementById("s1").innerHTML = "<font color='green'>用户名可以使用</font>";
                    document.getElementById("regBut").disabled=false;
                }else if(data == 2){
                    // 已经存在
                    document.getElementById("s1").innerHTML = "<font color='red'>用户名已经被使用</font>";
                    document.getElementById("regBut").disabled=true;
                }
            }
        }
    }
    // 3.打开连接
    xhr.open("GET","/WEB15/ServletDemo3?username="+username,true);
    // 4.发送数据
    xhr.send(null);
}

三、jQuery的Ajax

load
要求:
jquery对象调用
格式:
load(url,[data],[callback])
参数:
url:请求路径
data:请求参数 格式为json
若有此参数,请求方式为post
若无此参数,请求方式为get
callback:成功之后回调,具有三个参数

$.get
发送get请求
格式:
$.get(url,[data],[callback],[type]);
参数:
type:返回内容的格式有如下取值
xml,html,script,json,text,_default

$.post
发送post请求
格式:
$.post(url,[data],[callback],[type]);

$.ajax
底层是原始的ajax请求方式
格式1:
$.ajax(url,[settings])
格式2:setting可以使用json格式
jQuery.ajax(settings)
参数:
async 设置是否异步，true：表示异步（ajax）
type 设置请求方式。例如：get、post
url 设置请求路径
data 请求参数
dataType 设置数据转换类型，例如：xml, html, script, json
success 成功回调
error 错误回调

例如:

           $.ajax({
                    "async":true,
                    "type":"POST",
                    "url":url,
                    "data":params,
                    "success":function(data){
                        alert(data);
                    },
                    "error" : function(){
                        alert("错误");
                    }
                });

表单序列化
serialize() 将表单中所有内容转成字符串。
所有内容：有name，有值（非空）--文本有数据，单选多选选中，下拉列表选中等
字符串：key=value&key=value&....
serializeArray()将表单中所有内容转成json数组

案例一：使用JQuery完成异步用户名的校验

$(function(){
    // 给用户名的文本框绑定一个事件：
    $("#username").blur(function(){
        // 获得文本框的值:document.getELementById().value;
        var username = $(this).val();
        // 使用jquery的ajax的操作异步发送请求.
        $.post("/WEB15/ServletDemo3",{"username":username},function(data){
            if(data==1){
                // 用户名可以使用
                $("#s1").html("<font color='green'>用户名可以使用</font>");
                $("#regBut").prop("disabled",false);
            }else if(data==2){
                // 用户名已经存在
                $("#s1").html("<font color='red'>用户名已经被占用</font>");
                $("#regBut").prop("disabled",true);
            }
        });
    });
});

案例二：使用JQuery完成仿百度的信息提示

在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的).


使用JQuery完成仿百度的信息提示.png

步骤分析：
1.创建一个数据库和表:
2.设计一个页面
3.文本框绑定一个事件.keyup
4.在keyup所触发函数中:
5.获得文本框的值.
6.将这个值异步提交到服务器.$.post();
7.提交到Servlet：
8.接收参数:
9.调用业务层--调用DAO: select * from .. Where xx like ?;
10.查询之后页面跳转把数据显示到一个表格中.

创建数据库和表:

CREATE TABLE words(
 id INT PRIMARY KEY AUTO_INCREMENT,
 word VARCHAR(20)
);

设计一个页面：

<center><h1>百度一下</h1></center>
<center><input type="text" name="word" id="word" style="width:300px"/><input type="button" value="百度一下"><center>
<div id="d1" style="display:none;position:absolute;top:110px;left:494px;border:1px solid blue;width:300px;height:200px;"></div>

为文本框绑定事件:编写jquery代码

$(function(){
    // 为文本框绑定事件:
    $("#word").keyup(function(){
        // 获得文本框的值:
        var val = $(this).val();
        if(val != ""){
            // 异步将这个值提交给服务器:
            $.post("/WEB15/ServletDemo5",{"val":val},function(data){
                $("#d1").show();
                $("#d1").html(data);
            });
        }else{
            $("#d1").hide();
        }
    });
});

四、js的Ajax和jQuery的Ajax对比

  1. js的Ajax
$('#send').click(function(){
    //请求的5个阶段，对应readyState的值
        //0: 未初始化，send方法未调用；
        //1: 正在发送请求，send方法已调用；
        //2: 请求发送完毕，send方法执行完毕；
        //3: 正在解析响应内容；
        //4: 响应内容解析完毕；
    var data = 'name=yang';
    var xhr = new XMLHttpRequest();        //创建一个ajax对象
    xhr.onreadystatechange = function(event){    //对ajax对象进行监听
        if(xhr.readyState == 4){    //4表示解析完毕
            if(xhr.status == 200){    //200为正常返回
                console.log(xhr.responseText)
            }
        }
    };
    xhr.open('POST','url',true);    //建立连接，参数一：发送方式，
二：请求地址，三：是否异步，true为异步
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');  
 //可有可无
    xhr.send(data);  //发送
});
  1. jQuery的ajax
$.ajax({
    url:'/comm/test1.php',
    type:'POST', //GET
    async:true,    //或false,是否异步
    data:{
        name:'yang',age:25
    },
    timeout:5000,    //超时时间
    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
    beforeSend:function(xhr){
        console.log(xhr)
        console.log('发送前')
    },
    success:function(data,textStatus,jqXHR){
        console.log(data)
        console.log(textStatus)
        console.log(jqXHR)
    },
    error:function(xhr,textStatus){
        console.log('错误')
        console.log(xhr)
        console.log(textStatus)
    },
    complete:function(){
        console.log('结束')
    }
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 161,326评论 4赞 369
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 68,228评论 1赞 304
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 110,979评论 0赞 252
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,489评论 0赞 217
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,894评论 3赞 294
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,900评论 1赞 224
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 32,075评论 2赞 317
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,803评论 0赞 205
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,565评论 1赞 249
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,778评论 2赞 253
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,255评论 1赞 265
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,582评论 3赞 261
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,254评论 3赞 241
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,151评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,952评论 0赞 201
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 36,035评论 2赞 285
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,839评论 2赞 277

推荐阅读更多精彩内容

  • Ajax的运用
    AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,055评论 0赞 7
  • 十八、Ajax 与 Comet
      2005 年，Jesse James Garrett 发表了一篇在线文章，题为“Ajax: A new App...
    霜天晓阅读 871评论 0赞 1
  • 你不知道的 XMLHttpRequest
    本文详细介绍了 XMLHttpRequest 相关知识，涉及内容： AJAX、XMLHTTP、XMLHttpReq...
    semlinker阅读 13,522评论 2赞 18
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,115评论 1赞 45
  • Ajax
    1、ajax技术的背景 不可否认，ajax技术的流行得益于google的大力推广，正是由于google earth...
    不知道_738f阅读 415评论 0赞 2